diff --git a/src/app/features/room/message/styles.css.ts b/src/app/features/room/message/styles.css.ts index bb815f2f8..fa10d7e08 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 83627f466..5e4b65d1c 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');