fix(web): keep connection rows readable at narrow widths - #10186
Open
greatgitsby wants to merge 2 commits into
Open
fix(web): keep connection rows readable at narrow widths#10186greatgitsby wants to merge 2 commits into
greatgitsby wants to merge 2 commits into
Conversation
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
greatgitsby
marked this pull request as ready for review
September 5, 2026 19:27
Contributor
ApprovabilityVerdict: Approved at 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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What Changed
Settings → Connections rows (saved remote environments, pairing links, connected clients) no longer collapse their text column when the window is narrow.
shrink-0. It now shrinks with the row and is capped at 60% of the row width on thesmlayout.min-w-0so it wraps inside that column instead of forcing it wider.flex-wrapso 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-wordson 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
ServerUpdateActioncomponent renders, since I couldn't stand up a version-mismatched server locally.After at 500px (stacked layout) and 1200px:
Checklist
Note
Fix connection row overflow at narrow widths with
min-w-0and width capsmin-w-0to flex containers inPairingLinkListRow,ConnectedClientListRow, andSavedBackendListRowso action areas can shrink instead of overflowingsmbreakpoint and above in those same rows, keeping full width belowsmSavedBackendListRowmin-w-0to the desktop-managed update explanation span inServerUpdateActionMacroscope summarized c88e1b7.