diff options
author | aschaap <8865084+aschaap@users.noreply.github.com> | 2021-04-08 05:07:18 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-08 11:07:18 +0200 |
commit | 97c116edf9b02ed9c85b2cf0fc33a4e7f7266d78 (patch) | |
tree | e84fbe72ab7201776c7008e75fef8231e8411ca4 /client/src/app/header/search-typeahead.component.scss | |
parent | 9a8c02c9da7b538b3d726016c59a527fa3811ab0 (diff) | |
download | PeerTube-97c116edf9b02ed9c85b2cf0fc33a4e7f7266d78.tar.gz PeerTube-97c116edf9b02ed9c85b2cf0fc33a4e7f7266d78.tar.zst PeerTube-97c116edf9b02ed9c85b2cf0fc33a4e7f7266d78.zip |
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.
Diffstat (limited to 'client/src/app/header/search-typeahead.component.scss')
-rw-r--r-- | client/src/app/header/search-typeahead.component.scss | 2 |
1 files changed, 1 insertions, 1 deletions
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss index f8d68e986..a60aa38d6 100644 --- a/client/src/app/header/search-typeahead.component.scss +++ b/client/src/app/header/search-typeahead.component.scss | |||
@@ -86,7 +86,7 @@ li.suggestion { | |||
86 | flex: 1; | 86 | flex: 1; |
87 | 87 | ||
88 | input { | 88 | input { |
89 | width: unset; | 89 | width: 70px; |
90 | } | 90 | } |
91 | } | 91 | } |
92 | 92 | ||