frontend: limit bottom-menu size expansion in reponsive mode

Bottom-menu should not grow beyond certain size in responsive mode
for example if Android Font size is set to max.

This can be simulated by changing the font-size on the root HTML
element to 150%.

Author: thisconnect

frontends/web/src/components/bottom-navigation/bottom-navigation.module.css

@@ -17,7 +17,7 @@
     align-items: center;
     color: var(--color-text);
     display: flex;
-    font-size: 1.2rem;
+    font-size: min(1.2rem, 20px);
     flex-direction: column;
     gap: 4px;
     justify-content: center;

frontends/web/src/style/variables.css

@@ -105,7 +105,7 @@
     --guide-width: 350px;
 
     /* bottom navigation */
-    --bottom-navigation-height: calc(70px + env(safe-area-inset-bottom, 0));
+    --bottom-navigation-height: calc(min(7rem, 90px) + env(safe-area-inset-bottom, 0));
 }
 
 :root,