Lock titlebar + pane toolbar height to stop periodic xterm reflow
When the window or a pane was narrow, button text could wrap inside flex items, growing the toolbar by ~16px. That shrank .pane-wrap → ResizeObserver fired on every xterm → fit() reflowed text. Idle detection toggling " · N idle" in the titlebar was enough to flap a button across its wrap threshold every few seconds. Lock both bars to fixed heights with white-space:nowrap, flex-shrink:0 on children, and overflow:hidden. Items that don't fit clip silently instead of wrapping. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
d667e18c0c
commit
e46446444e
2 changed files with 24 additions and 1 deletions
13
src/App.css
13
src/App.css
|
|
@ -16,6 +16,19 @@
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
/* Lock to a single row even when the window is narrow: buttons whose
|
||||||
|
text would otherwise wrap (e.g. "📡 all off") would grow the
|
||||||
|
titlebar, shrink .pane-wrap, and reflow every xterm. nowrap stops
|
||||||
|
text-wrap inside buttons, flex-shrink:0 stops children from being
|
||||||
|
squeezed, height locks the row height, overflow:hidden clips items
|
||||||
|
that don't fit (widen the window to see them). */
|
||||||
|
white-space: nowrap;
|
||||||
|
height: 34px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.titlebar > * {
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.titlebar .label {
|
.titlebar .label {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
|
||||||
|
|
@ -58,7 +58,17 @@
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
min-height: 24px;
|
height: 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* Lock height: a narrow pane used to wrap toolbar items to 2+ rows,
|
||||||
|
which shrank the xterm beneath and reflowed the terminal. Clip
|
||||||
|
overflow instead of showing a scrollbar (which would itself eat
|
||||||
|
into the 24px and crush the buttons). */
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.pane-toolbar > * {
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.pane-label {
|
.pane-label {
|
||||||
font: inherit;
|
font: inherit;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue