diff --git a/app/(home-pages)/(writer)/home/HomeLayout.tsx b/app/(home-pages)/(writer)/home/HomeLayout.tsx
index 0bca199c..db630f02 100644
--- a/app/(home-pages)/(writer)/home/HomeLayout.tsx
+++ b/app/(home-pages)/(writer)/home/HomeLayout.tsx
@@ -164,7 +164,7 @@ export function HomeLeafletList(props: {
         initialFacts={initialFacts?.facts || {}}
         showPreview
       />
-      <div className="spacer h-4 w-full bg-transparent shrink-0 " />
+      <div className="spacer sm:block hidden h-4 w-full bg-transparent shrink-0 " />
     </>
   );
 }
diff --git a/app/[leaflet_id]/Footer.tsx b/app/[leaflet_id]/Footer.tsx
index c5070057..a7159ab8 100644
--- a/app/[leaflet_id]/Footer.tsx
+++ b/app/[leaflet_id]/Footer.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { useUIState } from "src/useUIState";
-import { DefaultFooter } from "components/ActionBar/Footer";
+import { FooterLayout } from "components/ActionBar/Footer";
 import { Media } from "components/Media";
 import { ThemePopover } from "components/ThemeManager/ThemeSetter";
 import { Toolbar } from "components/Toolbar";
