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:
+36
-2
@@ -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; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user