Provider and Profile cards are full-width single-column rows, wasting the pane at desktop widths

[yujiezhang-ops]

What the CSS actually says

.provider-list,
.profile-list {
  width: 100%;
  display: grid;
  gap: 8px;
}

app.css:1636-1641. That is the entire rule. display: grid with no grid-template-columns means one implicit column, so every card is full pane width and the two pages are vertical lists of wide, short cards — they read as table rows with rounded corners, not as cards.

Every other card grid in this stylesheet declares its columns: repeat(6, ...) at line 249, repeat(2, ...) at 1283, 1497, and 1610. These two lists are the exception, and neither appears in any @media block, so the layout is identical at 900px and at 1900px.

Why it looks unfinished

The content inside each card is narrow by design and does not grow to fill the width:

• .provider-endpoints dt is a fixed 92px label column, dd is 11px and ellipsised (app.css:1710-1725)
• Provider cards hold two endpoint rows, a chip strip, and a key badge — 13px padding, roughly 100px tall
• Profile cards hold provider·model, an API URL line, API mode:, and a chip footer

So at 1400px each card is a ~100px band with all its text pinned left and most of the width empty.

Suggested direction

grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) on both lists gives two or three columns on a desktop pane and collapses to one below ~700px with no media query. 340px is above the 92px label plus a usable endpoint column, so nothing new gets ellipsised.

Worth deciding together with the content, not just the columns:

• The Profile card's API mode: responses is a raw label with a bare colon (ProfilesPage.tsx:273-275) while every neighbouring fact is a pill. It looks like debug output.
• Provider cards show the OpenAI endpoint always and the Anthropic one only when set, so card heights vary by one row and a multi-column grid will show ragged bottoms unless the rows align.
• Both cards already reuse .provider-users / .provider-user-chip for the "which Agents use this" strip, which is the right shared vocabulary — the pills elsewhere (agent-manage-pill) are a second one. Picking one would help more than the grid change alone.

Scope note

This is presentation only. No binding, DTO, or state change. Screenshots before/after at 1280px and 1900px would be the useful review artifact.