Unverified Commit 97c116ed authored by aschaap's avatar aschaap Committed by GitHub

Fixing disappearing hamburger menu for narrow screens (#3929)

* Made top search bar more scalable for (physically) narrow screens

Removing `flex: auto` on `.top-left-block` for screens narrower than
`350px`allows the search bar to resize to fill up the remaining space.
Setting `width: 70px` on `#typeahead-container input` for mobile widths
prevents the hamburger button from being squished at certain widths.
Given that the padding adds up to `50px`, setting what amounts to the
minimum width of the search field to `70px` seems reasonable.

Fixes #3199.

* Making hamburger button margin and spacing narrower for mobile

The clickable area is restricted to the icon anyway, and the extra space
benefits the search field width on narrow screens.
parent 9a8c02c9
......@@ -43,6 +43,10 @@ $assets-path: '../assets';
background-color: pvar(--mainForegroundColor);
mask-image: url('#{$assets-path}/images/misc/menu.svg');
margin: 0 18px 0 20px;
@media screen and (max-width: $mobile-view) {
margin: 0 10px;
}
}
}
......@@ -71,16 +75,11 @@ $assets-path: '../assets';
}
@media screen and (max-width: $mobile-view) {
width: 70px;
.peertube-title {
display: none;
}
}
@media screen and (max-width: 350px) {
flex: auto;
}
}
.header-right {
......
......@@ -86,7 +86,7 @@ li.suggestion {
flex: 1;
input {
width: unset;
width: 70px;
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment