add padding to the pwa to work on ios and theme colors on android

Squashed commit of the following:

commit 113d23b446c852492b1b207e420a985409a59a5a
Author: Jared Pereira <[e-mail]>
Date: Tue Feb 4 16:21:44 2025 -0500

add some more pwa-padding and dynamic theme color on android

commit 16433bd6b6f05328a98af9505af45368d376a7e4
Author: Jared Pereira <[e-mail]>
Date: Tue Feb 4 15:15:21 2025 -0500

aadd basic pwa padding

app/[leaflet_id]/Leaflet.tsx

···
             <UpdateLeafletTitle entityID={props.leaflet_id} />
             <AddLeafletToHomepage />
             <SelectionManager />
-            {/* we need the padding bottom here because if we don't have it the mobile footer will cut off 
+            {/* we need the padding bottom here because if we don't have it the mobile footer will cut off
             the dropshadow on the page... the padding is compensated by a negative top margin in mobile footer  */}
             <div
-              className="leafletContentWrapper w-full relative overflow-x-scroll snap-x snap-mandatory no-scrollbar grow items-stretch flex h-full pb-4"
+              className="leafletContentWrapper w-full relative overflow-x-scroll snap-x snap-mandatory no-scrollbar grow items-stretch flex h-full pb-4 pwa-padding"
               id="page-carousel"
             >
               <Pages rootPage={props.leaflet_id} />

app/globals.css

···
     z-index: 0;
   }
 }
+
+.pwa-padding {
+  padding-top: max(calc(env(safe-area-inset-top) - 8px)) !important;
+}
+.pwa-padding-bottom {
+  padding-bottom: max(calc(env(safe-area-inset-bottom) - 14px), 8px);
+}

app/home/LoggedOutWarning.tsx

···
       className={`
       homeWarning  z-10 shrink-0
       bg-bg-page rounded-md
-      absolute bottom-14 left-2 right-2
+      absolute bottom-16 left-2 right-2
       sm:static sm:mr-1 sm:ml-6 sm:mt-6 border border-border-light`}
     >
       <div className="px-2 py-1 text-sm text-tertiary flex sm:flex-row flex-col sm:gap-4 gap-1 items-center sm:justify-between">

app/home/page.tsx

···
         set={permission_token.permission_token_rights[0].entity_set}
       >
         <ThemeProvider entityID={root_entity}>
-          <div className="flex h-full bg-bg-leaflet">
+          <div className="flex h-full bg-bg-leaflet pwa-padding">
             <ThemeBackgroundProvider entityID={root_entity}>
               <div className="home relative max-w-screen-lg w-full h-full mx-auto flex sm:flex-row sm:items-stretch flex-col-reverse px-2 sm:px-6 ">
                 {!auth_res && (
···
                     <LoggedOutWarning />
                   </div>
                 )}
-                <div className="homeOptions z-10 shrink-0 sm:static absolute bottom-0 left-0 right-0 place-self-end sm:place-self-start flex sm:flex-col flex-row-reverse sm:w-fit w-full items-center px-2 sm:px-0 pb-2 pt-2 sm:pt-7 sm:bg-transparent bg-bg-page border-border border-t sm:border-none">
+                <div
+                  className={`homeOptions z-10 shrink-0
+                    sm:static absolute bottom-0 left-0 right-0
+                    place-self-end sm:place-self-start flex sm:flex-col flex-row-reverse sm:w-fit w-full items-center
+                  px-2 sm:px-0 pwa-padding-bottom pt-2 sm:pt-7 sm:bg-transparent
+                  bg-bg-page border-border border-t sm:border-none`}
+                >
                   <div className="flex sm:flex-col flex-row-reverse gap-2 shrink-0 place-self-end">
                     <CreateNewLeafletButton />
                     <ThemePopover entityID={root_entity} home />

app/layout.tsx

···
 };
 
 export const viewport = {
+  themeColor: "#ffffff",
   minimumScale: 1,
   initialScale: 1,
   maximumScale: 1,

components/MobileFooter.tsx

···
   let entity_set = useEntitySetContext();
 
   return (
-    <Media mobile className="mobileFooter w-full z-10 touch-none -mt-4">
+    <Media mobile className="mobileFooter w-full z-10 touch-none -mt-4 ">
       {focusedBlock &&
       focusedBlock.entityType == "block" &&
       entity_set.permissions.write ? (
···
           />
         </div>
       ) : entity_set.permissions.write ? (
-        <div className="z-10 pb-2 px-2 pt-0.5 flex justify-between">
+        <div className="z-10 pwa-padding-bottom px-2 pt-0.5 flex justify-between">
           <div className="flex flex-row gap-[6px]">
             <HomeButton />
           </div>

components/ThemeManager/ThemeProvider.tsx

···
     if (!el) return;
     setCSSVariableToColor(el, "--bg-leaflet", bgLeaflet);
     setCSSVariableToColor(el, "--bg-page", bgPage);
+    document
+      .querySelector('meta[name="theme-color"]')
+      ?.setAttribute("content", `rgb(${colorToString(bgLeaflet, "rgb")})`);
     el?.style.setProperty(
       "--bg-page-alpha",
       bgPage.getChannelValue("alpha").toString(),
···
   ]);
   return (
     <div
-      className="leafletWrapper w-full text-primary h-full flex flex-col bg-center items-stretch"
+      className="leafletWrapper w-full text-primary h-full flex flex-col bg-center items-stretch "
       style={
         {
           "--bg-leaflet": colorToString(bgLeaflet, "rgb"),

components/ViewportSizeLayout.tsx

···
   let viewheight = useViewportSize().height;
   let difference = useViewportDifference();
   return (
-    <div style={{ height: isIOS() ? viewheight : "100%" }}>
+    <div
+      style={{
+        height: isIOS()
+          ? `calc(${viewheight}px + env(safe-area-inset-top)`
+          : "calc(100% + env(safe-area-inset-top)",
+      }}
+    >
       {props.children}
     </div>
   );