From b4f5568ed974c844477c6f55b83ef3a9ea7c6157 Mon Sep 17 00:00:00 2001
From: Erwan Leboucher <erwanleboucher@gmail.com>
Date: Sat, 1 Aug 2026 20:42:48 +0200
Subject: [PATCH] fix: layer mobile sheets above overlays

---
 src/app/features/room/message/styles.css.ts | 7 +++++--
 src/app/styles/edgeToEdgeInsets.test.ts     | 7 +++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/app/features/room/message/styles.css.ts b/src/app/features/room/message/styles.css.ts
index bb815f2f8e..fa10d7e080 100644
--- a/src/app/features/room/message/styles.css.ts
+++ b/src/app/features/room/message/styles.css.ts
@@ -1,6 +1,9 @@
 import { style } from '@vanilla-extract/css';
 import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';
 
+// Sheets can be opened from an existing Folds overlay, whose maximum layer is Z9999.
+const mobileSheetZIndex = `calc(${config.zIndex.Max} + 1)`;
+
 export const MessageBase = style({
   position: 'relative',
   maxWidth: '100%',
@@ -102,7 +105,7 @@ export const MessageMobileOptionsWrapped = style({
   left: 0,
   right: 0,
   bottom: 0,
-  zIndex: 1004,
+  zIndex: mobileSheetZIndex,
   width: '100vw',
   height: '100%',
   backgroundColor: color.Other.Overlay,
@@ -118,7 +121,7 @@ export const MessageMobileOptionsContainer = style({
   bottom: 0,
   left: 0,
   right: 0,
-  zIndex: 1005,
+  zIndex: mobileSheetZIndex,
   width: '100%',
   maxHeight: '85vh',
   display: 'flex',
diff --git a/src/app/styles/edgeToEdgeInsets.test.ts b/src/app/styles/edgeToEdgeInsets.test.ts
index 83627f4665..5e4b65d1cb 100644
--- a/src/app/styles/edgeToEdgeInsets.test.ts
+++ b/src/app/styles/edgeToEdgeInsets.test.ts
@@ -48,6 +48,13 @@ describe('android edge-to-edge inset contract', () => {
     expect(systemBarShell).toContain('ref={onPortalContainerChange}');
   });
 
+  it('keeps mobile sheets above Folds overlays', () => {
+    const messageStyles = readWorkspaceFile('src/app/features/room/message/styles.css.ts');
+
+    expect(messageStyles).toContain('const mobileSheetZIndex = `calc(${config.zIndex.Max} + 1)`;');
+    expect(messageStyles.match(/zIndex: mobileSheetZIndex/g)).toHaveLength(2);
+  });
+
   it('uses the App shell as the only safe-area owner', () => {
     const appShell = readWorkspaceFile('src/app/components/app-shell/AppShell.tsx');
     const systemBarShell = readWorkspaceFile('src/app/components/app-shell/SystemBarShell.tsx');