fix(CDS-2231): prevent Overlay/Modal scrim collapsing to 0x0 under Fabric

[adrienzheng-cb]

What changed? Why?

Under Fabric (Expo SDK 56 / React Native 0.85+ / new Yoga), an inset-only absolute view — pin="all" (position: absolute; top/right/bottom/left: 0) with no explicit width/height and no intrinsically-sized children — collapses to 0×0. This affects two cds-mobile scrims:

• The shared Overlay backdrop used by Drawer/Tray/Alert.
• The full-screen Modal container (which doesn't use Overlay).

When collapsed, the scrim never paints (no dimming) and never receives the onTouchStart that dismisses the overlay (iOS skips zero-size views during hit-testing), so the Drawer/Tray/Modal backdrop is invisible and non-interactive.

The fix gives both the Overlay scrim and the Modal container explicit full-window dimensions via useWindowDimensions().

Root cause (required for bugfixes)

pin="all" produces an inset-only absolute box. On RN 0.81's Yoga this still stretches to fill, but the Yoga version shipped with RN 0.85 (Expo 56) collapses a size-less inset-only absolute view to 0×0. Giving it explicit window width/height restores a concrete size.

Validation

This is not reproducible on apps/expo-app yet because it's still on the older CMR (Expo 54 / RN 0.81.5); the bug only manifests on the newer Yoga.

The fix mirrors the exact approach already validated in production on CMR v8 / RN 0.85 by the Retail team:

• Overlay: consumer/react-native#70975 (useWindowDimensions + explicit width/height), confirmed live on the iOS simulator.
• Modal: the same fix already present in the CMR v8 @cbhq/cds-mobile Yarn patch (Modal.js hunk).

Landing this upstream lets both of those downstream patches be dropped once Retail bumps to a cds-mobile release containing it.

UI changes

No visual change on the current supported RN. Under Fabric/RN 0.85 it restores the dimmed, tappable backdrop (vs. an invisible, non-interactive one).

Testing

How has it been tested?

• Unit tests
• Interaction tests
• Pseudo State tests
• Manual - Web
• Manual - Android (Emulator / Device)
• Manual - iOS (Emulator / Device)

Testing instructions

Added regression tests asserting the Overlay scrim and Modal container are sized to the full window (Dimensions.get('window')) so they cannot collapse to 0×0. All 12 overlay suites pass (yarn nx run mobile:test overlays); mobile:typecheck and mobile:lint are clean. Note: jsdom tests encode the fix's intent — the native Yoga collapse itself can only be exercised on RN 0.85 (see Validation above).

Change management

type=routine
risk=low
impact=sev4

automerge=false

Fixes CDS-2231.

Made with Cursor

[linear]

CDS-2231

[cb-heimdall]

✅ Heimdall Review Status

Requirement	Status	More Info
Reviews	✅ 1/1	Denominator calculation Show calculation 1 if user is bot 0 1 if user is external 0 2 if repo is sensitive 0 From .codeflow.yml 1 Additional review requirements Show calculation Max 0 0 From CODEOWNERS 1 Global minimum 0 Max 1 1 1 if commit is unverified 0 Sum 1
CODEOWNERS	✅ See below

✅ CODEOWNERS

Code Owner	Status	Calculation
ui-systems-eng-team	✅ 1/1	Denominator calculation Additional CODEOWNERS Requirement Show calculation Sum 0 0 From CODEOWNERS 1 Sum 1

[github-actions]

https://percy.io/d424b72f/web/cds-mobile-visreg-03c97426/builds/52039111