From e48015798bcb5be32e332263f79daf55a6877e51 Mon Sep 17 00:00:00 2001
From: Pierre Le Fevre <hello@pierrelf.com>
Date: Sat, 14 Mar 2026 18:26:59 +0100
Subject: [PATCH] Fix correct/incorrect banner blocking Continue button on
 mobile

The fixed-position feedback banners had no safe area padding, causing the
Continue button to be obscured by the home indicator on modern phones.
Added viewport-fit=cover and safe-area-inset-bottom padding to both banners.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/index.html                                  | 2 +-
 web/src/components/feedback/CorrectBanner.tsx   | 3 ++-
 web/src/components/feedback/IncorrectBanner.tsx | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/index.html b/web/index.html
index 656e83b..f2594c3 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <meta name="theme-color" content="#131F24" />
     <meta name="description" content="A Duolingo-style app for learning Tagalog" />
     <title>Ayos</title>
diff --git a/web/src/components/feedback/CorrectBanner.tsx b/web/src/components/feedback/CorrectBanner.tsx
index d1de31a..9dc905f 100644
--- a/web/src/components/feedback/CorrectBanner.tsx
+++ b/web/src/components/feedback/CorrectBanner.tsx
@@ -42,7 +42,8 @@ export function CorrectBanner({ onContinue }: CorrectBannerProps) {
         left: 0,
         right: 0,
         bgcolor: '#4CAF50',
-        py: 2,
+        pt: 2,
+        pb: 'calc(16px + env(safe-area-inset-bottom, 0px))',
         px: 3,
         animation: `${slideUp} 0.3s ease-out`,
         zIndex: 1300,
diff --git a/web/src/components/feedback/IncorrectBanner.tsx b/web/src/components/feedback/IncorrectBanner.tsx
index 801f9b7..d1d110e 100644
--- a/web/src/components/feedback/IncorrectBanner.tsx
+++ b/web/src/components/feedback/IncorrectBanner.tsx
@@ -43,7 +43,8 @@ export function IncorrectBanner({ correctAnswer, onContinue }: IncorrectBannerPr
         left: 0,
         right: 0,
         bgcolor: '#FF4B4B',
-        py: 2,
+        pt: 2,
+        pb: 'calc(16px + env(safe-area-inset-bottom, 0px))',
         px: 3,
         animation: `${slideUp} 0.3s ease-out`,
         zIndex: 1300,
-- 
2.51.2