fix(settings): stop the SSH host form running off the right edge

At 1200x800 — an ordinary window size — the SSH host form was cut off by
the window edge: the Connect button was sliced in half, the Name, Host and
User fields had no visible right edge, and the Auth control lost its last
option entirely. "2FA" was off screen, so at that size an authentication
method could not be selected at all. Nothing scrolled horizontally, so
there was no way to reach any of it short of resizing the window.

Two causes, both in the layout:

- `#ssh-detail` is `flex_1` but had no `min_w_0`. Flex items default to
  `min-width: auto`, so the column sized itself to its content instead of
  to the space left over after the 280px host list, and the overflow went
  past the window.
- `settings_row` then had no way to cope: the label column could shrink to
  nothing while the control could not shrink at all. Adding `min_w_0`
  alone made it worse — at 900px the labels collapsed to one word, then
  one *letter*, per line.

The row now wraps and the label column has a 200px floor, which is the
usual settings-pane behaviour: side by side while there is room, control
stacked beneath the label when there is not.

| Window | Before | After |
|---|---|---|
| 1200px | Connect halved, three fields and "2FA" off screen | everything fits side by side |
| 900px | same, worse | rows stack; all six auth methods reachable |
| wide | fine | unchanged — the 720px cap still holds |

Checked on screen at 1200 and 900, and on Appearance and Terminal at 1200
to confirm the wrap does not fire where there is room: those two pages are
pixel-identical to before.
This commit is contained in:
l0ng-ai
2026-08-08 08:09:45 +08:00
parent 1e7284db2b
commit 5423301b82
+13 -2
View File
@@ -1063,9 +1063,15 @@ impl Tty7App {
};
h_flex()
.id(element_id)
// A settings pane can end up narrow — the SSH page spends 500px on
// its two lists before this row gets any. Wrapping puts the control
// on its own line rather than pushing it off the right edge, and the
// floor below stops the label shrinking into one word per line.
.flex_wrap()
.items_center()
.justify_between()
.gap_8()
.gap_x_8()
.gap_y_2()
.py_2()
.px_2p5()
.mx_neg_2p5()
@@ -1077,7 +1083,8 @@ impl Tty7App {
.child(
v_flex()
.gap_0p5()
.min_w_0()
.flex_1()
.min_w(px(200.))
.child(
div()
.text_sm()
@@ -1635,6 +1642,10 @@ impl Tty7App {
v_flex()
.id("ssh-detail")
.flex_1()
// Without this the flex default `min-width: auto` keeps the
// column at its content width, so a narrow window pushes the
// form off the right edge instead of squeezing the labels.
.min_w_0()
.h_full()
.overflow_y_scroll()
.child(