diff --git a/app/globals.css b/app/globals.css
index 5c8b412a..107c3663 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -66,6 +66,18 @@
   --font-serif: Garamond;
 }
 
+@utility w-fill {
+  width: -webkit-fill-available;
+  width: -moz-available;
+  width: stretch;
+}
+
+@utility h-fill {
+  height: -webkit-fill-available;
+  height: -moz-available;
+  height: stretch;
+}
+
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still
@@ -151,6 +163,8 @@
     @apply p-0;
     @apply overscroll-y-none;
     min-height: -webkit-fill-available;
+    min-height: stretch;
+    min-height: -moz-available;
     @apply font-sans;
     font-synthesis: none;
   }
diff --git a/components/ActionBar/ActionButton.tsx b/components/ActionBar/ActionButton.tsx
index 13c9aa24..b0e4f8a5 100644
--- a/components/ActionBar/ActionButton.tsx
+++ b/components/ActionBar/ActionButton.tsx
@@ -77,8 +77,7 @@ export const ActionButton = forwardRef<
         {icon}
       </div>
       <div
-        className={`flex flex-col ${subtext && "leading-snug"}  sm:max-w-full min-w-0 mr-1  ${sidebar.open ? "block" : labelOnMobile ? "sm:hidden block" : "hidden"}`}
-        style={{ width: "-webkit-fill-available" }}
+        className={`w-fill flex flex-col ${subtext && "leading-snug"}  sm:max-w-full min-w-0 mr-1  ${sidebar.open ? "block" : labelOnMobile ? "sm:hidden block" : "hidden"}`}
       >
         <div className="truncate text-left">{label}</div>
         {subtext && (
diff --git a/components/ActionBar/Footer.tsx b/components/ActionBar/Footer.tsx
index 728a71fb..5af5cc98 100644
--- a/components/ActionBar/Footer.tsx
+++ b/components/ActionBar/Footer.tsx
@@ -12,7 +12,7 @@ export function FooterLayout(props: {
         leafletFooter touch-none shrink-0 z-10
         px-2 pt-1 pb-2
         flex justify-between
-        [width:-webkit-fill-available]
+        w-fill
         pwa-padding-x
         h-[calc(38px+(max(var(--safe-padding-bottom),16px))]
        ${props.noBackground ? "bg-bg-page" : "bg-[rgba(var(--bg-page),0.5)] border-top border-bg-page"} `}
diff --git a/components/ActionBar/Sidebar.tsx b/components/ActionBar/Sidebar.tsx
index 5da76cba..4a0b3c01 100644
--- a/components/ActionBar/Sidebar.tsx
+++ b/components/ActionBar/Sidebar.tsx
@@ -39,13 +39,9 @@ export function Sidebar(props: {
         }}
       >
         <div
-          style={
-            props.alwaysOpen
-              ? { height: "-webkit-fill-available" }
-              : { height: "fit-content" }
-          }
           className={`
           actionSidebar
+          ${props.alwaysOpen ? "h-fill" : "h-fit"}
           ${
             !props.alwaysOpen
               ? ` w-max hover:w-48 absolute top-0 left-0 z-10 opaque-container`