Fix persistent bottom nav by moving tabs outside sticky header

app/public/style.css

@@ -105,6 +105,8 @@ a:hover { text-decoration: underline; }
   left: 0;
   right: 0;
   bottom: 0;
+  width: 100vw;
+  max-width: 100vw;
   z-index: 300;
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
@@ -115,6 +117,13 @@ a:hover { text-decoration: underline; }
   border-top: 1px solid rgba(121, 165, 191, 0.36);
 }
 
+@supports (bottom: env(safe-area-inset-bottom)) {
+  .tabs {
+    bottom: 0;
+    padding-bottom: calc(0.45rem + env(safe-area-inset-bottom));
+  }
+}
+
 .tab {
   border: none;
   border-radius: 12px;
@@ -791,6 +800,8 @@ body.high-contrast {
     left: 0;
     right: 0;
     bottom: 0;
+    width: 100vw;
+    max-width: 100vw;
     z-index: 300;
     display: grid;
     grid-template-columns: repeat(5, minmax(0, 1fr));