Skip to content

Server cards: keep fixed height (no command/URL wrap, raise 3-col breakpoint) #1528

Description

@cliffhall

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.

Image

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-152cols={{ 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.

Metadata

Metadata

Assignees

Labels

v2Issues and PRs for v2

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions