mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-12 00:42:03 +00:00
81d9df61f2
*PR Created by the Glary-Bot Agent* --- ## Summary The GitHub star ticker reads as detached from the GitHub octocat icon on wider viewports. The CSS gap is constant (`gap-2` = 8px), but the 28px icon next to a 20px badge plus the fixed gap make the pair look like two separate items at `lg+` widths instead of a single coupled unit. ## Change `apps/website/src/components/common/GitHubStarBadge.vue`: - Inner gap `gap-2` → `gap-1` (8px → 4px) so the badge and icon sit closer together. - Icon `size-7` → `size-6 shrink-0` (28px → 24px) so the icon height is closer to the badge height (20px) and the pair reads as one unit. The outer `gap-2` between CTA items in `SiteNav.vue` is intentionally unchanged — it is the correct spacing between unrelated CTA elements. ## Verification - `pnpm typecheck` — 0 errors (1 pre-existing hint in unrelated file). - `pnpm format:check` — clean. - `pnpm exec eslint apps/website/src/components/common/GitHubStarBadge.vue` — clean. - `pnpm test:unit` (apps/website) — 30/30 pass. - Pre-commit hook (oxfmt + oxlint + eslint + typecheck + typecheck:website) — passed. - `/review` (Oracle) — 0 critical, 0 warnings, 0 suggestions. - Manual visual verification at 1280px, 1920px, and 2560px viewports. - Tested longer star strings (`999.9K`, `1.2M`) — no wrapping. ## Before / After (2560px viewport) Before: badge and octocat appear visually detached. After: badge and octocat read as a single tightly-coupled unit. ## Screenshots      ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-12021-fix-website-tighten-GitHub-ticker-spacing-on-wide-screens-3586d73d365081be8d66dfbb22b8dc2c) by [Unito](https://www.unito.io) --------- Co-authored-by: Glary-Bot <glary-bot@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>
