paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-01 12:33:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

settings: Fix media-query edge case.

Browse Source 
If your browser width was between 701px and 750px you got the mobile
view without the mobile header preventing you from changing sections in
the settings menu.

This was caused by a media-query mismatch:

subscriptions.scss used @media (max-width: 750px)
settings.scss however used @media (max-width: 700px)

Comments added by tabbott to help avoid future bugs like this.
This commit is contained in:
Gittenburg
2020-06-24 09:27:49 +02:00
committed by Tim Abbott
parent 5d279d5456
commit 2fe8d7507d
2 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
static/styles/settings.scss
View File

@@ -2057,7 +2057,9 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
}
}
@media (max-width: 700px) {
// This value needs to match with the same in subscriptions.scss, as
// we have some shared styles declared there
@media (max-width: 750px) {
#settings_overlay_container {
// this variable allows JavaScript to detect this media query
--single-column: yes;

5
static/styles/subscriptions.scss
View File

@@ -1111,6 +1111,11 @@ ul.grey-box {
}
}
// Note that this block has settings_page CSS as well, and thus needs
// to match the media queries in settings.scss.
//
// Longer-term we should extract this logic two-column-overlay class
// to read more naturally.
@media (max-width: 750px) {
.subscriptions-container {
position: relative;