From 97c116edf9b02ed9c85b2cf0fc33a4e7f7266d78 Mon Sep 17 00:00:00 2001
From: aschaap <8865084+aschaap@users.noreply.github.com>
Date: Thu, 8 Apr 2021 05:07:18 -0400
Subject: 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.
---
 client/src/app/header/search-typeahead.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'client/src/app/header')

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 {
     flex: 1;
 
     input {
-      width: unset;
+      width: 70px;
     }
   }
 
-- 
cgit v1.2.3