Skip to content

fix(dashboard): equalize KPI card heights#194

Merged
TerrifiedBug merged 1 commit intomainfrom
fix/dashboard-cards-sizing
Apr 28, 2026
Merged

fix(dashboard): equalize KPI card heights#194
TerrifiedBug merged 1 commit intomainfrom
fix/dashboard-cards-sizing

Conversation

@TerrifiedBug
Copy link
Copy Markdown
Owner

@TerrifiedBug TerrifiedBug commented Apr 28, 2026

Summary

Fixes Notion bug: dashboard cards inconsistently sized.

KPI summary cards on the dashboard had visibly mismatched heights within the same row because card content varies (single AnimatedNumber vs multi-StatusBadge vs reduction-with-subtext).

  • Add `auto-rows-fr` to the KPI grid + skeleton + empty-state grids so all cards in a row stretch to the same height
  • Add `h-full` to StaggerItem, Card, and CardContent so cards fill the grid row evenly

Test plan

  • Dashboard with mixed states (some KPIs zero, some with multiple status badges) shows uniform card heights
  • Skeleton state cards size identically
  • Empty-state (no environments) onboarding cards size identically
  • No regression on responsive (md:grid-cols-2 vs lg:grid-cols-6 wrap)

Greptile Summary

This PR adds auto-rows-fr to the three KPI/skeleton/onboarding grids on the dashboard and propagates h-full through StaggerItem, Card, and CardContent so every card in a row stretches to match the tallest sibling. The StaggerItem component already accepted className, so the new prop is wired correctly.

Confidence Score: 5/5

Safe to merge — pure layout change with no logic, data, or security implications.

All changes are additive Tailwind class additions. StaggerItem already accepts className, Card/CardContent are standard shadcn primitives, and the h-full chain is wired correctly through every level. No regressions expected on the responsive grid breakpoints.

No files require special attention.

Important Files Changed

Filename Overview
src/app/(dashboard)/page.tsx Adds auto-rows-fr to KPI/skeleton/onboarding grids and h-full to StaggerItem, Card, and (where needed) CardContent; straightforward and correct layout fix with no logic changes.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["Grid container\ngrid auto-rows-fr"] --> B["StaggerItem div\nh-full (direct grid child)"]
    B --> C["Card\nh-full"]
    C --> D["CardContent\nh-full (onboarding only)"]
    C --> E["CardContent\n(KPI / skeleton — top-aligned content)"]

    style A fill:#4f46e5,color:#fff
    style B fill:#7c3aed,color:#fff
    style C fill:#2563eb,color:#fff
    style D fill:#059669,color:#fff
    style E fill:#6b7280,color:#fff
Loading

Reviews (1): Last reviewed commit: "fix(dashboard): equalize KPI card height..." | Re-trigger Greptile

Cards in the dashboard KPI row had varying content (single number vs
multi-badge status vs reduction with sub-text), so heights diverged
within the same grid row.

- Add auto-rows-fr to the KPI grid (and skeleton + empty-state grids)
  so wrapped rows have equal heights
- Add h-full to StaggerItem, Card, and CardContent so cards fill the
  grid row evenly regardless of content
@github-actions github-actions Bot added fix and removed fix labels Apr 28, 2026
@TerrifiedBug TerrifiedBug merged commit d44b2c3 into main Apr 28, 2026
15 checks passed
@TerrifiedBug TerrifiedBug deleted the fix/dashboard-cards-sizing branch April 28, 2026 08:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant