naps62/maestro
Archived
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(maestro): one pane, one tab on mobile

Browse Source 
Below 860px the layout no longer grows a second navigation surface. The
pane pill strip is gone, the tab bar stays collapsed however many tabs
exist, and opening or spawning takes over the current pane instead of
splitting beside it or opening a tab. The sidebar drawer is the only way
to move between sessions.

The tree itself is untouched, so a desktop-built layout comes back when
the window widens again.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Miguel Palhas
2026-08-31 22:14:42 +01:00
co-authored by Claude Opus 5
parent 1f543d16d1
commit 80af2e6816
3 changed files with 114 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles.css
+4 -30
View File
@@ -2202,8 +2202,8 @@ input.leaf-rename:focus {
display: flex;
flex-direction: column;
}
/* Mobile, single tab: the tab bar is pure chrome — collapse it (a floating ☰
inside the pane keeps the sidebar drawer reachable). */
/* Mobile: the tab bar is a second navigation surface — collapse it (a floating
☰ inside the pane keeps the sidebar drawer reachable). */
.mv-mobile-solo > .mv-tabs {
display: none;
}
@@ -2482,8 +2482,8 @@ input.leaf-rename:focus {
}
/* =========================================================================
multi-view mobile (#35): below 860px the split tree projects to a pill strip
with one pane visible; the sidebar becomes an off-canvas drawer (☰).
multi-view mobile (#35): below 860px only the focused pane is shown — no tab
bar, no pane switcher; the sidebar drawer (☰) is the navigation.
========================================================================= */
.mv-backdrop {
display: none;
@@ -2503,32 +2503,6 @@ input.leaf-rename:focus {
border-radius: 0;
box-shadow: none;
}
.mv-panebar {
display: flex;
gap: 4px;
padding: var(--sp-1) var(--sp-2);
overflow-x: auto;
scrollbar-width: none;
flex: none;
}
.mv-pill {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 7px var(--sp-3);
border-radius: var(--r-1);
background: var(--surface-2);
color: var(--muted);
font: 600 var(--fs-12) / 1 var(--font-mono);
white-space: nowrap;
cursor: pointer;
border: 1px solid transparent;
}
.mv-pill.is-active {
background: var(--accent-tint);
color: var(--accent-strong);
border-color: var(--accent-ring);
}
.mv-mobile > .mv-pane {
flex: 1;
min-height: 0;