jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(shell): close header-tabbar gap, minimize all 3 header bars together 

- Move tab row up 1px (top: 55px) to overlap header border, eliminating gap
- Minimize toggle now hides header + tab row + subnav (was leaving subnav visible)
- Floating restore button (top-right, semi-transparent) when headers minimized
- Smooth transition on subnav hide/show

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-04-16 12:19:26 -04:00
parent a2f74faa3e
commit b0049ba8f4
1 changed files with 36 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
website/public/shell.css
View File

@ -73,7 +73,7 @@ body.rspace-banner-visible .rstack-header {
top: 36px; top: 36px;
} }
body.rspace-banner-visible .rstack-tab-row { body.rspace-banner-visible .rstack-tab-row {
top: 92px; /* 36px banner + 56px header */ top: 91px; /* 36px banner + 56px header - 1px overlap */
} }
body.rspace-banner-visible #app { body.rspace-banner-visible #app {
padding-top: 128px; /* 36px banner + 92px normal */ padding-top: 128px; /* 36px banner + 92px normal */
@ -209,7 +209,7 @@ body.rspace-banner-visible #app {
.rstack-tab-row { .rstack-tab-row {
position: fixed; position: fixed;
top: 56px; top: 55px; /* overlap header border by 1px to close gap */
left: 0; left: 0;
right: 0; right: 0;
z-index: 9998; z-index: 9998;
@ -224,7 +224,7 @@ body.rspace-banner-visible #app {
/* ── Main content area ── */ /* ── Main content area ── */
#app { #app {
padding-top: 92px; /* Below fixed header (56px) + tab row (36px) */ padding-top: 91px; /* Below fixed header (56px) + tab row (36px) - 1px overlap */
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -604,7 +604,7 @@ body.rspace-headers-minimized .rapp-minimize-btn svg {
transform: rotate(180deg); transform: rotate(180deg);
} }
/* Minimized state: hide header + tab row, subnav becomes thin restore strip */ /* Minimized state: hide all 3 header bars, floating restore button */
body.rspace-headers-minimized .rstack-header { body.rspace-headers-minimized .rstack-header {
transform: translateY(-100%); transform: translateY(-100%);
pointer-events: none; pointer-events: none;
@ -613,17 +613,36 @@ body.rspace-headers-minimized .rstack-tab-row {
transform: translateY(-100%); transform: translateY(-100%);
pointer-events: none; pointer-events: none;
} }
body.rspace-headers-minimized .rapp-subnav {
transform: translateY(-100%);
pointer-events: none;
opacity: 0;
}
body.rspace-headers-minimized #app { body.rspace-headers-minimized #app {
padding-top: 0; padding-top: 0;
} }
body.rspace-headers-minimized #app.canvas-layout { body.rspace-headers-minimized #app.canvas-layout {
padding-top: 0; padding-top: 0;
} }
body.rspace-headers-minimized .rapp-subnav { /* Floating restore button when all headers minimized */
body.rspace-headers-minimized .rapp-minimize-btn {
position: fixed;
top: 6px;
right: 12px;
z-index: 10000;
pointer-events: auto;
width: 28px;
height: 28px; height: 28px;
padding: 2px 8px; background: var(--rs-glass-bg);
overflow: hidden; backdrop-filter: blur(12px);
justify-content: flex-end; -webkit-backdrop-filter: blur(12px);
border: 1px solid var(--rs-border);
border-radius: 8px;
opacity: 0.6;
transition: opacity 0.15s;
}
body.rspace-headers-minimized .rapp-minimize-btn:hover {
opacity: 1;
} }
/* Smooth transitions for header minimize/restore */ /* Smooth transitions for header minimize/restore */
@ -633,6 +652,9 @@ body.rspace-headers-minimized .rapp-subnav {
.rstack-tab-row { .rstack-tab-row {
transition: margin-left 0.25s ease, left 0.25s ease, transform 0.25s ease, top 0.3s ease-out; transition: margin-left 0.25s ease, left 0.25s ease, transform 0.25s ease, top 0.3s ease-out;
} }
.rapp-subnav {
transition: transform 0.25s ease, opacity 0.25s ease;
}
#app { #app {
transition: margin-left 0.25s ease, left 0.25s ease, padding-top 0.3s ease-out; transition: margin-left 0.25s ease, left 0.25s ease, padding-top 0.3s ease-out;
} }
@ -650,6 +672,12 @@ body.rspace-headers-minimized .rapp-subnav {
overflow: hidden; overflow: hidden;
transform: none; transform: none;
} }
body.rspace-headers-minimized .rapp-subnav {
max-height: 0;
overflow: hidden;
transform: none;
opacity: 0;
}
} }
/* ── Flex gap fallback for Safari <14.1 ── */ /* ── Flex gap fallback for Safari <14.1 ── */