diff --git a/src/components/FooterBar/FooterBar.module.scss b/src/components/FooterBar/FooterBar.module.scss
index 5e176dd..385847d 100644
--- a/src/components/FooterBar/FooterBar.module.scss
+++ b/src/components/FooterBar/FooterBar.module.scss
@@ -17,24 +17,23 @@
 
     box-sizing: border-box;
     width: 100vw;
-    padding-bottom: calc(var(--bleed) + env(safe-area-inset-bottom));
+    padding-bottom: var(--bleed);
 
     &-content {
       @include flex.row($gap: 1.5rem, $yAlign: center);
 
       box-sizing: border-box;
-      margin: 0 auto;
-      padding-top: calc(var(--vertical-padding) - var(--border-width));
+      margin: calc(-1 * var(--border-width)) auto 0;
+      padding-top: var(--vertical-padding);
       padding-right: calc(var(--page-padding) + env(safe-area-inset-right));
-      padding-bottom: var(--vertical-padding);
+      padding-bottom: calc(var(--vertical-padding) + env(safe-area-inset-bottom));
       padding-left: calc(var(--page-padding) + env(safe-area-inset-left));
 
       &[data-mobile] {
-        --mobile-offset: 0.5rem;
+        --mobile-padding-x: calc(var(--vertical-padding) + 0.5rem);
 
-        padding-right: calc(var(--vertical-padding) + var(--mobile-offset) + env(safe-area-inset-right));
-        padding-bottom: calc(var(--vertical-padding) + var(--mobile-offset));
-        padding-left: calc(var(--vertical-padding) + var(--mobile-offset) + env(safe-area-inset-left));
+        padding-right: calc(var(--mobile-padding-x) + env(safe-area-inset-right));
+        padding-left: calc(var(--mobile-padding-x) + env(safe-area-inset-left));
       }
     }
   }
diff --git a/src/components/FooterBar/FooterBar.tsx b/src/components/FooterBar/FooterBar.tsx
index a315673..849dcf6 100644
--- a/src/components/FooterBar/FooterBar.tsx
+++ b/src/components/FooterBar/FooterBar.tsx
@@ -34,7 +34,8 @@ export const FooterBar = ({
       return;
     }
     const observer = new ResizeObserver(([entry]) => {
-      document.documentElement.style.setProperty('--footer-bar-height', `${entry.contentRect.height}px`);
+      const height = entry.borderBoxSize?.[0]?.blockSize ?? entry.target.getBoundingClientRect().height;
+      document.documentElement.style.setProperty('--footer-bar-height', `${height}px`);
     });
     observer.observe(content);
     return () => {
diff --git a/src/style/variables.scss b/src/style/variables.scss
index b098716..82c0643 100644
--- a/src/style/variables.scss
+++ b/src/style/variables.scss
@@ -244,7 +244,7 @@
   --app-bar-logo-size: 2.5rem;
 
   // Footer Bar Sizes
-  --footer-bar-height: 4rem;
+  --footer-bar-height: 0;
 
   // Spacing
   --modal-padding: 1rem;