From 8f4c48251e4704ccbe2b11ce69554f84e8237a79 Mon Sep 17 00:00:00 2001
From: Ian Paschal <git@ianpaschal.com>
Date: Fri, 12 Jun 2026 20:50:18 +0200
Subject: [PATCH 1/8] CC-101: Improve Component Library Mobile Support

Resolves CC-101
---
 src/components/AppNavigation/AppNavigation.module.scss   | 4 ++--
 .../MobileNavigation/MobileNavigation.module.scss        | 4 ++--
 src/components/DialogManager/Dialog.module.scss          | 6 ++++--
 src/components/Drawer/Drawer.module.scss                 | 4 ++--
 src/components/InputPanel/InputPanel.module.scss         | 9 ++++++---
 .../Menu/components/MobileMenu/MobileMenu.module.scss    | 1 +
 .../Tabs/components/TabsList/TabsList.module.scss        | 6 +++---
 7 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/AppNavigation/AppNavigation.module.scss b/src/components/AppNavigation/AppNavigation.module.scss
index 5c8f474..93e8b24 100644
--- a/src/components/AppNavigation/AppNavigation.module.scss
+++ b/src/components/AppNavigation/AppNavigation.module.scss
@@ -17,7 +17,7 @@
 
     box-sizing: border-box;
     width: 100vw;
