From 35ed712d46bedc18e13098821c4a21dd8977c9ee Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sun, 26 Apr 2026 12:02:25 +0200
Subject: [PATCH] Fix demo banner overlapping bottom tab bar on mobile

The demo welcome modal extended below the mobile bottom tab bar,
hiding the dismiss button so visitors couldn't close it.

- Use dvh so mobile URL bar is accounted for correctly
- Reserve ~80px of bottom padding for the tab bar
- Make the footer sticky so the dismiss button stays visible
  while scrolling through the modal content
- Bump z-index to ensure the overlay sits above the tab bar
---
 client/src/components/Layout/DemoBanner.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Layout/DemoBanner.tsx b/client/src/components/Layout/DemoBanner.tsx
index ba77cd40..c4068017 100644
--- a/client/src/components/Layout/DemoBanner.tsx
+++ b/client/src/components/Layout/DemoBanner.tsx
@@ -266,17 +266,22 @@ export default function DemoBanner(): React.ReactElement | null {
 
   return (
     <div style={{
-      position: 'fixed', inset: 0, zIndex: 9999,
+      position: 'fixed', inset: 0, zIndex: 99999,
       background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)',
       display: 'flex', alignItems: 'center', justifyContent: 'center',
-      padding: 16, overflow: 'auto',
+      paddingTop: 'max(16px, env(safe-area-inset-top))',
+      paddingBottom: 'max(16px, calc(env(safe-area-inset-bottom) + 80px))',
+      paddingLeft: 16, paddingRight: 16,
+      overflow: 'auto',
       fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
     }} onClick={() => setDismissed(true)}>
       <div style={{
-        background: 'white', borderRadius: 20, padding: '28px 24px 20px',
+        background: 'white', borderRadius: 20, padding: '28px 24px 0',
         maxWidth: 480, width: '100%',
         boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
-        maxHeight: '90vh', overflow: 'auto',
+        maxHeight: 'min(90vh, calc(100dvh - 96px))',
+        overflow: 'auto',
+        display: 'flex', flexDirection: 'column',
       }} onClick={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}>
 
         {/* Header */}
@@ -367,8 +372,10 @@ export default function DemoBanner(): React.ReactElement | null {
 
         {/* Footer */}
         <div style={{
-          paddingTop: 14, borderTop: '1px solid #e5e7eb',
+          padding: '14px 0 20px', borderTop: '1px solid #e5e7eb',
           display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+          position: 'sticky', bottom: 0, background: 'white',
+          marginTop: 'auto',
         }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: '#9ca3af' }}>
             <Github size={13} />