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

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

> 🤖 Generated by Coder Agents
This commit is contained in:
TJ
2026-04-20 13:05:53 -07:00
committed by GitHub
parent bf885ccc71
commit 3b0cd5bb12
2 changed files with 7 additions and 9 deletions
@@ -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>
@@ -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>