snowspeeder/pi-web
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add responsive collapsed overrides for tablet/mobile breakpoints

Browse Source 
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.
This commit is contained in:
spellitwithaph
2026-05-27 10:32:32 -04:00
parent c8b05427fd
commit 1784b1e6c6
1 changed files with 2 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/src/components/shared.ts
+2
View File
@@ -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; } workspace-panel { min-width: 0; min-height: 0; border-left: 1px solid var(--pi-border); overflow: hidden; }
@media (max-width: 1180px) { @media (max-width: 1180px) {
.shell { grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .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; } aside { grid-row: 1 / 3; }
main { grid-column: 2; grid-row: 1 / 3; } main { grid-column: 2; grid-row: 1 / 3; }
.mobile-tabs-frame { display: flex; } .mobile-tabs-frame { display: flex; }
@@ -115,6 +116,7 @@ export const appStyles = css`
} }
@media (max-width: 760px) { @media (max-width: 760px) {
.shell { grid-template-columns: minmax(0, 1fr); } .shell { grid-template-columns: minmax(0, 1fr); }
.shell.workspace-panel-collapsed { grid-template-columns: minmax(0, 1fr); }
aside { display: none; } aside { display: none; }
main, .shell.workspace-view > workspace-panel { grid-column: 1; } main, .shell.workspace-view > workspace-panel { grid-column: 1; }
.context-bar { display: flex; } .context-bar { display: flex; }