Skip to content

fix(web): keep connection rows readable at narrow widths - #10186

Open
greatgitsby wants to merge 2 commits into
pingdotgg:mainfrom
greatgitsby:fix/remote-env-row-narrow-wrap
Open

fix(web): keep connection rows readable at narrow widths#10186
greatgitsby wants to merge 2 commits into
pingdotgg:mainfrom
greatgitsby:fix/remote-env-row-narrow-wrap

Conversation

@greatgitsby

@greatgitsby greatgitsby commented Sep 5, 2026

Copy link
Copy Markdown

What Changed

Settings → Connections rows (saved remote environments, pairing links, connected clients) no longer collapse their text column when the window is narrow.

  • The right-hand action column was shrink-0. It now shrinks with the row and is capped at 60% of the row width on the sm layout.
  • The "Update the desktop app on that machine to update this server." hint gets min-w-0 so it wraps inside that column instead of forcing it wider.
  • The red connection error line gets flex-wrap so the "Copy trace ID" button drops below the message instead of squeezing it.

Five className lines across two files in apps/web. No logic changes.

Why

When a saved environment has a version mismatch on a desktop-managed server, the action column holds an unwrappable hint sentence plus the Remove and Connect buttons. At narrow widths that column took nearly the whole row, the text column shrank to a few pixels, and break-words on the error message broke it one character per line. This made the desktop app's Connections page thousands of pixels tall in a narrow window.

Buttons already carry whitespace-nowrap, so only the hint sentence wraps; the buttons stay on one line at every width I checked (500px, 700px, 1200px).

UI Changes

Web dev build, Settings → Connections, with a saved environment that fails to connect. The "Server update available" hint was reproduced by inserting the same span the ServerUpdateAction component renders, since I couldn't stand up a version-mismatched server locally.

Before (700px) After (700px)
before 700px after 700px

After at 500px (stacked layout) and 1200px:

after 500px

after 1200px

Checklist

  • This PR is small and focused
  • I explained what changed and why
  • I included before/after screenshots for any UI changes
  • I included a video for animation/interaction changes (n/a)

Note

Fix connection row overflow at narrow widths with min-w-0 and width caps

  • Adds min-w-0 to flex containers in PairingLinkListRow, ConnectedClientListRow, and SavedBackendListRow so action areas can shrink instead of overflowing
  • Caps action container widths at 60% at the sm breakpoint and above in those same rows, keeping full width below sm
  • Adds flex wrapping to the connection error message and trace-ID control in SavedBackendListRow
  • Adds min-w-0 to the desktop-managed update explanation span in ServerUpdateAction

Macroscope summarized c88e1b7.

The action column in Settings > Connections rows was shrink-0. When a saved
environment had a version mismatch on a desktop-managed server, that column
held an unwrappable hint sentence plus two buttons and consumed nearly the
whole row, collapsing the text column so the red connection error broke one
character per line.

Let the action column shrink and cap it at 60% of the row, let the hint
sentence wrap, and let the error line wrap its trace-ID button.

Claude-Session: https://claude.ai/code/session_018JX8L5R2i4SNx9CjRypVoR
@github-actions github-actions Bot added vouch:unvouched PR author is not yet trusted in the VOUCHED list. size:S 10-29 changed lines (additions + deletions). labels Sep 5, 2026
@greatgitsby
greatgitsby marked this pull request as ready for review September 5, 2026 19:27
@macroscopeapp

macroscopeapp Bot commented Sep 5, 2026

Copy link
Copy Markdown
Contributor

Approvability

Verdict: Approved at c88e1b7

Macroscope's review found this PR approvable — This is a five-line CSS-only responsive layout fix confined to existing Connections settings rows and an update hint. It changes wrapping and width constraints without altering connection, update, data, or API behavior.

You can add or adjust custom eligibility rules. Learn more.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:S 10-29 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant