UI: Adjust footer nav bar size in iOS app

UI: Adjust footer nav bar size in iOS app

diff --git a/app/assets/stylesheets/common/components/footer-nav.scss b/app/assets/stylesheets/common/components/footer-nav.scss
index 0bbf58e..2691951 100644
--- a/app/assets/stylesheets/common/components/footer-nav.scss
+++ b/app/assets/stylesheets/common/components/footer-nav.scss
@@ -2,7 +2,7 @@
 // Footer nav bar (displayed in DiscourseHub app and PWAs)
 // --------------------------------------------------
 
-$footer-nav-height: 55px;
+$footer-nav-height: 49px;
 
 body.footer-nav-visible {
   #main-outlet {
@@ -37,8 +37,6 @@ body.footer-nav-visible {
 
   &.visible {
     bottom: 0px;
-
-    padding-bottom: env(safe-area-inset-bottom);
   }
 
   .footer-nav-widget {
@@ -47,7 +45,9 @@ body.footer-nav-visible {
     @include unselectable;
     button {
       flex: 1;
-      margin: 12px;
+      margin: 4px;
+      border-radius: 2px;
+      padding: 14px 18px;
       &:disabled {
         opacity: 0.6;
       }
@@ -55,6 +55,12 @@ body.footer-nav-visible {
   }
 }
 
+@supports (padding: max(0px)) {
+  .footer-nav.visible {
+    padding-bottom: unquote("max(5px, env(safe-area-inset-bottom))");
+  }
+}
+
 @supports (-webkit-backdrop-filter: blur(10px)) {
   body:not(.footer-nav-ipad) .footer-nav {
     background-color: rgba($header_background, 0.7);

GitHub sha: f1b07826

This commit has been mentioned on Discourse Meta. There might be relevant details there: