Make menu stackable on mobile

frontend/src/App.module.less

@@ -120,6 +120,15 @@
   }
 }
 
+@media @mobile {
+  .menu.menu {
+    > :global(.ui.container) {
+      height: @menuHeightMobile;
+      align-items: stretch;
+    }
+  }
+}
+
 .banner {
   padding: 8px;
   z-index: 100;

frontend/src/App.tsx

@@ -95,7 +95,7 @@ const App = connect((state) => ({ login: state.login }))(function App({
         <title>OpenBikeSensor Portal</title>
       </Helmet>
       {config?.banner && <Banner {...config.banner} />}
-      <Menu className={styles.menu}>
+      <Menu className={styles.menu} stackable>
         <Container>
           <Link
             to="/"

frontend/src/pages/MapPage/styles.module.less

@@ -48,7 +48,10 @@
 @media @mobile {
   .mapContainer {
     height: auto;
-    min-height: calc(100vh - @menuHeight);
+    min-height: calc(100vh - @menuHeightMobile);
+    &.hasBanner {
+      height: calc(100vh - @menuHeightMobile - 50px);
+    }
     flex-direction: column;
   }
 

frontend/src/styles.less

@@ -10,6 +10,7 @@
 @borderColor: #e0e0e0;
 
 @menuHeight: 50px;
+@menuHeightMobile: 220px;
 
 @mobile: ~'screen and (max-width: 767px)';
 @desktop: ~'screen and (min-width: 768px)';