Hynes/Void-Homelab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dross): collapse shell to 2 columns; topbar ◆ summons Dross

Browse Source 
Removing #rightrail left a dead 360px grid column that narrowed #main.
Shell grid is now sidebar+main; the topbar ◆ (was Toggle-companion-rail)
now dispatches dross-toggle to open/close the floating bubble. Remaining
.rail-* CSS + chrome.js toggleRail are dead no-ops (minor cleanup later).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
root
2026-06-10 00:34:39 +10:00
parent 6d5c3027ac
commit e2be462ecb
3 changed files with 12 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
public/style.css
View File

@@ -29,20 +29,18 @@ html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color:
#shell {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr var(--rail-w);
grid-template-columns: var(--sidebar-w) 1fr;
grid-template-rows: var(--topbar-h) 1fr;
grid-template-areas:
"topbar topbar topbar"
"sidebar main rail";
"topbar topbar"
"sidebar main";
height: 100vh;
width: 100vw;
}
#shell.rail-collapsed { grid-template-columns: var(--sidebar-w) 1fr var(--rail-w-min); }
#topbar { grid-area: topbar; border-bottom: 1px solid var(--border); background: var(--panel); display: flex; align-items: center; padding: 0 16px; gap: 12px; }
#sidebar { grid-area: sidebar; border-right: 1px solid var(--border); background: var(--panel); overflow-y: auto; padding: 12px 0; }
#main { grid-area: main; overflow-y: auto; padding: 24px 32px; }
#rightrail{ grid-area: rail; border-left: 1px solid var(--border); background: var(--panel); overflow: hidden; display: flex; flex-direction: column; }
/* topbar */
.brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.18em; font-size: 14px; color: var(--accent); text-transform: uppercase; padding: 0 6px; }
@@ -483,15 +481,11 @@ ul.plain li:last-child { border-bottom: none; }
/* ===== Collapsible chrome + responsive layout (Plan 6 polish) ===== */
:root { --sidebar-w-min: 0px; }
#shell { transition: grid-template-columns .22s ease; }
#sidebar, #rightrail { transition: transform .22s ease; }
#sidebar { transition: transform .22s ease; }
/* Desktop collapse — shrink the grid columns */
#shell.sidebar-collapsed { grid-template-columns: var(--sidebar-w-min) 1fr var(--rail-w); }
#shell.sidebar-collapsed.rail-collapsed { grid-template-columns: var(--sidebar-w-min) 1fr var(--rail-w-min); }
#shell.rail-collapsed { grid-template-columns: var(--sidebar-w) 1fr var(--rail-w-min); }
/* Desktop collapse — shrink the sidebar column */
#shell.sidebar-collapsed { grid-template-columns: var(--sidebar-w-min) 1fr; }
#shell.sidebar-collapsed #sidebar { overflow: hidden; border-right: none; }
/* Hide chat body when the rail is collapsed so the thin strip stays clean */
#shell.rail-collapsed .rail-chat { display: none; }
/* Topbar toggle buttons */
.chrome-toggle {
@@ -514,13 +508,11 @@ body.drawer-open #scrim { opacity: 1; pointer-events: auto; }
/* ---- Narrow / mobile / vertical: off-canvas drawers, single-column main ---- */
@media (max-width: 860px) {
#shell,
#shell.sidebar-collapsed,
#shell.rail-collapsed,
#shell.sidebar-collapsed.rail-collapsed {
#shell.sidebar-collapsed {
grid-template-columns: 1fr;
grid-template-areas: "topbar" "main";
}
#sidebar, #rightrail {
#sidebar {
position: fixed; top: var(--topbar-h); bottom: 0; z-index: 50;
}
#sidebar { left: 0; width: min(82vw, 300px); transform: translateX(-100%); border-right: 1px solid var(--border); }