Comfy-Org / Comfy-Org/Comfy-Desktop
Dashboard: instance card row stays left-aligned on wide screens instead of centering
- Dominant language
- TypeScript
- Stars
- 458
- Forks
- 59
- Avg merge
- 22h 18m
- Merged PRs (30d)
- 45
Description
### Description
On the Comfy Desktop **Dashboard**, the instance-card row — **New instance / Local instance / Comfy Cloud** — is always anchored to the **left edge** of the content container. The wider the window, the larger the empty space on the right, which is visually inconsistent with the centered logo and search box on the same page.
The ComfyUI editor itself is not affected; only the Dashboard card row shows this behavior.
### Environment
- **App**: Comfy Desktop v1.0.47
- **OS**: Windows 11, build 10.0.26200 (x64)
- **Display / window**: 1920 × 1080 (reproducible at other wide window sizes)
### Steps to reproduce
1. Launch Comfy Desktop v1.0.47 and open the **Dashboard**.
2. Maximize the window (1920 × 1080).
3. Compare the instance-card row with the logo / search box above it: the cards hug the left edge of the content area while the logo and search box are centered.
**Extra check (rules out responsive layout):** hiding the **Comfy Cloud** card (2 cards remain) does not change anything — the row is still left-aligned.
### Root cause
Traced via `--remote-debugging-port=9222` + DevTools:
- The card-row container is `display: grid` with **`justify-content: start`**.
- The grid tracks have a fixed width (280 px per card), so the whole track group is packed against the start (left) edge and all leftover space goes to the right.
- The logo / search box sit under a parent that uses `justify-content: center`, which is why they center correctly. The mismatch between the two containers causes the visual inconsistency.
### Suggested fix
Center the card-row container:
```css
justify-content: center;
/* or, to stay overflow-safe on narrow viewports: */
justify-content: safe center;
```
### Screenshots
1. Default state — 3 cards left-aligned at 1920 × 1080
2. Cloud card hidden — 2 cards still left-aligned
3. DevTools — card-row container showing `display: grid; justify-content: start`
4. After applying `justify-content: center` in DevTools — cards centered
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in the Comfy Desktop Dashboard frontend by searching for the instance-card row and the `justify-content: start` declaration, using the described DevTools layout as confirmation. Check the row with three cards, with Comfy Cloud hidden, and at wide and narrow window sizes; done means the cards are centered on wide screens without breaking the narrow layout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100