From e6ce265be04d88ff3bddc74faf3d3017ddd50123 Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Wed, 29 Apr 2026 14:20:11 +0200
Subject: [PATCH] fix(mobile): drop positive display rule that overrode desktop
 shell's flex layout

---
 src/app/globals.css | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 0b9746c..e89da2c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -129,14 +129,15 @@
 }
 
 /* ─── Form-factor shell visibility ──────────────────────────────────────────
- * Two shells (desktop + mobile) render to the DOM on every page; CSS reveals
- * one and hides the other. The data-form-factor body attribute is set
- * server-side from User-Agent (see src/lib/form-factor.ts). The media-query
- * fallback handles desktop browsers resized below lg (1024px), or stripped UAs.
+ * Two shells (desktop + mobile) render to the DOM on every page; CSS hides
+ * the inactive one. The data-form-factor body attribute is set server-side
+ * from User-Agent (see src/lib/form-factor.ts). The media-query fallback
+ * handles desktop browsers resized below lg (1024px), or stripped UAs.
+ *
+ * IMPORTANT: only `display: none` rules are emitted — we never set a positive
+ * display, because the desktop shell uses Tailwind's `flex` class which would
+ * be overridden by `display: block` (same specificity, later cascade).
  */
-[data-shell='desktop'] {
-  display: block;
-}
 [data-shell='mobile'] {
   display: none;
 }