The site was completely messed up on mobile because there was no space
for the shortcut and the toggle.
This PR makes space for the preferences shortcut by cramming the icons
together in the narrowest "phone" layout. (Doing so in the wider "phone"
layout isn't necessary and bad UX.)
As for the dark theme toggle, the menu lock toggle is now hidden to make
space for it in the "phone" and "tablet" layouts. (A more fine-grained
solution would be difficult to implement due to the fairly complex
vanilla layout in that area.)
I'm using "phone" and "tablet" to refer to the two distinct layouts
without labels in the notifications bar. There are basically three major
layouts: up to 768px ("phone"), up to 992px ("tablet") and wider (well,
"desktop"). But there is also a minor change in layout between 576px and
577px distinguishing the "narrowest 'phone' layout" mentioned above.
The site was completely messed up on mobile because there was no space for the shortcut and the toggle.
This PR makes space for the preferences shortcut by cramming the icons together in the narrowest "phone" layout. (Doing so in the wider "phone" layout isn't necessary and bad UX.)
As for the dark theme toggle, the menu lock toggle is now hidden to make space for it in the "phone" and "tablet" layouts. (A more fine-grained solution would be difficult to implement due to the fairly complex vanilla layout in that area.)
I'm using "phone" and "tablet" to refer to the two distinct layouts without labels in the notifications bar. There are basically three major layouts: up to 768px ("phone"), up to 992px ("tablet") and wider (well, "desktop"). But there is also a minor change in layout between 576px and 577px distinguishing the "narrowest 'phone' layout" mentioned above.