feat(maestro): add paging and symbol keys to the mobile key bar
ci / web (push) Successful in 1m22s
ci / rust (push) Successful in 7m24s
ci / flake (push) Successful in 8m50s

PgUp/PgDn and the `- / | ~` symbols the soft keyboard buries behind a page
switch join the bar, in an 8-column grid that keeps the cursor inverted-T.
Columns hold a thumb's width, so a narrow phone scrolls the bar sideways
instead of shrinking the caps.

Closes #7
This commit is contained in:
Miguel Palhas
2026-09-02 16:01:08 +01:00
parent 8cb6aeb61e
commit 3ce1a6f331
4 changed files with 76 additions and 17 deletions
+16 -7
View File
@@ -1499,20 +1499,29 @@ input.leaf-rename:focus {
/* ---------- mobile special-key bar (Termux-style) ---------- */
/* Two compact rows (Termux layout) in a 5-column grid the 10 keys flow into:
Esc/Tab + Ctrl/Alt on the left, cursor keys as a real-keyboard inverted-T on
the right (Home/End fill the top corners). Layout is always defined; only
*visibility* is gated: hidden on precise-pointer devices (a physical keyboard
already has these keys), shown on touch where the soft keyboard omits them.
The shell tracks the visual viewport (see `#app`), so it lands above it. */
/* Two compact rows (Termux layout) in an 8-column grid the 16 keys flow into:
Esc/Tab + Ctrl/Alt on the left, cursor keys as a real-keyboard inverted-T in
the middle (Home/End fill the top corners), then PgUp/PgDn and the shell
symbols. Columns never shrink below a thumb's width — on a narrow phone the
bar scrolls sideways instead. Layout is always defined; only *visibility* is
gated: hidden on precise-pointer devices (a physical keyboard already has
these keys), shown on touch where the soft keyboard omits them. The shell
tracks the visual viewport (see `#app`), so it lands above it. */
.attach-keybar {
display: none;
grid-template-columns: repeat(5, 1fr);
grid-template-columns: repeat(8, minmax(2.5rem, 1fr));
gap: var(--sp-1);
padding: var(--sp-1) var(--sp-2);
padding-bottom: calc(var(--sp-1) + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--border);
background: var(--surface);
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.attach-keybar::-webkit-scrollbar {
display: none;
}
/* Shown on touch only while *this* terminal is focused (`keybar-active`, toggled