ios: add x-axis safe area padding for bottom navigation

so the padding on its x-axis isn't too tight.

Author: shonsirsha

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

@@ -4,10 +4,12 @@
   border-top: 2px solid var(--bottom-navigation-border-color);
   display: none;
   padding: var(--space-half);
+  padding-top: calc(var(--space-half) - env(safe-area-inset-bottom, 0));
+  padding-left: calc(calc(env(safe-area-inset-bottom, 0) / 2) + var(--space-half));
+  padding-right: calc(calc(env(safe-area-inset-bottom, 0) / 2) + var(--space-half));
   position: fixed;
   width: 100%;
   height: var(--bottom-navigation-height);
-  padding-top: calc(var(--space-half) - env(safe-area-inset-bottom, 0));
   justify-content: space-between;
 }