From b010db4a21539984380550cc61c6461ccbc73f35 Mon Sep 17 00:00:00 2001
From: Trey Moen <trey@moen.ai>
Date: Sat, 5 Sep 2026 12:18:35 -0700
Subject: [PATCH] fix(web): keep connection rows readable at narrow widths

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
---
 apps/web/src/components/ServerUpdateAction.tsx           | 2 +-
 apps/web/src/components/settings/ConnectionsSettings.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/ServerUpdateAction.tsx b/apps/web/src/components/ServerUpdateAction.tsx
index 1845ada716b6..0d464c1402d4 100644
--- a/apps/web/src/components/ServerUpdateAction.tsx
+++ b/apps/web/src/components/ServerUpdateAction.tsx
@@ -179,7 +179,7 @@ export function ServerUpdateAction({
 
   if (selfUpdate === "desktop-managed" && !desktopAppUpdate) {
     return (
-      <span className="text-muted-foreground text-xs">
+      <span className="min-w-0 text-muted-foreground text-xs">
         Update the desktop app on that machine to update this server.
       </span>
     );
diff --git a/apps/web/src/components/settings/ConnectionsSettings.tsx b/apps/web/src/components/settings/ConnectionsSettings.tsx
index 5a6f3ebd70b0..7f60359d0a8c 100644
--- a/apps/web/src/components/settings/ConnectionsSettings.tsx
+++ b/apps/web/src/components/settings/ConnectionsSettings.tsx
@@ -743,7 +743,7 @@ const PairingLinkListRow = memo(function PairingLinkListRow({
             </p>
           ) : null}
         </div>
-        <div className="flex w-full shrink-0 items-center gap-2 sm:w-auto sm:justify-end">
+        <div className="flex w-full min-w-0 items-center gap-2 sm:w-auto sm:max-w-[60%] sm:justify-end">
           {shareablePairingUrl && canCopyToClipboard ? (
             <Button
               size="xs"
@@ -992,7 +992,7 @@ const ConnectedClientListRow = memo(function ConnectedClientListRow({
             <AccessScopeSummary scopes={clientSession.scopes} label="Client scopes" />
           </p>
         </div>
-        <div className="flex w-full shrink-0 items-center gap-2 sm:w-auto sm:justify-end">
+        <div className="flex w-full min-w-0 items-center gap-2 sm:w-auto sm:max-w-[60%] sm:justify-end">
           {!clientSession.current ? (
             <Button
               size="xs"
@@ -1523,7 +1523,7 @@ function SavedBackendListRow({
             </Tooltip>
           ) : null}
           {environment.connection.error && !resumingServerUpdate ? (
-            <p className="flex min-w-0 items-center gap-2 text-destructive text-xs">
+            <p className="flex min-w-0 flex-wrap items-center gap-2 text-destructive text-xs">
               <span className="min-w-0 break-words">
                 {connectionStatusText(environment.connection)}
               </span>
@@ -1539,7 +1539,7 @@ function SavedBackendListRow({
             </p>
           ) : null}
         </div>
-        <div className="flex w-full shrink-0 items-center gap-2 sm:w-auto sm:justify-end">
+        <div className="flex w-full min-w-0 items-center gap-2 sm:w-auto sm:max-w-[60%] sm:justify-end">
           {versionMismatch &&
           (serverUpdateState.status === "idle" || serverUpdateState.status === "failed") ? (
             <ServerUpdateAction