fix(site): polish table alignment for workspace proxies (#24538)

tracyjohnsonux · web-flow · commit 3b0cd5bb1221 · 2026-04-20T13:05:53.000-07:00
Fixes alignment issues in the workspace proxies table.

## Changes

- **Status column alignment**: Removed `text-right` from the Status
column header and the `justify-end` flex wrapper from status cells.
Status indicator dots now align consistently across rows regardless of
text width ("Healthy" vs "Not reachable").
- **Error/warning text alignment**: Changed padding from `px-12` (48px)
to `px-14` (56px) so error/warning messages align with proxy name text,
which starts after cell padding (12px) + avatar (32px) + gap (12px) =
56px.
- **colSpan fix**: Corrected `colSpan={4}` to `colSpan={3}` to match the
actual number of table columns.

Relates to DES-22000

&gt; 🤖 Generated by Coder Agents
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
@@ -69,13 +69,11 @@ export const ProxyRow: FC<ProxyRowProps> = ({ proxy, latency }) => {
 					/>
 				</TableCell>
 
-				<TableCell className="status">
-					<div className="flex items-center justify-end">{statusBadge}</div>
-				</TableCell>
+				<TableCell className="status">{statusBadge}</TableCell>
 
 				<TableCell
 					className={cn(
-						"text-sm text-right",
+						"text-sm",
 						latency
 							? getLatencyColor(latency.latencyMS)
 							: "text-content-secondary",
@@ -87,7 +85,7 @@ export const ProxyRow: FC<ProxyRowProps> = ({ proxy, latency }) => {
 			{shouldShowMessages && (
 				<TableRow>
 					<TableCell
-						colSpan={4}
+						colSpan={3}
 						className="!p-0 border-b-0 divide-y divide-solid overflow-clip"
 					>
 						<ProxyMessagesRow
@@ -142,7 +140,7 @@ const ProxyMessagesList: FC<ProxyMessagesListProps> = ({
 	}
 
 	return (
-		<div className="bg-surface-primary px-12 py-4 border-0">
+		<div className="bg-surface-primary px-14 py-4 border-0">
 			<div className={cn("mb-1 text-xs font-semibold", titleClassName)}>
 				{title}
 			</div>
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx
@@ -56,9 +56,9 @@ export const WorkspaceProxyView: FC<WorkspaceProxyViewProps> = ({
 			<Table>
 				<TableHeader>
 					<TableRow>
-						<TableHead className="w-[70%]">Proxy</TableHead>
-						<TableHead className="w-[10%] text-right">Status</TableHead>
-						<TableHead className="w-[20%] text-right">Latency</TableHead>
+						<TableHead className="w-[60%]">Proxy</TableHead>
+						<TableHead className="w-[20%]">Status</TableHead>
+						<TableHead className="w-[20%]">Latency</TableHead>
 					</TableRow>
 				</TableHeader>
 				<TableBody>
