From 1784b1e6c6f0284321b69b62c34828d57c99853a Mon Sep 17 00:00:00 2001
From: spellitwithaph <github@digidem.net>
Date: Wed, 27 May 2026 10:32:32 -0400
Subject: [PATCH] fix: add responsive collapsed overrides for tablet/mobile
 breakpoints
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The desktop .shell.workspace-panel-collapsed selector had higher
specificity than the media-query .shell rules, causing horizontal
overflow at ≤1180px and ≤760px widths. Add matching collapsed grid
overrides inside each breakpoint.
---
 src/client/src/components/shared.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/client/src/components/shared.ts b/src/client/src/components/shared.ts
index ce5f08f..93cdd92 100644
--- a/src/client/src/components/shared.ts
+++ b/src/client/src/components/shared.ts
@@ -101,6 +101,7 @@ export const appStyles = css`
   workspace-panel { min-width: 0; min-height: 0; border-left: 1px solid var(--pi-border); overflow: hidden; }
   @media (max-width: 1180px) {
     .shell { grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
+    .shell.workspace-panel-collapsed { grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
     aside { grid-row: 1 / 3; }
     main { grid-column: 2; grid-row: 1 / 3; }
     .mobile-tabs-frame { display: flex; }
@@ -115,6 +116,7 @@ export const appStyles = css`
   }
   @media (max-width: 760px) {
     .shell { grid-template-columns: minmax(0, 1fr); }
+    .shell.workspace-panel-collapsed { grid-template-columns: minmax(0, 1fr); }
     aside { display: none; }
     main, .shell.workspace-view > workspace-panel { grid-column: 1; }
     .context-bar { display: flex; }