fix(frontend): round distribution bar segment edges + add dashboard to page-map (#975)

[ericsocrat]

Fix: Distribution bar segment edges + page-map dashboard coverage (#975)

Closes #975

Changes

1. Distribution bar rounded corners (HealthSummary.tsx)

The distribution bar container had rounded-full but child segment <div> elements had no border-radius, causing hard color transitions at the first and last segment edges.

Fix: Added first:rounded-l-full last:rounded-r-full to segment divs so the outer segments match the container's rounding.

2. Page-map dashboard pattern (page-map.ts)

The PR screenshot infrastructure's page-map entry for the dashboard page only matched src/app/app/page.tsx and src/components/layout/. Changes to dashboard components in src/components/dashboard/ (like CategoriesBrowse, HealthSummary, QuickActions) would not trigger screenshot capture.

Fix: Added \"src/components/dashboard/\" to the dashboard entry patterns array.

3. Test coverage

Added test asserting first:rounded-l-full and last:rounded-r-full classes are present on distribution bar segments.

Verification

• TypeScript: npx tsc --noEmit → 0 errors
• HealthSummary tests: 12/12 passed
• Full suite: npx vitest run → 5,865 passed | 19 skipped | 0 failures

Files Changed (3)

File	Change
frontend/src/components/dashboard/HealthSummary.tsx	Add rounding classes to bar segments
frontend/src/components/dashboard/HealthSummary.test.tsx	Add segment rounding test
frontend/e2e/helpers/page-map.ts	Add src/components/dashboard/ to dashboard patterns

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tryvit	Ready	Preview, Comment	Mar 19, 2026 9:24pm

[github-actions]

📸 PR Screenshots

Captured 2 screenshots (1 mobile, 1 desktop) for 1 changed page(s):

• dashboard

📥 Download screenshots from workflow artifacts.

_{Captured by PR Screenshots workflow • 2026-03-19}

[Copilot]

Pull request overview

This PR polishes the dashboard UI by rounding the outer edges of the health distribution bar segments and improves PR screenshot coverage by expanding the dashboard page-map patterns.

Changes:

• Add first:rounded-l-full / last:rounded-r-full to the first/last distribution bar segments in HealthSummary.
• Add a unit test asserting the rounded-corner segment classes are present.
• Expand the dashboard entry in the PR-screenshot page map to include src/components/dashboard/ changes.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
frontend/src/components/dashboard/HealthSummary.tsx	Adds Tailwind first/last rounding variants to distribution bar segments.
frontend/src/components/dashboard/HealthSummary.test.tsx	Adds regression test for segment rounding classes.
frontend/e2e/helpers/page-map.ts	Updates dashboard patterns so dashboard component changes trigger screenshots.

Comments suppressed due to low confidence (1)

frontend/src/components/dashboard/HealthSummary.tsx:106

• This component uses SCORE_BAND_HEX for the segment backgroundColor, but SCORE_BAND_HEX is documented as intended only for contexts where CSS variables are unavailable (e.g. OG/SVG). Since distribution entries already include a color (CSS var) from getAllBands(), prefer using that here to stay consistent with score-utils and avoid duplicating band color sources.

              className="transition-all duration-300 first:rounded-l-full last:rounded-r-full"
              style={{
                width: `${(d.count / total) * 100}%`,
                backgroundColor:
                  SCORE_BAND_HEX[d.band as keyof typeof SCORE_BAND_HEX],
              }}

[github-actions]

Bundle Size Report

Metric	Value
Main baseline	0 KB
This PR	0 KB
Delta	✅ +0 KB (+0%)
JS chunks	0
Hard limit	4000 KB

✅ Bundle size is within acceptable limits.