fix(dashboard): align segmented toggle button heights - #2800
Conversation
Usage chart pills were ~py-1 short next to h-9 reload/info buttons. Lock pills to Capgo h-9/min-h-9 everywhere. Co-authored-by: Cursor <cursoragent@cursor.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (6)
🔗 Linked repositories identifiedCodeRabbit considers these linked repositories for cross-repo context during reviews:
📝 WalkthroughWalkthroughDashboard usage controls now enforce consistent fixed heights. Two preview assets and global declarations for notification panels were also added. ChangesDashboard usage controls
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
Comment |
Visual diff passedVisual changesGenerated at 2026-07-30T23:15:15.654Z. Threshold: 0.1% pixel difference.
Commit: Open |
Merging this PR will not alter performance
Comparing 
Footnotes
|
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found across 6 files
Confidence score: 4/5
- In
src/components/dashboard/Usage.vue, the storage chart mode toggle uses fixed height classes (h-9 min-h-9) without theflex items-centeralignment used by neighboring controls, which can cause label/icon vertical misalignment or clipping and make the UI feel inconsistent—add matching alignment classes (or otherwise center content) to de-risk visual regressions.
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="src/components/dashboard/Usage.vue">
<violation number="1" location="src/components/dashboard/Usage.vue:1140">
P2: The storage chart mode toggle buttons now enforce a fixed 36px height via `h-9 min-h-9`, but unlike the Daily/Cumulative and Billing Period buttons in the same file (which include `flex items-center`), these storage buttons lack flex centering. As a result, inside the locked 36px box the text sits at the top `py-1` offset rather than being vertically centered, creating misalignment with the adjacent controls. Add `flex items-center` to the class list so the text is properly centered within the fixed height.</violation>
</file>
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
| <button | ||
| type="button" | ||
| class="rounded-md px-2.5 py-1 text-xs font-semibold transition-colors" | ||
| class="h-9 min-h-9 rounded-md px-2.5 py-1 text-xs font-semibold transition-colors" |
There was a problem hiding this comment.
P2: The storage chart mode toggle buttons now enforce a fixed 36px height via h-9 min-h-9, but unlike the Daily/Cumulative and Billing Period buttons in the same file (which include flex items-center), these storage buttons lack flex centering. As a result, inside the locked 36px box the text sits at the top py-1 offset rather than being vertically centered, creating misalignment with the adjacent controls. Add flex items-center to the class list so the text is properly centered within the fixed height.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At src/components/dashboard/Usage.vue, line 1140:
<comment>The storage chart mode toggle buttons now enforce a fixed 36px height via `h-9 min-h-9`, but unlike the Daily/Cumulative and Billing Period buttons in the same file (which include `flex items-center`), these storage buttons lack flex centering. As a result, inside the locked 36px box the text sits at the top `py-1` offset rather than being vertically centered, creating misalignment with the adjacent controls. Add `flex items-center` to the class list so the text is properly centered within the fixed height.</comment>
<file context>
@@ -1137,15 +1137,15 @@ onBeforeUnmount(() => {
<button
type="button"
- class="rounded-md px-2.5 py-1 text-xs font-semibold transition-colors"
+ class="h-9 min-h-9 rounded-md px-2.5 py-1 text-xs font-semibold transition-colors"
:class="storageUsageMode === 'total' ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-700 dark:text-white' : 'text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white'"
@click="storageUsageMode = 'total'"
</file context>
| class="h-9 min-h-9 rounded-md px-2.5 py-1 text-xs font-semibold transition-colors" | |
| class="flex items-center h-9 min-h-9 rounded-md px-2.5 py-1 text-xs font-semibold transition-colors" |
1 participant
Summary (AI generated)
h-9 min-h-9(36px) so they match reload/info andd-btn-smcontrols.PeriodDaySelectorpills for consistency.Live screenshots (AI generated)
Usage control row after fix (all pills + icon buttons = 36px):
Dashboard Usage tab:
Motivation (AI generated)
The Daily/Cumulative (and billing period) segmented pills used only
py-1with no height lock, so they rendered shorter than the adjacent reload/info buttons (sm:h-9/ Capgod-btn-sm). That made the left controls look undersized next to the correct-height right controls.Business Impact (AI generated)
Keeps the dashboard control chrome visually consistent, which reduces UI polish issues on the most-used org/app analytics surface.
Test Plan (AI generated)
d-btn-smrefresh on delivery / notifications tabsh-9Generated with AI
Made with Cursor
Summary by CodeRabbit