From b7ec975fb087badbe900cc036a784d9adea43efa Mon Sep 17 00:00:00 2001
From: Max Litruv Boonzaayer <litruv@gmail.com>
Date: Sat, 11 Jul 2026 20:48:54 +1000
Subject: [PATCH] refactor: update mobile gesture styles to use global styles
 for better maintainability

---
 .../components/mobile/mobile-gestures.css.ts  | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/overlay/src/app/components/mobile/mobile-gestures.css.ts b/overlay/src/app/components/mobile/mobile-gestures.css.ts
index e0deb9b..325442b 100644
--- a/overlay/src/app/components/mobile/mobile-gestures.css.ts
+++ b/overlay/src/app/components/mobile/mobile-gestures.css.ts
@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 import { color, config, toRem } from 'folds';
 
 export const SwipeBackRoot = style({
@@ -49,19 +49,18 @@ export const CompactDetailLayer = style({
   display: 'flex',
   flexDirection: 'column',
   // Pass through taps when outlet content is null/empty; real pages
-  // re-enable pointer events on their root via the child selector.
+  // re-enable pointer events on their root via the child rule below.
   pointerEvents: 'none',
-  selectors: {
-    '& > *': {
-      pointerEvents: 'auto',
-      flex: 1,
-      minHeight: 0,
-      minWidth: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      backgroundColor: color.Background.Container,
-    },
-  },
+});
+
+globalStyle(`${CompactDetailLayer} > *`, {
+  pointerEvents: 'auto',
+  flex: 1,
+  minHeight: 0,
+  minWidth: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: color.Background.Container,
 });
 
 export const SwipeToReplyLayer = style({