1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/* SPA shell chrome. Copies the old Rust-rendered home header: the .app-header /
.app-header h1 / .header-icon rules come from web/static/style.css (loaded in
index.html via the proxy), so the header already matches the old UI's colors,
spacing, and typography. This file only adds what's SPA-specific: making the
wordmark behave as a home link, placing the native host <select>, and giving
the gear a <button> the same look as the old <a class="header-icon">. */
}
/* ── Terminal route layout ───────────────────────────────────────────
The terminal route is a full-bleed island with no SPA chrome. The old
Rust page keyed its full-screen terminal layout off `body.term-body`
(web/static/style.css: position:fixed; 100dvh; flex column). In the SPA
the engine's children live one level deeper — inside `#app` →
`.term-body-spa` — so we have to extend that full-height flex column the
whole way down, or `#terminal` (flex:1; min-height:0) collapses to ~0
and the backend computes far too few rows on mount (the stranded
status-bar / dead-black-bottom bug). These rules only apply on the
terminal route, gated by `body.term-body`. */
}
}
/* ── Control-key ribbon ──────────────────────────────────────────────
The ribbon (^C, arrows, Tab, Esc, …) is a horizontal strip that must
scroll sideways by touch and never wrap. The base rules already come
from web/static/style.css `.input-ribbon`; these reassert them in the
SPA context so a stray parent `touch-action`/flex rule can't clip or
wrap the strip (the "ribbon won't scroll by touch" regression). Mirrors
the old `.input-ribbon`: overflow-x:auto + touch momentum + nowrap, with
touch-action:pan-x so the browser hands horizontal pans to the strip. */
}
}
/* Wordmark = home link. `.app-header h1` already has `flex: 1` (style.css),
which shoves the lone gear to the far edge — just add the pointer cursor. */
}
}
/* Gear — a <button> that wears the old `.header-icon` look (color/font-size/
padding/radius come from style.css). These rules only reset the native button
chrome and keep it from ever being squeezed off-screen. */
}