BitSquare/Codeman
2
0
Fork 0
mirror of https://github.com/Ark0N/Codeman.git synced 2026-10-10 09:19:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): make the Run dropdown scrollable

Browse Source 
The menu opens upward (bottom: 100%) with no max-height or overflow, so with the stock CLIs plus custom endpoint entries it was taller than the room above the toolbar and its top was off-screen and unreachable, worst on phones. Cap it to the space between the header and the toolbar (dvh, vh fallback), scroll inside it with overscroll containment, and stop its overflow:auto children (history, saved URLs) being squashed.

Tests: a CI-gate source guard and a real mobile-browser test (touch swipe reaches the last entry), which fails without the CSS.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JrzFKEdBLwVfu6ev2ZscJS
This commit is contained in:
Devvyn
2026-10-06 19:06:39 +08:00
co-authored by Claude Sonnet 5.5
parent ac94f339ac
commit 90649fc363
5 changed files with 198 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/public/styles.css
+18
View File
@@ -5574,6 +5574,24 @@ body.touch-device .terminal-container .xterm .xterm-helper-textarea {
timestamp recent-session row still fits whole, which is what that list is for. */
max-width: 250px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
/* The menu grows UPWARD from the toolbar (`bottom: 100%`), so with every CLI, the custom
endpoint entries, Terminal and the saved URLs it can be taller than the room above the
toolbar: its top then sits off-screen with nothing to scroll, and the entries up there
cannot be reached (worst on a phone). Cap it to the space between the header and the
toolbar and scroll inside it. `dvh` so an on-screen keyboard or a collapsing browser bar
shrinks the cap with it; the `vh` line is the fallback for browsers without it. */
max-height: calc(100vh - var(--header-height) - var(--toolbar-height) - 16px);
max-height: calc(100dvh - var(--header-height) - var(--toolbar-height) - 16px);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
}
/* Children of a scrolling flex column must keep their natural height. Without this the ones
that have their own `overflow` (the history list, the saved-URL list, whose min-height is 0)
are squashed to nothing as the menu fills, instead of the menu scrolling. */
.run-mode-menu > * {
flex-shrink: 0;
}
/* Above phone width the menu becomes a full-width drawer across the bottom of the