Summary
Server cards on the Servers tab don't keep a consistent height, which makes the grid look ragged. Two distinct causes, both visible in the screenshot below.
Problems
1. Command/URL box wraps and grows the card height
The middle box that shows the full command or URL wraps long content onto multiple lines, so the box (and therefore the card) grows taller for servers with long commands/URLs. We don't want this box to wrap — its height should stay fixed regardless of content length (truncate/scroll horizontally instead of wrapping vertically).
- Wrapping is enabled by the
variant="wrapping" Code block:
clients/web/src/components/elements/ContentViewer/ContentViewer.tsx:96
clients/web/src/theme/Code.ts:8-10 (wordBreak: break-all; whiteSpace: pre-wrap)
- Rendered from the card at
clients/web/src/components/groups/ServerCard/ServerCard.tsx:202-205
2. Bottom action links wrap/stack at ~1500px
At ~1500px viewport width the grid is in its 3-column (lg) layout, making each card narrow enough that the bottom Connection Info and Settings links wrap and stack, increasing card height. At that width we'd rather stay in the 2-column layout (the one that normally appears between the sm and lg breakpoints) so cards stay wide enough to keep the links on one row.
- Fix by raising the
lg (3-col) breakpoint above ~1500px so 1500px stays 2-col:
clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx:149-152 — cols={{ base: 1, sm: 2, lg: 3 }}
- Action links:
clients/web/src/components/groups/ServerCard/ServerCard.tsx:207-233
Goal
Server cards remain a consistent, fixed height across the grid:
- Command/URL box does not wrap (fixed height).
- The grid stays 2-wide at 1500px rather than going 3-wide, so the action links never wrap.
Summary
Server cards on the Servers tab don't keep a consistent height, which makes the grid look ragged. Two distinct causes, both visible in the screenshot below.
Problems
1. Command/URL box wraps and grows the card height
The middle box that shows the full command or URL wraps long content onto multiple lines, so the box (and therefore the card) grows taller for servers with long commands/URLs. We don't want this box to wrap — its height should stay fixed regardless of content length (truncate/scroll horizontally instead of wrapping vertically).
variant="wrapping"Codeblock:clients/web/src/components/elements/ContentViewer/ContentViewer.tsx:96clients/web/src/theme/Code.ts:8-10(wordBreak: break-all; whiteSpace: pre-wrap)clients/web/src/components/groups/ServerCard/ServerCard.tsx:202-2052. Bottom action links wrap/stack at ~1500px
At ~1500px viewport width the grid is in its 3-column (
lg) layout, making each card narrow enough that the bottom Connection Info and Settings links wrap and stack, increasing card height. At that width we'd rather stay in the 2-column layout (the one that normally appears between thesmandlgbreakpoints) so cards stay wide enough to keep the links on one row.lg(3-col) breakpoint above ~1500px so 1500px stays 2-col:clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx:149-152—cols={{ base: 1, sm: 2, lg: 3 }}clients/web/src/components/groups/ServerCard/ServerCard.tsx:207-233Goal
Server cards remain a consistent, fixed height across the grid: