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/app.component.scss

@@ -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 {

client/src/app/header/search-typeahead.component.scss

@@ -86,7 +86,7 @@ li.suggestion {
     flex: 1;
 
     input {
-      width: unset;
+      width: 70px;
     }
   }