kai/web-terminal
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

polish(v0.6): put Sessions/Projects toggle on the filter row (kill whitespace)

Browse Source 
The toggle sat on its own dedicated row, leaving a large empty band above the
project grid. On desktop (>=769px) float it top-right on the SAME row as the
filter box / launcher header: panels fill from the top (inset 0), launcher-head
reserves right padding for the pill. Mobile keeps the centred stacked toggle to
avoid overlapping the full-width filter on narrow screens. Also reclaim the
hidden key-bar's space on the home view (body.home-open #term { bottom: 0 }).

CSS-only (style.css is served directly). Verified in-browser: toggle and filter
share a row on Projects, no overlap with New/Manage on Sessions.
This commit is contained in:
Yaojia Wang
2026-06-30 12:03:30 +02:00
parent 32fb4b09b1
commit 3323bc81c0
2 changed files with 30 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
public/style.css
View File

@@ -684,7 +684,7 @@ body {
/* ── Launcher (home session chooser, shown when no tab is open) ──── */
.launcher {
position: absolute;
inset: 68px 0 0 0; /* top offset reserves space for .home-seg (track pill + margins) */
inset: 52px 0 0 0; /* mobile: reserve a row for the stacked .home-seg (desktop overrides to 0) */
overflow-y: auto;
padding: 22px 18px 40px;
box-sizing: border-box;
@@ -898,7 +898,7 @@ body {
/* Panel wrapper (same host as .launcher; toggled via display) */
.proj-panel {
position: absolute;
inset: 68px 0 0 0; /* top offset reserves space for .home-seg (track pill + margins) */
inset: 52px 0 0 0; /* mobile: reserve a row for the stacked .home-seg (desktop overrides to 0) */
overflow-y: auto;
padding: 22px 18px 40px;
box-sizing: border-box;
@@ -1122,7 +1122,7 @@ body {
* the active one filled (iOS-style). Centred with fit-content + margin auto. */
.home-seg {
width: fit-content;
margin: 14px auto 18px;
margin: 10px auto 12px;
display: flex;
gap: 3px;
padding: 3px;
@@ -1164,3 +1164,29 @@ body {
body.home-open #keybar {
display: none;
}
/* Home chooser hides the key-bar, so reclaim its reserved space at the bottom. */
body.home-open #term {
bottom: 0;
}
/* Desktop: float the Sessions/Projects toggle top-right, on the SAME row as the
* panel's filter/header — instead of a dedicated row that left a big empty band.
* The panels fill from the top; the launcher header reserves room for the pill.
* (Mobile keeps the stacked, centred toggle — see .home-seg above — to avoid
* overlapping the full-width filter box on narrow screens.) */
@media (min-width: 769px) {
.home-seg {
position: absolute;
top: 16px;
right: 20px;
margin: 0;
z-index: 6;
}
.launcher,
.proj-panel {
inset: 0;
}
.launcher-head {
padding-right: 240px; /* clear the absolutely-positioned .home-seg */
}
}