Tested against v1.4.0.beta4 +13.
1 Like
Yeah that CSS is really broken. I started trying to fix it, but got lost fast. Will need to git bisect it to find the commit that broke it.
The admin css might be easier to deal with if it was done with a ‘mobile-first’ approach - find the most logical way to stack all of the items in a single column for narrow screens, and then, at a certain breakpoint, expand into the two columns.
Admin stuff is not a priority for mobile. And if I rotate my phone to landscape it works fine.
A quick fix to make it less weird is to add a clearfix to .admin-controls and get rid of the height: 35px
.admin-controls {
//height: 35px;
@include clearfix;
}
Then float the search control to the left for small screens:
@media (max-width: 700px) {
.admin-controls .search {
float: left;
width: 100%;
}
}
That keeps the admin-nav to the left of the screen. (Right now it’s not clearing the floated ‘Clear’ button.)
To get the .admin-detail section to share the screen with the admin-nav you need to get rid of the padding-left on the .admin-detail section or set it to a percentage of the total screen width.
This works and still gives a left margin:
@media (max-width: 700px) {
.admin-detail {
padding-left: 0;
float: right;
border-left: none;
}
}
You can gain a bit of room on narrow screens by moving the setting-label to the top of the input box:
@media (max-width: 700px) {
.setting-label {
float: none;
}
If you float the reset button to the right it will stay off of the input box
@media (max-width: 700px) {
.btn[title="reset"] {
float: right;
}
}
That all gives you something like this. It could be made a bit better.
I can make a PR if no one is working on it.
2 Likes
Sure, something is way better than totally broken UI here.
1 Like
Just wanted to highlight that for the profile page, the above is how the sidebar looks on mobile. I think we should standardize it and perhaps make the arrow point downwards on mobile instead? 
4 Likes
Yeah down glyph for mobile would be a nice tweak! Great idea.
1 Like