fix(ui): mobile breakpoint layout and peek interactions

Grid forced to single-column at ≤900px for all panel states.
Resize handles hidden, transitions killed to prevent slivers.
Peek pane gets mobile toolbar (expand/dismiss buttons).
Escape dismisses peek at any viewport. Z toggles full-screen
peek at mobile instead of no-op zen toggle.
This commit is contained in:
2026-05-16 21:53:12 -04:00
parent 3084152695
commit 180757827b
2 changed files with 81 additions and 13 deletions
+36 -2
View File
@@ -785,6 +785,28 @@ main.focus-peek .resize-handle { visibility: hidden; }
overflow: hidden;
}
.peek-mobile-bar {
display: none;
justify-content: space-between;
padding: 6px 12px;
border-bottom: 1px solid var(--border);
}
.peek-mobile-btn {
font-family: var(--mono);
font-size: 14px;
color: var(--muted);
background: none;
border: 1px solid var(--border);
border-radius: 4px;
width: 28px;
height: 28px;
cursor: pointer;
transition: color var(--t-fast), border-color var(--t-fast);
}
.peek-mobile-btn:hover { color: var(--accent); border-color: var(--accent); }
.peek-scroll {
flex: 1;
overflow-y: auto;
@@ -1443,8 +1465,17 @@ kbd { background: var(--raised); border: 1px solid var(--border); border-radius:
/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 900px) {
main { grid-template-columns: 1fr; }
#tag-rail { display: none; }
main,
main.hide-rail,
main.hide-peek,
main.hide-rail.hide-peek,
main.focus-peek {
grid-template-columns: 1fr !important;
transition: none !important;
}
#tag-rail { display: none !important; }
.resize-handle { display: none !important; }
#entity-panel { overflow: auto; }
#detail-pane {
position: fixed;
inset: 0;
@@ -1458,4 +1489,7 @@ kbd { background: var(--raised); border: 1px solid var(--border); border-radius:
z-index: 50;
}
#detail-pane.visible { transform: translateY(0); }
#detail-pane.peek-full { height: 100vh; height: 100dvh; top: 0; }
.peek-mobile-bar { display: flex; }
main.focus-peek #entity-panel { display: block; overflow: auto; min-width: 0; }
}