From eb533b7ed0c28f7907bfc6a9cf51196078e4d01a Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Mon, 11 May 2026 12:13:23 -0400
Subject: [PATCH] added some fallbacks for --webkit-fill-available which will
 be funky of firefox

---
 app/globals.css                       | 14 ++++++++++++++
 components/ActionBar/ActionButton.tsx |  3 +--
 components/ActionBar/Footer.tsx       |  2 +-
 components/ActionBar/Sidebar.tsx      |  6 +-----
 4 files changed, 17 insertions(+), 8 deletions(-)

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`
-- 
2.51.2