refactor(tui): share one content column and grid the VM row - #27
Conversation
Every screen used to center its own JoinVertical(Center, ...) block independently. A pane changing width on screen switch, or a status line appearing, shifted the whole block sideways or downward. column() stacks a screen's parts left-aligned at appContentWidth (or wider, when a part like the list-plus-access box needs more). The list, detail, form, and edit screens now all render through it, so they share one left edge. The list's search line and every screen's status line are now always-present slots, blank when empty, instead of conditionally appended lines. An appearing prompt replaces blank space instead of pushing the footer down. App.go anchors the frame to the top with a one-line margin instead of centering vertically, so a height change moves only the content below it, not the whole screen.
fmt.Sprintf("%-14s %-5s %5dM %2dc ", ...) padded but never truncated.
A VM name longer than 14 cells pushed mode, ram, cpu, and the running
suffix out of column, breaking the row's width budget.
Each cell is now its own fixed-width lipgloss style. The name cell
truncates with ansi.Truncate instead of overflowing. The running
suffix (uptime, port) gets its own two cells, so the port lands in
the same column on every running row regardless of uptime length.
The broken-row wrap used a hand-built hanging indent from
strings.Repeat. It now wraps the reason text to its own column and
joins it beside the glyph with lipgloss.JoinHorizontal, which lines
up the continuation under the text without the indent arithmetic.
renderProgressPanel drew the bar and its percent or count on two separate, label-less rows. They describe one value; progressLabel already renders them on one line for the compact list form. The detail panel now matches it. The panel also renders through paneAt at appContentWidth, so it shares the detail screen's column instead of hugging its own content width. provLine had no total width cap. A long VM name could push the row past the pane and wrap it. Every field on the line already caps its own piece; this truncates the sum as a backstop.
TestColumnHoldsEveryLineWithinWidth pins that column() pads every line to a shared width rather than letting shorter parts drift. TestListRowWidthInvariantForLongNames pins the fixed-cell row grid: a 200-char VM name must not push a running row past listWidth. It fails against the old fmt.Sprintf row (242 cells) and passes against the new one. TestDetailSurfacesVNCForAHeadlessVM and TestDetailExplainsTheVNCFallbackOnAHeadlessHost asserted an unbroken socket path in the rendered output. The facts pane now holds every value to appContentWidth, so a path longer than that column wraps mid-token across two lines instead of widening the pane. Both now check for the path with the pane's border and whitespace stripped, so a wrapped path still matches.
|
Warning Review limit reached
Next review available in: 2 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (11)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
1 participant
The layout half of the TUI review (spec: 2026-08-09-tui-layout-fixes). Fixes the "goofy" composition: fragments of different widths each centered on their own, and both axes re-centering as content appeared.
Shared column.
appContentWidth = 72and acolumn(width, parts...)helper that stacks parts left-aligned inside one block. Every screen'sJoinVertical(lipgloss.Center, …)becomescolumn(appContentWidth, …). The detail screen's facts box, last-provision pane, and progress panel all render viapaneAt(…, appContentWidth, …), so the three boxes share one left edge and screen switches stop shifting the block sideways.One deviation from the spec:
columnwidens to the widest part instead of shrinking towidth. A lipglossWidth()narrower than its content word-wraps it, which mangles a bordered pane's box-drawing. The list pane plus its side-by-side access box is routinely wider than 72.TestToastOverlayKeepsScreenShapefails with the literal spec and passes with widen-only.Top anchor.
View()anchors tolipgloss.Topwith a one-line top margin instead of the old height-triggered center/top switch, so only content below a change moves. The search and status lines are always-present slots (blank when empty), so an appearing prompt replaces blank space instead of pushing every line down.listRowsHeadroomgrew 14 → 16 for the two reserved lines.VM row grid. Fixed lipgloss cells replace
fmt.Sprintf("%-14s %-5s %5dM %2dc"): name (ansi.Truncate), mode, right-aligned RAM/CPU, and the uptime + port in their own cells so the port lands in the same column on every running row. The broken-row wrap uses a width cell joined withJoinHorizontalinstead of a manual hanging indent.Also: the detail progress panel collapses the bar and number onto one row, and
provLineisansi.Truncate'd toappContentWidthas a backstop.Tests:
TestColumnHoldsEveryLineWithinWidth,TestListRowWidthInvariantForLongNames(a 242-cell row under the old code, bounded now).just checkandjust testpass.Worth an eyeball in a real terminal before merge — the width invariants are covered by tests, but the visual result is best judged live.