Fix dashboard stats card overflow

[WcaleNieWolny]

Summary by CodeRabbit

Release Notes

• Style
  • Improved responsive layout and spacing in dashboard cards to prevent content squeezing and ensure proper alignment across different screen sizes.
  • Enhanced typography scaling and text wrapping behavior for improved readability and consistent presentation on mobile and desktop devices.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5b24addc-5eb1-4f46-9ad3-c54f8330556a

📥 Commits

Reviewing files that changed from the base of the PR and between 1e90612 and 0562f76.

📒 Files selected for processing (2)

• src/components/dashboard/ChartCard.vue
• src/components/dashboard/UpdateStatsCard.vue

---

📝 Walkthrough

Walkthrough

This PR improves responsive layout behavior in two dashboard chart components. ChartCard receives flex constraints (min-w-0 and shrink-0) and typography redesign using clamp-based sizing with flex-wrap. UpdateStatsCard's header applies similar responsive patterns with flex adjustments, shrink control on icons, and text wrapping on numeric values.

Changes

Dashboard Responsive Layout Updates

Layer / File(s)	Summary
ChartCard header and stats flex layout src/components/dashboard/ChartCard.vue	Header stats wrapper adds min-w-0 for responsive sizing and prevents overflow in narrow widths; stats/badge section adds shrink-0 to control flex resizing behavior.
ChartCard total display clamp-based typography src/components/dashboard/ChartCard.vue	Total display redesigned from fixed text-3xl/sm:text-4xl to flex-wrap container with text-[clamp(...)] responsive scaling and updated word-break behavior for better narrow viewport handling.
UpdateStatsCard action totals header layout src/components/dashboard/UpdateStatsCard.vue	Header markup for requested/install/fail action totals updated with revised flex/gap/alignment, icons gain shrink-0 while preserving sm:w-4 sm:h-4 responsive sizing, and numeric spans add break-all for text wrapping.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Cap-go/capgo#2035: Both PRs modify src/components/dashboard/ChartCard.vue with layout class changes affecting the chart card's responsive sizing and inner container constraints.

Poem

🐰 With min-w-0 and clamp's gentle hand,
The dashboard breathes on mobile land,
Flex shrinks no more, text wraps just right,
Where narrow screens meet layout's light! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The pull request description is completely empty, missing all required sections including Summary, Test plan, Screenshots, and Checklist.	Add a pull request description following the template: include a summary of changes, test plan with reproduction steps, screenshots if UI behavior changed, and complete the checklist.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Fix dashboard stats card overflow' accurately describes the main changes, which involve updating responsive layout classes and styling in dashboard card components to prevent overflow.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[WcaleNieWolny]

@Stevenn28 I opened the PR for you. #2243

[codspeed-hq]

Merging this PR will degrade performance by 48.16%

⚠️ Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

❌ 1 regressed benchmark
✅ 42 untouched benchmarks
⏩ 2 skipped benchmarks¹

Warning

Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
❌	/updates manifest response with metadata	120.3 µs	232.1 µs	-48.16%

Tip

Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.

---

_{Comparing Stevenn28:codex/fix-stat-card-overflow (0562f76) with main (1e90612)}

Footnotes

1. 2 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[albercr3]

The failing Run tests job looks unrelated to the Vue layout changes. It exits in the typos step before the test suite runs:

• supabase/functions/_backend/files/files.ts:380 has beed / imporant
• supabase/functions/_backend/files/files.ts:381 has NERVER

Those strings are not present on current origin/main anymore, so this PR is likely just testing against an older merge base. Rebasing/syncing with the latest main should clear that failure and also give CodSpeed a cleaner comparison for the reported /updates manifest response with metadata regression.

[KCDaemon]

Reviewed the changed dashboard card layout classes in ChartCard.vue and UpdateStatsCard.vue. The flex/min-width/shrink changes are narrowly scoped to the overflow issue, and they preserve the existing chart/card structure while allowing long totals and legend values to wrap instead of forcing horizontal overflow.\n\nI do not see a blocker in the changed Vue files. The red Run tests job appears unrelated to this PR's touched files: it fails in the typos step on backend strings that are not part of this diff, as noted in the existing thread. CodSpeed also reports a benchmark regression, but this patch only changes Vue/Tailwind classes; that result looks like a noisy comparison rather than a runtime consequence of these two component changes.