From 2fd253ea9509c187dcb48cf0f17bd76f00a46018 Mon Sep 17 00:00:00 2001 From: Lucas Berger Date: Thu, 18 Jun 2026 18:01:59 -0400 Subject: [PATCH] fix(20): WR-03 IN-03 phone sheet maxHeight scroll and safe-area padding Add maxHeight:90dvh + overflowY:auto to the phone bottom-sheet branch so content overflowing a short viewport (iPhone SE 667px) is scrollable rather than clipped and the Save buttons remain reachable. Add paddingBottom with env(safe-area-inset-bottom) to clear the iOS home indicator / Android gesture navigation bar (IN-03). Co-Authored-By: Claude Sonnet 4.6 --- apps/pwa/src/components/MemberEditorSheet.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/apps/pwa/src/components/MemberEditorSheet.tsx b/apps/pwa/src/components/MemberEditorSheet.tsx index 7e1624b..294555d 100644 --- a/apps/pwa/src/components/MemberEditorSheet.tsx +++ b/apps/pwa/src/components/MemberEditorSheet.tsx @@ -398,10 +398,17 @@ export function MemberEditorSheet({ bottom: 0, left: 0, right: 0, + // WR-03: cap height so content does not spill off screen on short phones + // (iPhone SE 667px with three sections visible). overflowY:'auto' enables + // scroll when content exceeds maxHeight. + maxHeight: '90dvh', + overflowY: 'auto', background: 'var(--color-surface)', borderRadius: '12px 12px 0 0', boxShadow: '0 -4px 24px rgba(0,0,0,0.15)', padding: 'var(--space-6, 24px)', + // IN-03: pad the bottom to clear iOS home indicator / Android gesture bar + paddingBottom: 'calc(var(--space-6, 24px) + env(safe-area-inset-bottom, 0px))', zIndex: 301, fontFamily: 'var(--font-family-base)', }