@@ -52,14 +52,13 @@ export function LeafletFooter(props: { entityID: string }) {
   return (
     <Media
       mobile
-      className="mobileLeafletFooter w-full z-10 touch-none -mt-[54px]"
+      className="mobileLeafletFooter pwa-padding-bottom  w-full z-10 touch-none -mt-[54px]"
     >
       {focusedBlock &&
       focusedBlock.entityType == "block" &&
       hasBlockToolbar(blockType) &&
       entity_set.permissions.write ? (
-        <div
-          className="w-full z-10 p-2 flex bg-bg-page"
+        <FooterLayout
           onMouseDown={(e) => {
             if (e.currentTarget === e.target) e.preventDefault();
           }}
@@ -69,20 +68,19 @@ export function LeafletFooter(props: { entityID: string }) {
             blockID={focusedBlock.entityID}
             blockType={blockType}
           />
-        </div>
+        </FooterLayout>
       ) : focusedBlock &&
         focusedBlock.entityType === "footnote" &&
         entity_set.permissions.write ? (
-        <div
-          className="w-full z-10 p-2 flex bg-bg-page pwa-padding-bottom"
+        <FooterLayout
           onMouseDown={(e) => {
             if (e.currentTarget === e.target) e.preventDefault();
           }}
         >
           <FootnoteToolbar pageID={focusedBlock.parent} />
-        </div>
+        </FooterLayout>
       ) : entity_set.permissions.write ? (
-        <DefaultFooter>
+        <FooterLayout>
           {pub?.publications &&
           identity?.atp_did &&
           pub.publications.identity_did === identity.atp_did ? (
@@ -102,7 +100,7 @@ export function LeafletFooter(props: { entityID: string }) {
             <PostSettings />
             <ThemePopover entityID={props.entityID} />
           </div>
-        </DefaultFooter>
+        </FooterLayout>
       ) : (
         <div className="pb-2 px-2 z-10 flex justify-end">
           <Watermark mobile />
diff --git a/app/globals.css b/app/globals.css
index c8bd0fd4..5c8b412a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -123,7 +123,7 @@
     --hatchSVG: url("/hatchPattern.svg");
     --wavySVG: (url("/RSVPBackground/wavy.svg"));
 
-    --safe-padding-bottom: max(calc(env(safe-area-inset-bottom) - 8px), 16px);
+    --safe-padding-bottom: calc(env(safe-area-inset-bottom) - 8px);
   }
   @media (max-width: 640px) {
     :root {
@@ -539,7 +539,7 @@ pre.shiki {
 }
 
 .pwa-padding {
-  padding-top: max(calc(env(safe-area-inset-top) - 8px)) !important;
+  padding-top: calc(env(safe-area-inset-top) - 8px) !important;
 }
 .pwa-padding-bottom {
   padding-bottom: var(--safe-padding-bottom) !important;
diff --git a/components/ActionBar/Footer.tsx b/components/ActionBar/Footer.tsx
index f563b623..728a71fb 100644
--- a/components/ActionBar/Footer.tsx
+++ b/components/ActionBar/Footer.tsx
@@ -1,19 +1,23 @@
 import { Media } from "components/Media";
 
-export function DefaultFooter(props: { children?: React.ReactNode }) {
+export function FooterLayout(props: {
+  children?: React.ReactNode;
+  onMouseDown?: (e: React.MouseEvent) => void;
+  noBackground?: boolean;
+}) {
   return (
-    <Media
-      mobile
+    <div
+      onMouseDown={props.onMouseDown}
       className={`
-        actionFooter touch-none shrink-0 z-10
-        px-2 pt-1 pwa-padding-bottom
+        leafletFooter touch-none shrink-0 z-10
+        px-2 pt-1 pb-2
         flex justify-between
         [width:-webkit-fill-available]
         pwa-padding-x
-        h-[calc(38px+var(--safe-padding-bottom))]
-        bg-[rgba(var(--bg-page),0.5)] border-top border-bg-page`}
+        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"} `}
     >
       {props.children}
-    </Media>
+    </div>
   );
 }
diff --git a/components/ActionBar/MobileNavigation.tsx b/components/ActionBar/MobileNavigation.tsx
index 494d50ce..8c7093b3 100644
--- a/components/ActionBar/MobileNavigation.tsx
+++ b/components/ActionBar/MobileNavigation.tsx
@@ -71,7 +71,7 @@ export const MobileNavigation = (props: {
   return (
     <MediaContents
       mobile={true}
-      className={`mobilePageFooter  pwa-padding-x z-20 fixed left-0 bottom-6 right-0 transition-transform duration-200 ${hidden ? "translate-y-[120px]" : ""}`}
+      className={`mobilePageFooter  pwa-padding-x z-20 fixed left-0 bottom-4 right-0 transition-transform duration-200 ${hidden ? "translate-y-[120px]" : ""}`}
       style={{ bottom: "var(--safe-padding-bottom)" }}
     >
       <div
diff --git a/components/ActionBar/Sidebar.tsx b/components/ActionBar/Sidebar.tsx
index dba6a922..5da76cba 100644
--- a/components/ActionBar/Sidebar.tsx
+++ b/components/ActionBar/Sidebar.tsx
@@ -30,7 +30,7 @@ export function Sidebar(props: {
   return (
     <Media
       mobile={props.mobile ?? false}
-      className="pwa-padding pwa-padding-bottom"
+      className="pwa-padding pwa-padding-bottom sm:h-full h-[calc(100dvh-16px)]"
     >
       <SidebarContext
         value={{
diff --git a/components/PageLayouts/DashboardShell.tsx b/components/PageLayouts/DashboardShell.tsx
index a68aa206..5af29ed6 100644
--- a/components/PageLayouts/DashboardShell.tsx
+++ b/components/PageLayouts/DashboardShell.tsx
@@ -47,7 +47,7 @@ export function DashboardShell(props: DashboardShellProps) {
               <Sidebar
                 mobile
                 alwaysOpen
-                className="my-2! ml-2 h-[calc(100dvh-16px)]! bg-bg-page!"
+                className="my-2! ml-2 h-full bg-bg-page!"
               >
                 <NavigationContent {...navigationProps} />
               </Sidebar>
diff --git a/components/Toolbar/FootnoteToolbarWrapper.tsx b/components/Toolbar/FootnoteToolbarWrapper.tsx
index 22ec52a3..2798d9f9 100644
--- a/components/Toolbar/FootnoteToolbarWrapper.tsx
+++ b/components/Toolbar/FootnoteToolbarWrapper.tsx
@@ -13,7 +13,8 @@ import { CloseTiny } from "components/Icons/CloseTiny";
 type FootnoteToolbarState = "default" | "link";
 
 export const FootnoteToolbar = (props: { pageID: string }) => {
-  let [toolbarState, setToolbarState] = useState<FootnoteToolbarState>("default");
+  let [toolbarState, setToolbarState] =
+    useState<FootnoteToolbarState>("default");
   let focusedEntity = useUIState((s) => s.focusedEntity);
   let activeEditor = useEditorStates((s) =>
     focusedEntity ? s.editorStates[focusedEntity.entityID] : null,
@@ -38,7 +39,7 @@ export const FootnoteToolbar = (props: { pageID: string }) => {
     <Tooltip.Provider>
       <div
         className={`toolbar flex gap-2 items-center justify-between w-full
-        ${isMobile ? "h-[calc(15px+var(--safe-padding-bottom))]" : "h-[26px]"}`}
+        ${isMobile ? "" : "h-[26px]"}`}
       >
         <div className="toolbarOptions flex gap-1 sm:gap-[6px] items-center grow">
           {toolbarState === "default" ? (
diff --git a/components/Toolbar/index.tsx b/components/Toolbar/index.tsx
index 6e0a02d1..ecf22ae3 100644
--- a/components/Toolbar/index.tsx
+++ b/components/Toolbar/index.tsx
@@ -86,7 +86,7 @@ export const Toolbar = (props: {
     <Tooltip.Provider>
       <div
         className={`toolbar flex gap-2 items-center justify-between w-full
-        ${isMobile ? "h-[calc(15px+var(--safe-padding-bottom))]" : "h-[26px]"}`}
+        ${isMobile ? "" : "h-[26px]"}`}
       >
         <div className="toolbarOptions flex gap-1 sm:gap-[6px] items-center grow">
           {toolbarState === "default" ? (