fix: respect device safe areas in mobile fullscreen overlays

Author: eleboucher

src/app/components/image-viewer/RoomMediaViewer.tsx

@@ -185,7 +185,13 @@ export function RoomMediaViewer({
   if (!item) return null;
 
   return (
-    <ModalOverlay open requestClose={requestClose} mobile="fullscreen" background="#000">
+    <ModalOverlay
+      open
+      requestClose={requestClose}
+      mobile="fullscreen"
+      background="#000"
+      respectSafeArea={false}
+    >
       <ResolvedRoomMedia
         item={item}
         requestClose={requestClose}

src/app/components/message/content/ImageContent.tsx

@@ -311,6 +311,7 @@ export const ImageContent = as<'div', ImageContentProps>(
             requestClose={() => setViewer(false)}
             mobile="fullscreen"
             background="#000"
+            respectSafeArea={false}
           >
             {isMobile ? (
               viewerContent

src/app/components/modal-overlay/ModalOverlay.test.tsx

@@ -209,6 +209,24 @@ describe('ModalOverlay', () => {
       expect(screen.getByTestId('modal-child')).toBeInTheDocument();
     });
 
+    it('pads the fullscreen wrapper against device safe areas by default', () => {
+      mobile({ mobile: 'fullscreen' });
+
+      const wrapper = screen
+        .getByTestId('modal-child')
+        .closest('div[style*="padding-top"]') as HTMLElement;
+      expect(wrapper.style.paddingTop).toBe(
+        'var(--safe-area-inset-top, env(safe-area-inset-top, 0px))'
+      );
+    });
+
+    it('skips safe-area padding when respectSafeArea is false', () => {
+      mobile({ mobile: 'fullscreen', respectSafeArea: false });
+
+      const wrapper = screen.getByTestId('modal-child').parentElement as HTMLElement;
+      expect(wrapper.style.paddingTop ?? '').toBe('');
+    });
+
     it('wraps children in a Modal on desktop when size is set', () => {
       desktop({ size: '500' });
 

src/app/components/modal-overlay/ModalOverlay.tsx

@@ -12,6 +12,13 @@ import * as messageCss from '$features/room/message/styles.css';
 type FocusTrapOptions = ComponentProps<typeof FocusTrap>['focusTrapOptions'];
 type ModalSize = '300' | '400' | '500';
 
+const safeArea = {
+  top: 'var(--safe-area-inset-top, env(safe-area-inset-top, 0px))',
+  bottom: 'var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))',
+  left: 'var(--safe-area-inset-left, env(safe-area-inset-left, 0px))',
+  right: 'var(--safe-area-inset-right, env(safe-area-inset-right, 0px))',
+};
+
 type ModalOverlayProps = {
   open?: boolean;
   requestClose: () => void;
@@ -30,6 +37,8 @@ type ModalOverlayProps = {
   escapeDeactivates?: FocusTrapOptions['escapeDeactivates'];
   /** Fills the mobile fullscreen wrapper, for content that does not paint its own. */
   background?: string;
+  /** Set false for full-bleed viewers that inset their own controls. */
+  respectSafeArea?: boolean;
   children: ReactNode;
 };
 
@@ -42,6 +51,7 @@ export function ModalOverlay({
   contentRef,
   escapeDeactivates = stopPropagation,
   background,
+  respectSafeArea = true,
   children,
 }: ModalOverlayProps) {
   // Null outside a provider, where desktop is the safe assumption.
@@ -75,6 +85,10 @@ export function ModalOverlay({
               display: 'flex',
               flexDirection: 'column',
               background,
+              paddingTop: respectSafeArea ? safeArea.top : undefined,
+              paddingBottom: respectSafeArea ? safeArea.bottom : undefined,
+              paddingLeft: respectSafeArea ? safeArea.left : undefined,
+              paddingRight: respectSafeArea ? safeArea.right : undefined,
             }}
           >
             {children}