-    height: calc(var(--app-bar-height) + var(--bleed));
+    height: calc(var(--app-bar-height) + var(--bleed) + env(safe-area-inset-top));
     padding-top: var(--bleed);
 
     &-content {
@@ -27,7 +27,7 @@
 
       box-sizing: border-box;
       margin: 0 auto;
-      padding: 0.75rem var(--page-padding) calc(0.75rem - var(--border-width));
+      padding: calc(0.75rem + env(safe-area-inset-top)) var(--page-padding) calc(0.75rem - var(--border-width));
 
       &[data-layout="mobile"] {
         grid-template-areas: "navigation logo secondary";
diff --git a/src/components/AppNavigation/components/MobileNavigation/MobileNavigation.module.scss b/src/components/AppNavigation/components/MobileNavigation/MobileNavigation.module.scss
index 1cf387d..2e5754e 100644
--- a/src/components/AppNavigation/components/MobileNavigation/MobileNavigation.module.scss
+++ b/src/components/AppNavigation/components/MobileNavigation/MobileNavigation.module.scss
@@ -32,7 +32,7 @@
       display: grid;
       grid-template-areas: "header" "routes";
       grid-template-columns: 1fr;
-      grid-template-rows: var(--app-bar-height) 1fr;
+      grid-template-rows: calc(var(--app-bar-height) + env(safe-area-inset-top)) 1fr;
 
       width: 20rem;
       max-width: calc(100vw - 2rem);
@@ -55,7 +55,7 @@
       grid-area: header;
       flex-shrink: 0;
       justify-content: space-between;
-      padding: 0 var(--padding-x);
+      padding: env(safe-area-inset-top) var(--padding-x) 0;
     }
 
     &-scroll-area {
diff --git a/src/components/DialogManager/Dialog.module.scss b/src/components/DialogManager/Dialog.module.scss
index dd0f67e..4d7df42 100644
--- a/src/components/DialogManager/Dialog.module.scss
+++ b/src/components/DialogManager/Dialog.module.scss
@@ -31,7 +31,9 @@
     }
 
     &-popup {
-      --dialog-usable-height: calc(100dvh - (2 * var(--page-padding)));
+      --dialog-offset-top: calc(var(--page-padding) + env(safe-area-inset-top));
+      --dialog-offset-bottom: calc(var(--page-padding) + env(safe-area-inset-bottom));
+      --dialog-usable-height: calc(100dvh - (var(--dialog-offset-top) + var(--dialog-offset-bottom)));
       --dialog-usable-width: calc(100dvw - (2 * var(--page-padding)));
       --dialog-max-height: min(var(--dialog-user-max-height, 100dvh), var(--dialog-usable-height));
       --dialog-max-width: min(var(--dialog-user-max-width, 100dvw), var(--dialog-usable-width));
@@ -39,7 +41,7 @@
       @include shadows.elevated;
 
       position: fixed;
-      top: 50%;
+      top: calc((var(--dialog-usable-height) / 2) + var(--dialog-offset-top));
       left: 50%;
       transform: translate(-50%, -50%) scale(calc(1 - 0.1 * var(--nested-dialogs)));
       translate: 0 calc(0px + 1.25rem * var(--nested-dialogs));
diff --git a/src/components/Drawer/Drawer.module.scss b/src/components/Drawer/Drawer.module.scss
index e474d93..472eafa 100644
--- a/src/components/Drawer/Drawer.module.scss
+++ b/src/components/Drawer/Drawer.module.scss
@@ -245,7 +245,7 @@
 
       grid-area: header;
       justify-content: space-between;
-      padding: var(--modal-padding) var(--modal-padding) 1rem;
+      padding: calc(var(--modal-padding) + env(safe-area-inset-top)) var(--modal-padding) 1rem;
 
       &-close {
         margin: -0.25rem;
@@ -264,7 +264,7 @@
       flex-direction: column;
 
       min-height: 0;
-      padding: 0 var(--modal-padding) var(--modal-padding);
+      padding: 0 var(--modal-padding) calc(var(--modal-padding) + env(safe-area-inset-bottom));
 
       &[data-padding="false"] {
         padding: 0;
diff --git a/src/components/InputPanel/InputPanel.module.scss b/src/components/InputPanel/InputPanel.module.scss
index dfae7bd..2b2dc3d 100644
--- a/src/components/InputPanel/InputPanel.module.scss
+++ b/src/components/InputPanel/InputPanel.module.scss
@@ -51,15 +51,18 @@
     }
 
     &-popup {
-      --input-panel-usable-height: calc(100dvh - 2 * var(--page-padding));
-      --input-panel-usable-width: calc(100dvw - 2 * var(--page-padding));
+      --input-panel-offset-top: calc(var(--page-padding) + env(safe-area-inset-top));
+      --input-panel-offset-bottom: calc(var(--page-padding) + env(safe-area-inset-bottom));
+      --input-panel-usable-height: calc(100dvh - (var(--input-panel-offset-top) + var(--input-panel-offset-bottom)));
+      --input-panel-usable-width: calc(100dvw - (2 * var(--page-padding)));
       --input-panel-max-height: min(var(--input-panel-user-max-height, 100dvh), var(--input-panel-usable-height));
       --input-panel-max-width: min(var(--input-panel-user-max-width, 100dvw), var(--input-panel-usable-width));
 
       will-change: transform;
 
       position: fixed;
-      inset: 50% auto auto 50%;
+      top: calc((var(--input-panel-usable-height) / 2) + var(--input-panel-offset-top));
+      left: 50%;
       transform: translate(-50%, -50%);
 
       overflow: hidden;
diff --git a/src/components/Menu/components/MobileMenu/MobileMenu.module.scss b/src/components/Menu/components/MobileMenu/MobileMenu.module.scss
index 41e81f7..69ad265 100644
--- a/src/components/Menu/components/MobileMenu/MobileMenu.module.scss
+++ b/src/components/Menu/components/MobileMenu/MobileMenu.module.scss
@@ -57,6 +57,7 @@
       box-sizing: border-box;
       width: 100%;
       max-width: 24rem;
+      max-height: calc(100dvh - env(safe-area-inset-top, 0px));
       padding: 0 1rem calc(2rem + env(safe-area-inset-bottom, 0px));
 
       outline: 0;
diff --git a/src/components/Tabs/components/TabsList/TabsList.module.scss b/src/components/Tabs/components/TabsList/TabsList.module.scss
index 0bf4f1b..d8ac9a3 100644
--- a/src/components/Tabs/components/TabsList/TabsList.module.scss
+++ b/src/components/Tabs/components/TabsList/TabsList.module.scss
@@ -31,9 +31,9 @@
         left: 0;
 
         width: 100%;
-        height: var(--app-bar-height);
-        min-height: var(--app-bar-height);
-        padding: calc(var(--spacing) - var(--border-width)) 0 var(--spacing);
+        height: calc(var(--app-bar-height) + env(safe-area-inset-bottom));
+        min-height: calc(var(--app-bar-height) + env(safe-area-inset-bottom));
+        padding: calc(var(--spacing) - var(--border-width)) 0 calc(var(--spacing) + env(safe-area-inset-bottom));
 
         background-color: unset;
       }

From 68e5904441f028a5794baee44f8b0542e50b2b4f Mon Sep 17 00:00:00 2001
From: Ian Paschal <git@ianpaschal.com>
Date: Fri, 12 Jun 2026 21:11:25 +0200
Subject: [PATCH 2/8] PR Feedback

---
 .../AppNavigation/AppNavigation.module.scss   |  3 +-
 .../MobileNavigation.module.scss              |  4 +-
 .../DialogManager/Dialog.module.scss          |  8 +--
 src/components/Drawer/Drawer.module.scss      | 54 ++++++++++++++++++-
 .../InputPanel/InputPanel.module.scss         |  6 ++-
 .../MobileMenu/MobileMenu.module.scss         |  3 +-
 .../components/TabsList/TabsList.module.scss  |  3 +-
 7 files changed, 69 insertions(+), 12 deletions(-)

diff --git a/src/components/AppNavigation/AppNavigation.module.scss b/src/components/AppNavigation/AppNavigation.module.scss
index 93e8b24..bf60bbd 100644
--- a/src/components/AppNavigation/AppNavigation.module.scss
+++ b/src/components/AppNavigation/AppNavigation.module.scss
@@ -27,7 +27,8 @@
 
       box-sizing: border-box;
       margin: 0 auto;
-      padding: calc(0.75rem + env(safe-area-inset-top)) var(--page-padding) calc(0.75rem - var(--border-width));
+      /* stylelint-disable-next-line @stylistic/max-line-length */
+      padding: calc(0.75rem + env(safe-area-inset-top)) calc(var(--page-padding) + env(safe-area-inset-right)) calc(0.75rem - var(--border-width)) calc(var(--page-padding) + env(safe-area-inset-left));
 
       &[data-layout="mobile"] {
         grid-template-areas: "navigation logo secondary";
diff --git a/src/components/AppNavigation/components/MobileNavigation/MobileNavigation.module.scss b/src/components/AppNavigation/components/MobileNavigation/MobileNavigation.module.scss
index 2e5754e..87639f6 100644
--- a/src/components/AppNavigation/components/MobileNavigation/MobileNavigation.module.scss
+++ b/src/components/AppNavigation/components/MobileNavigation/MobileNavigation.module.scss
@@ -55,7 +55,7 @@
       grid-area: header;
       flex-shrink: 0;
       justify-content: space-between;
-      padding: env(safe-area-inset-top) var(--padding-x) 0;
+      padding: env(safe-area-inset-top) var(--padding-x) 0 calc(var(--padding-x) + env(safe-area-inset-left));
     }
 
     &-scroll-area {
@@ -66,7 +66,7 @@
       display: flex;
       flex-direction: column;
       gap: 1rem;
-      padding: 1rem var(--padding-x);
+      padding: 1rem var(--padding-x) 1rem calc(var(--padding-x) + env(safe-area-inset-left));
     }
   }
 }
diff --git a/src/components/DialogManager/Dialog.module.scss b/src/components/DialogManager/Dialog.module.scss
index 4d7df42..82544f4 100644
--- a/src/components/DialogManager/Dialog.module.scss
+++ b/src/components/DialogManager/Dialog.module.scss
@@ -33,8 +33,10 @@
     &-popup {
       --dialog-offset-top: calc(var(--page-padding) + env(safe-area-inset-top));
       --dialog-offset-bottom: calc(var(--page-padding) + env(safe-area-inset-bottom));
+      --dialog-offset-left: calc(var(--page-padding) + env(safe-area-inset-left));
+      --dialog-offset-right: calc(var(--page-padding) + env(safe-area-inset-right));
       --dialog-usable-height: calc(100dvh - (var(--dialog-offset-top) + var(--dialog-offset-bottom)));
-      --dialog-usable-width: calc(100dvw - (2 * var(--page-padding)));
+      --dialog-usable-width: calc(100dvw - (var(--dialog-offset-left) + var(--dialog-offset-right)));
       --dialog-max-height: min(var(--dialog-user-max-height, 100dvh), var(--dialog-usable-height));
       --dialog-max-width: min(var(--dialog-user-max-width, 100dvw), var(--dialog-usable-width));
 
@@ -42,7 +44,7 @@
 
       position: fixed;
       top: calc((var(--dialog-usable-height) / 2) + var(--dialog-offset-top));
-      left: 50%;
+      left: calc((var(--dialog-usable-width) / 2) + var(--dialog-offset-left));
       transform: translate(-50%, -50%) scale(calc(1 - 0.1 * var(--nested-dialogs)));
       translate: 0 calc(0px + 1.25rem * var(--nested-dialogs));
 
@@ -54,7 +56,7 @@
 
       box-sizing: border-box;
       width: max-content;
-      min-width: min(calc(100dvw - (2 * var(--page-padding))), 24rem);
+      min-width: min(var(--dialog-usable-width), 24rem);
       max-width: var(--dialog-max-width);
       max-height: var(--dialog-max-height);
       padding: var(--modal-padding) 0;
diff --git a/src/components/Drawer/Drawer.module.scss b/src/components/Drawer/Drawer.module.scss
index 472eafa..b04d49b 100644
--- a/src/components/Drawer/Drawer.module.scss
+++ b/src/components/Drawer/Drawer.module.scss
@@ -73,6 +73,10 @@
     &-popup {
       --bleed: 3rem;
       --stack-scale: calc(1 - 0.05 * var(--nested-drawers, 0));
+      --inset-top: calc(var(--modal-padding) + env(safe-area-inset-top));
+      --inset-right: calc(var(--modal-padding) + env(safe-area-inset-right));
+      --inset-bottom: calc(var(--modal-padding) + env(safe-area-inset-bottom));
+      --inset-left: calc(var(--modal-padding) + env(safe-area-inset-left));
 
       @include shadows.elevated;
 
@@ -245,7 +249,30 @@
 
       grid-area: header;
       justify-content: space-between;
-      padding: calc(var(--modal-padding) + env(safe-area-inset-top)) var(--modal-padding) 1rem;
+      padding: var(--modal-padding) var(--modal-padding) 1rem;
+
+      // Only inset for the safe area on edges where this drawer's popup actually touches the
+      // screen edge for its anchor direction.
+      .drawer-popup[data-swipe-direction="up"] & {
+        padding-top: var(--inset-top);
+        padding-right: var(--inset-right);
+        padding-left: var(--inset-left);
+      }
+
+      .drawer-popup[data-swipe-direction="down"] & {
+        padding-right: var(--inset-right);
+        padding-left: var(--inset-left);
+      }
+
+      .drawer-popup[data-swipe-direction="left"] & {
+        padding-top: var(--inset-top);
+        padding-left: var(--inset-left);
+      }
+
+      .drawer-popup[data-swipe-direction="right"] & {
+        padding-top: var(--inset-top);
+        padding-right: var(--inset-right);
+      }
 
       &-close {
         margin: -0.25rem;
@@ -264,7 +291,30 @@
       flex-direction: column;
 
       min-height: 0;
-      padding: 0 var(--modal-padding) calc(var(--modal-padding) + env(safe-area-inset-bottom));
+      padding: 0 var(--modal-padding) var(--modal-padding);
+
+      // Only inset for the safe area on edges where this drawer's popup actually touches the
+      // screen edge for its anchor direction.
+      .drawer-popup[data-swipe-direction="up"] & {
+        padding-right: var(--inset-right);
+        padding-left: var(--inset-left);
+      }
+
+      .drawer-popup[data-swipe-direction="down"] & {
+        padding-right: var(--inset-right);
+        padding-bottom: var(--inset-bottom);
+        padding-left: var(--inset-left);
+      }
+
+      .drawer-popup[data-swipe-direction="left"] & {
+        padding-bottom: var(--inset-bottom);
+        padding-left: var(--inset-left);
+      }
+
+      .drawer-popup[data-swipe-direction="right"] & {
+        padding-right: var(--inset-right);
+        padding-bottom: var(--inset-bottom);
+      }
 
       &[data-padding="false"] {
         padding: 0;
diff --git a/src/components/InputPanel/InputPanel.module.scss b/src/components/InputPanel/InputPanel.module.scss
index 2b2dc3d..b13e7e3 100644
--- a/src/components/InputPanel/InputPanel.module.scss
+++ b/src/components/InputPanel/InputPanel.module.scss
@@ -53,8 +53,10 @@
     &-popup {
       --input-panel-offset-top: calc(var(--page-padding) + env(safe-area-inset-top));
       --input-panel-offset-bottom: calc(var(--page-padding) + env(safe-area-inset-bottom));
+      --input-panel-offset-left: calc(var(--page-padding) + env(safe-area-inset-left));
+      --input-panel-offset-right: calc(var(--page-padding) + env(safe-area-inset-right));
       --input-panel-usable-height: calc(100dvh - (var(--input-panel-offset-top) + var(--input-panel-offset-bottom)));
-      --input-panel-usable-width: calc(100dvw - (2 * var(--page-padding)));
+      --input-panel-usable-width: calc(100dvw - (var(--input-panel-offset-left) + var(--input-panel-offset-right)));
       --input-panel-max-height: min(var(--input-panel-user-max-height, 100dvh), var(--input-panel-usable-height));
       --input-panel-max-width: min(var(--input-panel-user-max-width, 100dvw), var(--input-panel-usable-width));
 
@@ -62,7 +64,7 @@
 
       position: fixed;
       top: calc((var(--input-panel-usable-height) / 2) + var(--input-panel-offset-top));
-      left: 50%;
+      left: calc((var(--input-panel-usable-width) / 2) + var(--input-panel-offset-left));
       transform: translate(-50%, -50%);
 
       overflow: hidden;
diff --git a/src/components/Menu/components/MobileMenu/MobileMenu.module.scss b/src/components/Menu/components/MobileMenu/MobileMenu.module.scss
index 69ad265..a8d17d6 100644
--- a/src/components/Menu/components/MobileMenu/MobileMenu.module.scss
+++ b/src/components/Menu/components/MobileMenu/MobileMenu.module.scss
@@ -58,7 +58,8 @@
       width: 100%;
       max-width: 24rem;
       max-height: calc(100dvh - env(safe-area-inset-top, 0px));
-      padding: 0 1rem calc(2rem + env(safe-area-inset-bottom, 0px));
+      /* stylelint-disable-next-line @stylistic/max-line-length */
+      padding: 0 calc(1rem + env(safe-area-inset-right, 0px)) calc(2rem + env(safe-area-inset-bottom, 0px)) calc(1rem + env(safe-area-inset-left, 0px));
 
       outline: 0;
 
diff --git a/src/components/Tabs/components/TabsList/TabsList.module.scss b/src/components/Tabs/components/TabsList/TabsList.module.scss
index d8ac9a3..bb508d9 100644
--- a/src/components/Tabs/components/TabsList/TabsList.module.scss
+++ b/src/components/Tabs/components/TabsList/TabsList.module.scss
@@ -43,7 +43,8 @@
       height: 100%;
       max-height: 100%;
       margin: 0 auto;
-      padding: 0 var(--page-padding);
+      /* stylelint-disable-next-line @stylistic/max-line-length */
+      padding: 0 calc(var(--page-padding) + env(safe-area-inset-right)) 0 calc(var(--page-padding) + env(safe-area-inset-left));
 
       > button {
         height: 100%;

From eb35f32ee660ad4ebeeb532194fc2673c62f2963 Mon Sep 17 00:00:00 2001
From: Ian Paschal <git@ianpaschal.com>
Date: Fri, 12 Jun 2026 21:54:50 +0200
Subject: [PATCH 3/8] PR Feedback

---
 src/components/AppNavigation/AppNavigation.module.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/AppNavigation/AppNavigation.module.scss b/src/components/AppNavigation/AppNavigation.module.scss
index bf60bbd..5be57f6 100644
--- a/src/components/AppNavigation/AppNavigation.module.scss
+++ b/src/components/AppNavigation/AppNavigation.module.scss
@@ -18,7 +18,9 @@
     box-sizing: border-box;
     width: 100vw;
     height: calc(var(--app-bar-height) + var(--bleed) + env(safe-area-inset-top));
-    padding-top: var(--bleed);
+    padding-top: calc(var(--bleed) + env(safe-area-inset-top));
+    padding-right: env(safe-area-inset-right);
+    padding-left: env(safe-area-inset-left);
 
     &-content {
       display: grid;
@@ -27,8 +29,7 @@
 
       box-sizing: border-box;
       margin: 0 auto;
-      /* stylelint-disable-next-line @stylistic/max-line-length */
-      padding: calc(0.75rem + env(safe-area-inset-top)) calc(var(--page-padding) + env(safe-area-inset-right)) calc(0.75rem - var(--border-width)) calc(var(--page-padding) + env(safe-area-inset-left));
+      padding: 0.75rem var(--page-padding) calc(0.75rem - var(--border-width));
 
       &[data-layout="mobile"] {
         grid-template-areas: "navigation logo secondary";

From 036dde7e99bd4af7348c15a36839626185799377 Mon Sep 17 00:00:00 2001
From: Ian Paschal <git@ianpaschal.com>
Date: Fri, 12 Jun 2026 23:32:25 +0200
Subject: [PATCH 4/8] Fix <Select/> positioning

---
 src/components/Select/Select.hooks.ts    |  89 +++++++++++
 src/components/Select/Select.module.scss |   2 +
 src/components/Select/Select.tsx         | 189 ++++++++++++-----------
 3 files changed, 188 insertions(+), 92 deletions(-)
 create mode 100644 src/components/Select/Select.hooks.ts

diff --git a/src/components/Select/Select.hooks.ts b/src/components/Select/Select.hooks.ts
new file mode 100644
index 0000000..44c9247
--- /dev/null
+++ b/src/components/Select/Select.hooks.ts
@@ -0,0 +1,89 @@
+import { useSyncExternalStore } from 'react';
+
+export type SafeAreaInsets = {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+};
+
+/**
+ * `env(safe-area-inset-*)` is a CSS-only value. There's no JS API that exposes
+ * it directly (e.g. it isn't reflected on `visualViewport` or any geometry
+ * API). The standard workaround is to apply it to an element's style and read
+ * back the resolved value via `getComputedStyle`.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/CSS/env
+ */
+const measureSafeAreas = (): SafeAreaInsets => {
+  const probe = document.createElement('div');
+  probe.style.position = 'fixed';
+  probe.style.top = 'env(safe-area-inset-top, 0px)';
+  probe.style.right = 'env(safe-area-inset-right, 0px)';
+  probe.style.bottom = 'env(safe-area-inset-bottom, 0px)';
+  probe.style.left = 'env(safe-area-inset-left, 0px)';
+  probe.style.visibility = 'hidden';
+  probe.style.pointerEvents = 'none';
+  document.body.appendChild(probe);
+
+  const computed = getComputedStyle(probe);
+  const insets = {
+    top: parseFloat(computed.top) || 0,
+    right: parseFloat(computed.right) || 0,
+    bottom: parseFloat(computed.bottom) || 0,
+    left: parseFloat(computed.left) || 0,
+  };
+
+  document.body.removeChild(probe);
+  return insets;
+};
+
+/* Module-level external store: shared across every `useSafeCollisionPadding`
+ * instance so that pages with many selects only measure once and register a
+ * single `resize` listener. */
+let cachedSafeAreas: SafeAreaInsets = { top: 0, right: 0, bottom: 0, left: 0 };
+let initialized = false;
+const listeners = new Set<() => void>();
+
+/**
+ * `useSyncExternalStore` subscribe function. Lazily performs the first
+ * measurement and sets up the shared `resize` listener on the first subscriber,
+ * per the recommended pattern for "Subscribing to an external store":
+ * https://react.dev/reference/react/useSyncExternalStore#subscribing-to-an-external-store
+ */
+const subscribe = (listener: () => void): (() => void) => {
+  if (!initialized) {
+    initialized = true;
+    cachedSafeAreas = measureSafeAreas();
+    window.addEventListener('resize', () => {
+      cachedSafeAreas = measureSafeAreas();
+      listeners.forEach((l) => l());
+    });
+  }
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+
+/* Must return a cached/referentially-stable value when nothing has changed,
+ * otherwise `useSyncExternalStore` re-renders subscribers on every call. See:
+ * https://react.dev/reference/react/useSyncExternalStore#im-getting-an-error-the-result-of-getsnapshot-should-be-cached
+ */
+const getSnapshot = (): SafeAreaInsets => cachedSafeAreas;
+
+/**
+ * Returns a `collisionPadding`-shaped object (Base UI / Floating UI
+ * `SideObject`) that adds the device's safe-area insets to a flat padding
+ * value, so floating elements (e.g. `Select` popups) avoid notches, status bars
+ * and home indicators on Capacitor's `viewport-fit=cover`.
+ *
+ * See: https://floating-ui.com/docs/detectOverflow#padding
+ */
+export const useSafeCollisionPadding = (padding: number = 0): SafeAreaInsets => {
+  const safeAreas = useSyncExternalStore(subscribe, getSnapshot);
+  return {
+    top: padding + safeAreas.top,
+    right: padding + safeAreas.right,
+    bottom: padding + safeAreas.bottom,
+    left: padding + safeAreas.left,
+  };
+};
diff --git a/src/components/Select/Select.module.scss b/src/components/Select/Select.module.scss
index 8125175..204687a 100644
--- a/src/components/Select/Select.module.scss
+++ b/src/components/Select/Select.module.scss
@@ -50,6 +50,8 @@
 
       box-sizing: border-box;
       min-width: var(--anchor-width);
+      max-width: var(--available-width);
+      max-height: var(--available-height);
 
       @media (prefers-reduced-motion: no-preference) {
         transition: transform 150ms, opacity 150ms;
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 13c293b..5be7fdf 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -16,6 +16,7 @@ import {
 
 import { ElementSize } from '../../types';
 import { getStyleClassNames, sx } from '../../utils/getStyleClassNames';
+import { useSafeCollisionPadding } from './Select.hooks';
 
 import styles from './Select.module.scss';
 
@@ -65,102 +66,106 @@ export const Select = forwardRef<SelectRef, SelectProps>(({
   type: _type,
   value,
   ...triggerProps
-}, ref): JSX.Element => (
-  <BaseSelect.Root<SelectValue | null>
-    autoComplete={autoComplete}
-    defaultValue={defaultValue}
-    disabled={disabled}
-    form={form}
-    name={name}
-    readOnly={readOnly}
-    required={required}
-    value={value}
-    onValueChange={onChange}
-  >
-    <BaseSelect.Trigger
-      ref={ref}
-      id={id}
-      {...(triggerProps as ButtonHTMLAttributes<HTMLButtonElement>)}
-      className={clsx(styles.selectTrigger, getStyleClassNames({
-        corners: 'normal',
-        intent: 'secondary',
-        variant: 'ghost',
-        border: true,
-        size,
-      }), className)}
+}, ref): JSX.Element => {
+  const collisionPadding = useSafeCollisionPadding(8);
+
+  return (
+    <BaseSelect.Root<SelectValue | null>
+      autoComplete={autoComplete}
+      defaultValue={defaultValue}
+      disabled={disabled}
+      form={form}
+      name={name}
+      readOnly={readOnly}
+      required={required}
+      value={value}
+      onValueChange={onChange}
     >
-      <BaseSelect.Value>
-        {(val: SelectValue | null) => {
+      <BaseSelect.Trigger
+        ref={ref}
+        id={id}
+        {...(triggerProps as ButtonHTMLAttributes<HTMLButtonElement>)}
+        className={clsx(styles.selectTrigger, getStyleClassNames({
+          corners: 'normal',
+          intent: 'secondary',
+          variant: 'ghost',
+          border: true,
+          size,
+        }), className)}
+      >
+        <BaseSelect.Value>
+          {(val: SelectValue | null) => {
 
-          /* BaseUI may pass undefined instead of null when the selected value is null, so use loose
+            /* BaseUI may pass undefined instead of null when the selected value is null, so use loose
            * equality for null-valued options to match both.
            */
-          const opt = options.find((o) => (o.value === null ? val == null : o.value === val)) ?? null;
-          if (opt === null) {
-            return placeholder;
-          }
-          return opt.label ?? String(opt.value);
-        }}
-      </BaseSelect.Value>
-      <BaseSelect.Icon className={styles.selectTriggerIcon}>
-        <ChevronsUpDown />
-      </BaseSelect.Icon>
-    </BaseSelect.Trigger>
-    <BaseSelect.Portal>
-      <BaseSelect.Positioner
-        className={styles.positioner}
-        sideOffset={8}
-        collisionPadding={8}
-        alignItemWithTrigger={false} // See: https://github.com/mui/base-ui/issues/1922
-      >
-        <BaseSelect.Popup
-          className={sx({
-            border: true,
-            corners: 'normal',
-            elevation: 5,
-            intent: 'secondary',
-            variant: 'surface',
-          }, styles.selectPopup)}
-          tabIndex={-1}
+            const opt = options.find((o) => (o.value === null ? val == null : o.value === val)) ?? null;
+            if (opt === null) {
+              return placeholder;
+            }
+            return opt.label ?? String(opt.value);
+          }}
+        </BaseSelect.Value>
+        <BaseSelect.Icon className={styles.selectTriggerIcon}>
+          <ChevronsUpDown />
+        </BaseSelect.Icon>
+      </BaseSelect.Trigger>
+      <BaseSelect.Portal>
+        <BaseSelect.Positioner
+          className={styles.positioner}
+          sideOffset={8}
+          collisionPadding={collisionPadding}
+          alignItemWithTrigger={false} // See: https://github.com/mui/base-ui/issues/1922
         >
-          <BaseSelect.ScrollUpArrow className={clsx(...getStyleClassNames({
-            border: 'bottom',
-            variant: 'surface',
-          }), styles.selectScrollArrow)}>
-            <ChevronUp />
-          </BaseSelect.ScrollUpArrow>
-          <BaseSelect.List className={styles.selectList}>
-            {options.map((option, i) => (
-              <BaseSelect.Item
-                className={clsx(styles.selectItem, ...getStyleClassNames({
-                  intent: 'secondary',
-                  variant: 'ghost',
-                  corners: 'normal',
-                  size,
-                }))}
-                key={`${i}-${option.value}`}
-                value={option.value}
-                disabled={option.disabled}
-              >
-                <BaseSelect.ItemIndicator className={styles.selectItemIndicator}>
-                  <Check />
-                </BaseSelect.ItemIndicator>
-                <BaseSelect.ItemText className={styles.selectItemContent}>
-                  {option.label}
-                </BaseSelect.ItemText>
-              </BaseSelect.Item>
-            ))}
-          </BaseSelect.List>
-          <BaseSelect.ScrollDownArrow className={clsx(...getStyleClassNames({
-            border: 'top',
-            variant: 'surface',
-          }), styles.selectScrollArrow)}>
-            <ChevronDown />
-          </BaseSelect.ScrollDownArrow>
-        </BaseSelect.Popup>
-      </BaseSelect.Positioner>
-    </BaseSelect.Portal>
-  </BaseSelect.Root >
-));
+          <BaseSelect.Popup
+            className={sx({
+              border: true,
+              corners: 'normal',
+              elevation: 5,
+              intent: 'secondary',
+              variant: 'surface',
+            }, styles.selectPopup)}
+            tabIndex={-1}
+          >
+            <BaseSelect.ScrollUpArrow className={clsx(...getStyleClassNames({
+              border: 'bottom',
+              variant: 'surface',
+            }), styles.selectScrollArrow)}>
+              <ChevronUp />
+            </BaseSelect.ScrollUpArrow>
+            <BaseSelect.List className={styles.selectList}>
+              {options.map((option, i) => (
+                <BaseSelect.Item
+                  className={clsx(styles.selectItem, ...getStyleClassNames({
+                    intent: 'secondary',
+                    variant: 'ghost',
+                    corners: 'normal',
+                    size,
+                  }))}
+                  key={`${i}-${option.value}`}
+                  value={option.value}
+                  disabled={option.disabled}
+                >
+                  <BaseSelect.ItemIndicator className={styles.selectItemIndicator}>
+                    <Check />
+                  </BaseSelect.ItemIndicator>
+                  <BaseSelect.ItemText className={styles.selectItemContent}>
+                    {option.label}
+                  </BaseSelect.ItemText>
+                </BaseSelect.Item>
+              ))}
+            </BaseSelect.List>
+            <BaseSelect.ScrollDownArrow className={clsx(...getStyleClassNames({
+              border: 'top',
+              variant: 'surface',
+            }), styles.selectScrollArrow)}>
+              <ChevronDown />
+            </BaseSelect.ScrollDownArrow>
+          </BaseSelect.Popup>
+        </BaseSelect.Positioner>
+      </BaseSelect.Portal>
+    </BaseSelect.Root >
+  );
+});
 
 Select.displayName = 'Select';

From cb2efcaabc1544033e989373fb632bca3889d6f6 Mon Sep 17 00:00:00 2001
From: Ian Paschal <git@ianpaschal.com>
Date: Sat, 13 Jun 2026 00:01:47 +0200
Subject: [PATCH 5/8] PR Feedback

---
 src/components/Select/Select.hooks.ts    | 27 ++++++++++++++++++------
 src/components/Select/Select.module.scss |  2 +-
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/Select/Select.hooks.ts b/src/components/Select/Select.hooks.ts
index 44c9247..d7d6510 100644
--- a/src/components/Select/Select.hooks.ts
+++ b/src/components/Select/Select.hooks.ts
@@ -51,17 +51,25 @@ const listeners = new Set<() => void>();
  * per the recommended pattern for "Subscribing to an external store":
  * https://react.dev/reference/react/useSyncExternalStore#subscribing-to-an-external-store
  */
+const handleResize = (): void => {
+  cachedSafeAreas = measureSafeAreas();
+  listeners.forEach((l) => l());
+};
+
 const subscribe = (listener: () => void): (() => void) => {
   if (!initialized) {
     initialized = true;
     cachedSafeAreas = measureSafeAreas();
-    window.addEventListener('resize', () => {
-      cachedSafeAreas = measureSafeAreas();
-      listeners.forEach((l) => l());
-    });
+    window.addEventListener('resize', handleResize);
   }
   listeners.add(listener);
-  return () => listeners.delete(listener);
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) {
+      window.removeEventListener('resize', handleResize);
+      initialized = false;
+    }
+  };
 };
 
 /* Must return a cached/referentially-stable value when nothing has changed,
@@ -70,6 +78,13 @@ const subscribe = (listener: () => void): (() => void) => {
  */
 const getSnapshot = (): SafeAreaInsets => cachedSafeAreas;
 
+/*
+ * SSR fallback: `env(safe-area-inset-*)` is meaningless on the server, and `measureSafeAreas`
+ * relies on `document`, which isn't available there. See:
+ * https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering
+ */
+const getServerSnapshot = (): SafeAreaInsets => ({ top: 0, right: 0, bottom: 0, left: 0 });
+
 /**
  * Returns a `collisionPadding`-shaped object (Base UI / Floating UI
  * `SideObject`) that adds the device's safe-area insets to a flat padding
@@ -79,7 +94,7 @@ const getSnapshot = (): SafeAreaInsets => cachedSafeAreas;
  * See: https://floating-ui.com/docs/detectOverflow#padding
  */
 export const useSafeCollisionPadding = (padding: number = 0): SafeAreaInsets => {
-  const safeAreas = useSyncExternalStore(subscribe, getSnapshot);
+  const safeAreas = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   return {
     top: padding + safeAreas.top,
     right: padding + safeAreas.right,
diff --git a/src/components/Select/Select.module.scss b/src/components/Select/Select.module.scss
index 204687a..d3f418c 100644
--- a/src/components/Select/Select.module.scss
+++ b/src/components/Select/Select.module.scss
@@ -49,7 +49,7 @@
       overflow: hidden;
 
       box-sizing: border-box;
-      min-width: var(--anchor-width);
+      min-width: min(var(--anchor-width), var(--available-width));
       max-width: var(--available-width);
       max-height: var(--available-height);
 

From 20dafd2a83141bc24a21c23e2f710754d5573610 Mon Sep 17 00:00:00 2001
From: Ian Paschal <git@ianpaschal.com>
Date: Sat, 13 Jun 2026 14:45:33 +0200
Subject: [PATCH 6/8] Further mobile style improvements

---
 .../AppNavigation/AppNavigation.module.scss   |  8 ++++---
 .../components/TabsList/TabsList.hooks.tsx    | 21 +++++++++++++++++
 .../components/TabsList/TabsList.module.scss  | 23 +------------------
 .../Tabs/components/TabsList/TabsList.tsx     | 11 ++++-----
 4 files changed, 32 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Tabs/components/TabsList/TabsList.hooks.tsx

diff --git a/src/components/AppNavigation/AppNavigation.module.scss b/src/components/AppNavigation/AppNavigation.module.scss
index 5be57f6..07345bb 100644
--- a/src/components/AppNavigation/AppNavigation.module.scss
+++ b/src/components/AppNavigation/AppNavigation.module.scss
@@ -6,6 +6,7 @@
   .app-navigation {
     --bleed: 100dvh;
     --indicator-thickness: 0.25rem;
+    --vertical-padding: 0.75rem;
 
     @include shadows.surface;
 
@@ -19,8 +20,6 @@
     width: 100vw;
     height: calc(var(--app-bar-height) + var(--bleed) + env(safe-area-inset-top));
     padding-top: calc(var(--bleed) + env(safe-area-inset-top));
-    padding-right: env(safe-area-inset-right);
-    padding-left: env(safe-area-inset-left);
 
     &-content {
       display: grid;
@@ -29,7 +28,10 @@
 
       box-sizing: border-box;
       margin: 0 auto;
-      padding: 0.75rem var(--page-padding) calc(0.75rem - var(--border-width));
+      padding-top: calc(var(--vertical-padding) - var(--border-width));
+      padding-right: calc(var(--page-padding) + env(safe-area-inset-right));
+      padding-bottom: var(--vertical-padding);
+      padding-left: calc(var(--page-padding) + env(safe-area-inset-left));
 
       &[data-layout="mobile"] {
         grid-template-areas: "navigation logo secondary";
diff --git a/src/components/Tabs/components/TabsList/TabsList.hooks.tsx b/src/components/Tabs/components/TabsList/TabsList.hooks.tsx
new file mode 100644
index 0000000..7534e72
--- /dev/null
+++ b/src/components/Tabs/components/TabsList/TabsList.hooks.tsx
@@ -0,0 +1,21 @@
+import {
+  ReactElement,
+  ReactNode,
+  useCallback,
+} from 'react';
+
+import { FooterBar } from '../../../FooterBar';
+
+export const useAsFooter = (
+  asFooter: boolean,
+  maxWidth: number | string | undefined,
+) => useCallback((children: ReactNode): ReactElement => {
+  if (asFooter) {
+    return (
+      <FooterBar maxWidth={maxWidth}>
+        {children}
+      </FooterBar>
+    );
+  }
+  return <>{children} </>;
+}, [asFooter, maxWidth]);
diff --git a/src/components/Tabs/components/TabsList/TabsList.module.scss b/src/components/Tabs/components/TabsList/TabsList.module.scss
index bb508d9..9d7e8a9 100644
--- a/src/components/Tabs/components/TabsList/TabsList.module.scss
+++ b/src/components/Tabs/components/TabsList/TabsList.module.scss
@@ -25,33 +25,12 @@
       &[data-as-footer] {
         --spacing: 0.5rem;
 
-        position: fixed;
-        right: 0;
-        bottom: 0;
-        left: 0;
-
         width: 100%;
-        height: calc(var(--app-bar-height) + env(safe-area-inset-bottom));
-        min-height: calc(var(--app-bar-height) + env(safe-area-inset-bottom));
-        padding: calc(var(--spacing) - var(--border-width)) 0 calc(var(--spacing) + env(safe-area-inset-bottom));
-
+        padding: 0;
         background-color: unset;
       }
     }
 
-    &[data-as-footer] {
-      height: 100%;
-      max-height: 100%;
-      margin: 0 auto;
-      /* stylelint-disable-next-line @stylistic/max-line-length */
-      padding: 0 calc(var(--page-padding) + env(safe-area-inset-right)) 0 calc(var(--page-padding) + env(safe-area-inset-left));
-
-      > button {
-        height: 100%;
-        max-height: none;
-      }
-    }
-
     &-indicator {
       position: absolute;
       top: 0;
diff --git a/src/components/Tabs/components/TabsList/TabsList.tsx b/src/components/Tabs/components/TabsList/TabsList.tsx
index 96a6951..1ae4bc2 100644
--- a/src/components/Tabs/components/TabsList/TabsList.tsx
+++ b/src/components/Tabs/components/TabsList/TabsList.tsx
@@ -10,6 +10,7 @@ import { ElementSize } from '../../../../types';
 import { sx } from '../../../../utils';
 import { useTabsContext } from '../../Tabs.hooks';
 import { TabTrigger } from '../TabTrigger';
+import { useAsFooter } from './TabsList.hooks';
 
 import styles from './TabsList.module.scss';
 
@@ -29,12 +30,10 @@ export const TabsList = forwardRef<ElementRef<typeof BaseTabs.List>, TabsListPro
   ...props
 }, ref): ReactElement => {
   const { tabs } = useTabsContext();
-  return (
+  const wrapFooter = useAsFooter(asFooter, maxWidth);
+  return wrapFooter(
     <div
       className={clsx(sx({
-        variant: asFooter ? 'surface' : undefined,
-        border: asFooter ? 'top' : undefined,
-        elevation: asFooter ? 5 : undefined,
         corners: asFooter ? undefined : 'normal',
         size: asFooter ? 'large' : size,
       }), styles.tabsListWrapper, className)}
@@ -45,7 +44,7 @@ export const TabsList = forwardRef<ElementRef<typeof BaseTabs.List>, TabsListPro
         className={styles.tabsList}
         data-icon-only={iconOnly || undefined}
         data-as-footer={asFooter || undefined}
-        style={maxWidth ? { maxWidth } : undefined}
+        style={!asFooter && maxWidth ? { maxWidth } : undefined}
         {...props}
       >
         {tabs.map(({ content: _, ...tab }) => (
@@ -62,7 +61,7 @@ export const TabsList = forwardRef<ElementRef<typeof BaseTabs.List>, TabsListPro
           elevation: asFooter ? undefined : 1,
         }), styles.tabsListIndicator)} />
       </BaseTabs.List>
-    </div>
+    </div>,
   );
 });
 

From b0510b6993641c8731529aba44f6e613ff870d7c Mon Sep 17 00:00:00 2001
From: Ian Paschal <git@ianpaschal.com>
Date: Sat, 13 Jun 2026 14:45:46 +0200
Subject: [PATCH 7/8] Add <FooterBar/> and <FooterBarActions/>

---
 .../FooterBar/FooterBar.module.scss           |  41 ++++++
 .../FooterBar/FooterBar.module.scss.d.ts      |   2 +
 .../FooterBar/FooterBar.stories.tsx           | 120 ++++++++++++++++++
 src/components/FooterBar/FooterBar.tsx        |  56 ++++++++
 .../FooterBar/FooterBarActions.module.scss    |  15 +++
 .../FooterBarActions.module.scss.d.ts         |   2 +
 src/components/FooterBar/FooterBarActions.tsx |  38 ++++++
 src/components/FooterBar/index.ts             |   2 +
 src/index.ts                                  |   1 +
 src/style/variables.scss                      |  14 ++
 10 files changed, 291 insertions(+)
 create mode 100644 src/components/FooterBar/FooterBar.module.scss
 create mode 100644 src/components/FooterBar/FooterBar.module.scss.d.ts
 create mode 100644 src/components/FooterBar/FooterBar.stories.tsx
 create mode 100644 src/components/FooterBar/FooterBar.tsx
 create mode 100644 src/components/FooterBar/FooterBarActions.module.scss
 create mode 100644 src/components/FooterBar/FooterBarActions.module.scss.d.ts
 create mode 100644 src/components/FooterBar/FooterBarActions.tsx
 create mode 100644 src/components/FooterBar/index.ts

diff --git a/src/components/FooterBar/FooterBar.module.scss b/src/components/FooterBar/FooterBar.module.scss
new file mode 100644
index 0000000..5e176dd
--- /dev/null
+++ b/src/components/FooterBar/FooterBar.module.scss
@@ -0,0 +1,41 @@
+@use "../../style/layers";
+@use "../../style/flex";
+@use "../../style/shadows";
+
+@layer components {
+  .footer-bar {
+    --bleed: 100dvh;
+    --vertical-padding: 1rem;
+
+    @include shadows.surface;
+
+    position: fixed;
+    bottom: calc(-1 * var(--bleed));
+    left: 0;
+
+    overflow: hidden;
+
+    box-sizing: border-box;
+    width: 100vw;
+    padding-bottom: calc(var(--bleed) + env(safe-area-inset-bottom));
+
+    &-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));
+      padding-right: calc(var(--page-padding) + env(safe-area-inset-right));
+      padding-bottom: var(--vertical-padding);
+      padding-left: calc(var(--page-padding) + env(safe-area-inset-left));
+
+      &[data-mobile] {
+        --mobile-offset: 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));
+      }
+    }
+  }
+}
diff --git a/src/components/FooterBar/FooterBar.module.scss.d.ts b/src/components/FooterBar/FooterBar.module.scss.d.ts
new file mode 100644
index 0000000..efd548b
--- /dev/null
+++ b/src/components/FooterBar/FooterBar.module.scss.d.ts
@@ -0,0 +1,2 @@
+export declare const footerBar: string;
+export declare const footerBarContent: string;
diff --git a/src/components/FooterBar/FooterBar.stories.tsx b/src/components/FooterBar/FooterBar.stories.tsx
new file mode 100644
index 0000000..bbd787e
--- /dev/null
+++ b/src/components/FooterBar/FooterBar.stories.tsx
@@ -0,0 +1,120 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  ArrowLeft,
+  Save,
+  X,
+} from 'lucide-react';
+
+import { ButtonProps } from '../Button';
+import { Spinner } from '../Spinner';
+import { FooterBar, FooterBarProps } from './FooterBar';
+import { FooterBarActions } from './FooterBarActions';
+
+interface StoryArgs extends FooterBarProps {
+  mobile?: boolean;
+}
+
+const meta: Meta<StoryArgs> = {
+  title: 'Components/FooterBar',
+  component: FooterBar,
+  parameters: {
+    layout: 'centered',
+    bodyBackground: 'var(--color-page-bg)',
+    docs: {
+      story: { inline: false, height: '12rem' },
+    },
+  },
+  argTypes: {
+    maxWidth: {
+      control: 'number',
+      description: 'Constrains the inner content width.',
+    },
+    mobile: {
+      control: 'boolean',
+      description: 'Switches between desktop and mobile layouts.',
+    },
+    portalTarget: {
+      table: { disable: true },
+    },
+    children: {
+      table: { disable: true },
+    },
+  },
+  decorators: [
+    (Story, { args }) => {
+      const [portalTarget, setPortalTarget] = useState<Element | null>(null);
+      return (
+        <div ref={setPortalTarget} style={{ width: '100%', height: '100%' }}>
+          {portalTarget && <Story args={{ ...args, portalTarget }} />}
+        </div>
+      );
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const actions: {
+  left: ButtonProps[];
+  right: ButtonProps[];
+} = {
+  left: [{ icon: <ArrowLeft />, text: 'Cancel', variant: 'shaded' }],
+  right: [{ icon: <Save />, text: 'Save', variant: 'solid', intent: 'primary' }],
+};
+
+export const Default: Story = {
+  args: {
+    mobile: false,
+  },
+  render: (args) => (
+    <FooterBar {...args}>
+      <FooterBarActions
+        mobile={args.mobile}
+        {...actions}
+      />
+    </FooterBar>
+  ),
+};
+
+export const MaxWidth: Story = {
+  args: {
+    mobile: false,
+    maxWidth: 256,
+  },
+  render: (args) => (
+    <FooterBar {...args}>
+      <FooterBarActions
+        mobile={args.mobile}
+        left={[
+          { icon: <X />, text: 'Cancel', variant: 'ghost' },
+        ]}
+        right={[
+          { icon: <Save />, text: 'Save', variant: 'solid', intent: 'primary' },
+        ]}
+      />
+    </FooterBar>
+  ),
+};
+
+export const CustomElement: Story = {
+  args: {
+    mobile: false,
+  },
+  render: (args) => (
+    <FooterBar {...args}>
+      <div style={{
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'start',
+        gap: '0.75rem',
+        flex: 1,
+      }}>
+        <Spinner size={20} />
+        <span>Syncing changes…</span>
+      </div>
+    </FooterBar>
+  ),
+};
diff --git a/src/components/FooterBar/FooterBar.tsx b/src/components/FooterBar/FooterBar.tsx
new file mode 100644
index 0000000..afec237
--- /dev/null
+++ b/src/components/FooterBar/FooterBar.tsx
@@ -0,0 +1,56 @@
+import {
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useRef,
+} from 'react';
+import { createPortal } from 'react-dom';
+import clsx from 'clsx';
+
+import { getStyleClassNames } from '../../utils/getStyleClassNames';
+
+import styles from './FooterBar.module.scss';
+
+export interface FooterBarProps {
+  children?: ReactNode;
+  className?: string;
+  maxWidth?: number | string;
+  mobile?: boolean;
+  portalTarget?: Element;
+}
+
+export const FooterBar = ({
+  children,
+  className,
+  maxWidth = '100vw',
+  mobile = false,
+  portalTarget = document.body,
+}: FooterBarProps): ReactElement => {
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const content = contentRef.current;
+    if (!content) {
+      return;
+    }
+    const observer = new ResizeObserver(([entry]) => {
+      document.documentElement.style.setProperty('--footer-bar-height', `${entry.contentRect.height}px`);
+    });
+    observer.observe(content);
+    return () => observer.disconnect();
+  }, []);
+
+  return createPortal((
+    <div
+      className={clsx(styles.footerBar, ...getStyleClassNames({
+        variant: 'surface',
+        border: 'top',
+      }), className)}
+
+    >
+      <div ref={contentRef} className={styles.footerBarContent} style={{ maxWidth }} data-mobile={mobile || undefined}>
+        {children}
+      </div>
+    </div>
+  ), portalTarget);
+};
diff --git a/src/components/FooterBar/FooterBarActions.module.scss b/src/components/FooterBar/FooterBarActions.module.scss
new file mode 100644
index 0000000..e2a6f2e
--- /dev/null
+++ b/src/components/FooterBar/FooterBarActions.module.scss
@@ -0,0 +1,15 @@
+@use "../../style/layers";
+@use "../../style/flex";
+
+@layer components {
+  .footer-bar-actions {
+    @include flex.row($gap: 1.5rem);
+
+    flex: 1;
+    justify-content: space-between;
+
+    &-group {
+      @include flex.row($gap: 0.5rem, $yAlign: center);
+    }
+  }
+}
diff --git a/src/components/FooterBar/FooterBarActions.module.scss.d.ts b/src/components/FooterBar/FooterBarActions.module.scss.d.ts
new file mode 100644
index 0000000..a59688c
--- /dev/null
+++ b/src/components/FooterBar/FooterBarActions.module.scss.d.ts
@@ -0,0 +1,2 @@
+export declare const footerBarActions: string;
+export declare const footerBarActionsGroup: string;
diff --git a/src/components/FooterBar/FooterBarActions.tsx b/src/components/FooterBar/FooterBarActions.tsx
new file mode 100644
index 0000000..31ed6e0
--- /dev/null
+++ b/src/components/FooterBar/FooterBarActions.tsx
@@ -0,0 +1,38 @@
+import { ReactElement } from 'react';
+
+import { Button, ButtonProps } from '../Button';
+
+import styles from './FooterBarActions.module.scss';
+
+export interface FooterBarActionsProps {
+  left?: ButtonProps[];
+  mobile?: boolean;
+  right?: ButtonProps[];
+}
+
+export const FooterBarActions = ({
+  left,
+  mobile = false,
+  right,
+}: FooterBarActionsProps): ReactElement => {
+  const renderAction = (action: ButtonProps, index: number) => (
+    <Button
+      {...action}
+      key={index}
+      rounded={mobile || action.rounded}
+      size={mobile ? 'large' : action.size}
+      text={mobile ? undefined : action.text}
+    />
+  );
+
+  return (
+    <div className={styles.footerBarActions} data-mobile={mobile || undefined}>
+      <div className={styles.footerBarActionsGroup}>
+        {left?.map(renderAction)}
+      </div>
+      <div className={styles.footerBarActionsGroup}>
+        {right?.map(renderAction)}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/FooterBar/index.ts b/src/components/FooterBar/index.ts
new file mode 100644
index 0000000..06a61df
--- /dev/null
+++ b/src/components/FooterBar/index.ts
@@ -0,0 +1,2 @@
+export * from './FooterBar';
+export * from './FooterBarActions';
diff --git a/src/index.ts b/src/index.ts
index 4a9c446..08bbbd8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,6 +10,7 @@ export * from './components/CircularProgress';
 export * from './components/CombatCommandLogo';
 export * from './components/DialogManager';
 export * from './components/Drawer';
+export * from './components/FooterBar';
 export * from './components/Hero';
 export * from './components/ImageViewer';
 export * from './components/InputDateTime';
diff --git a/src/style/variables.scss b/src/style/variables.scss
index d17241f..b098716 100644
--- a/src/style/variables.scss
+++ b/src/style/variables.scss
@@ -5,6 +5,17 @@
 @import "@fontsource/figtree/700.css";
 
 :root {
+  --color-brand: hsl(5deg 90% 60%);
+  --color-gray-100: hsl(220deg 22.5% 95%);
+  --color-gray-200: hsl(220deg 22.5% 85%);
+  --color-gray-300: hsl(220deg 22.5% 75%);
+  --color-gray-400: hsl(220deg 22.5% 65%);
+  --color-gray-500: hsl(220deg 22.5% 55%);
+  --color-gray-600: hsl(220deg 22.5% 45%);
+  --color-gray-700: hsl(220deg 22.5% 35%);
+  --color-gray-800: hsl(220deg 22.5% 25%);
+  --color-gray-900: hsl(220deg 22.5% 15%);
+
   // -----------------------------------------------------------------------------------------------
   // Theme default variables (can be overwritten by <ThemeProvider/>).
   // Re-generate with: `npm run gen:theme-defaults`
@@ -232,6 +243,9 @@
   --app-bar-height: 4rem;
   --app-bar-logo-size: 2.5rem;
 
+  // Footer Bar Sizes
+  --footer-bar-height: 4rem;
+
   // Spacing
   --modal-padding: 1rem;
   --page-padding: 0.5rem;

From 1ef83eb040c884c5f73fa9d6c8ea06c8b4c7aa21 Mon Sep 17 00:00:00 2001
From: Ian Paschal <git@ianpaschal.com>
Date: Sat, 13 Jun 2026 15:51:12 +0200
Subject: [PATCH 8/8] PR Feedback

---
 .../MobileNavigation/MobileNavigation.module.scss           | 6 +++++-
 src/components/FooterBar/FooterBar.tsx                      | 5 ++++-
 src/components/Tabs/components/TabsList/TabsList.hooks.tsx  | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/AppNavigation/components/MobileNavigation/MobileNavigation.module.scss b/src/components/AppNavigation/components/MobileNavigation/MobileNavigation.module.scss
index 87639f6..5f89bea 100644
--- a/src/components/AppNavigation/components/MobileNavigation/MobileNavigation.module.scss
+++ b/src/components/AppNavigation/components/MobileNavigation/MobileNavigation.module.scss
@@ -66,7 +66,11 @@
       display: flex;
       flex-direction: column;
       gap: 1rem;
-      padding: 1rem var(--padding-x) 1rem calc(var(--padding-x) + env(safe-area-inset-left));
+
+      padding-top: 1rem;
+      padding-right: var(--padding-x);
+      padding-bottom: calc(1rem + env(safe-area-inset-bottom));
+      padding-left: calc(var(--padding-x) + env(safe-area-inset-left));
     }
   }
 }
diff --git a/src/components/FooterBar/FooterBar.tsx b/src/components/FooterBar/FooterBar.tsx
index afec237..a315673 100644
--- a/src/components/FooterBar/FooterBar.tsx
+++ b/src/components/FooterBar/FooterBar.tsx
@@ -37,7 +37,10 @@ export const FooterBar = ({
       document.documentElement.style.setProperty('--footer-bar-height', `${entry.contentRect.height}px`);
     });
     observer.observe(content);
-    return () => observer.disconnect();
+    return () => {
+      observer.disconnect();
+      document.documentElement.style.removeProperty('--footer-bar-height');
+    };
   }, []);
 
   return createPortal((
diff --git a/src/components/Tabs/components/TabsList/TabsList.hooks.tsx b/src/components/Tabs/components/TabsList/TabsList.hooks.tsx
index 7534e72..06727e0 100644
--- a/src/components/Tabs/components/TabsList/TabsList.hooks.tsx
+++ b/src/components/Tabs/components/TabsList/TabsList.hooks.tsx
@@ -17,5 +17,5 @@ export const useAsFooter = (
       </FooterBar>
     );
   }
-  return <>{children} </>;
+  return <>{children}</>;
 }, [asFooter, maxWidth]);