Skip to content

fix(web): match mobile server cards to the DWztv design - #711

Merged
ValgulNecron merged 1 commit into
masterfrom
claude/project-thread-0k3yfy
Oct 16, 2026
Merged

ValgulNecron merged 1 commit into
masterfrom
claude/project-thread-0k3yfy

Conversation

@ValgulNecron

Copy link
Copy Markdown
Collaborator

Before: master's "design vs browser visual diff" check fails on DWztv (Mobile Servers, Light) with 4.12% global diff against the 4.00% max. The #702 design.pen regroup re-exported DWztv with component instances: a 17px pill-shaped status badge and 28px metric pills. The app still drew a 24px badge with 4px corners, 31px pills, a card drop shadow and a lighter address line.

After: the mobile server card matches the exported design. The badge is a 17px full pill, the pills are 28px tall, the card has no shadow and the address uses text-muted, as in the design.

Same capture, same reference, same script: DWztv scored 1.55% against the pre-#702 export and 3.67% against the new one under pixelmatch 7, and 4.12% under pixelmatch 8 (#648). So the regroup caused most of the drift, and pixelmatch 8's stricter OKLab metric tipped it over.

How: four className changes in ServerCard / StatChip in web/src/routes/Servers.tsx (shadow-none; text-muted on the address; leading-[13px] rounded-full on the PhaseChip, where rounded-full opts out of the global 4px .chip radius pin; py-[5px] leading-4 on the pills). No threshold, test or design file changes. Remaining known drift, not touched here: icon set (lucide vs Material Symbols), game tile tints and the Asleep violet, which are shared app-wide styles.

🤖 Generated with Claude Code


Generated by Claude Code

The design.pen regroup (#702) re-exported DWztv with the status badge
and metric pills as component instances: a 17px pill-shaped badge and
28px pills. The app still drew a 24px square-cornered badge, 31px
pills, a card shadow and a lighter address line, which pushed the
visual diff for DWztv to 4.12% (max 4%) on master.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Signed-off-by: Claude <noreply@anthropic.com>
@ValgulNecron ValgulNecron added type: fix Bug fix area: web React dashboard labels Oct 16, 2026 — with Claude
@ValgulNecron ValgulNecron self-assigned this Oct 16, 2026
@coderabbitai

coderabbitai Bot commented Oct 16, 2026

Copy link
Copy Markdown

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 30 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration
  • Configuration used: Repository: GameplanePanel/Gameplane/.coderabbit.yaml
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 0cf76858-b034-4715-a90d-b781358bd24b
📥 Commits

Reviewing files that changed from the base of the PR and between 140fa35 and 5f5aa4a.

📒 Files selected for processing: 1
  • web/src/routes/Servers.tsx
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

Copy link
Copy Markdown

CI Report - 5f5aa4a

run 38954314461 - attempt 1

0 failed - 10 passed - 23 skipped - 21m17s elapsed

Coverage

Module Measured Gate Margin
web L95.6 S94.05 B89.13 F91.5 L92 S92 B82 F76 +2.05

Changed

Area Files +/-
web/ 1 +4/-4

Slowest jobs

Job Duration
build e2e images 10m39s
build e2e images (arm64) 10m9s
e2e web live / arm64 (kind) 10m0s
e2e web live / amd64 (kind) 8m33s
web 6m20s

e2e buckets run

multicluster, upgrade

@ValgulNecron
ValgulNecron merged commit 04e4107 into master Oct 16, 2026
38 checks passed
ValgulNecron pushed a commit that referenced this pull request Oct 16, 2026
Brings in #711 (mobile server cards match the DWztv design). Conflict in
web/src/routes/Servers.tsx: kept master's text-muted address class and
this branch's hover titles (T100).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Signed-off-by: Claude <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: web React dashboard type: fix Bug fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants