Comfy-Org / Comfy-Org/Comfy-Desktop

Dashboard: instance card row stays left-aligned on wide screens instead of centering

Open Beginner friendly
#1,520 0 comments 0 reactions 0 assignees View on GitHub
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

Image
Image
Image
Image
Image

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.