fix(dashboard): equalize KPI card heights#194
Merged
TerrifiedBug merged 1 commit intomainfrom Apr 28, 2026
Merged
Conversation
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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).
Test plan
Greptile Summary
This PR adds
auto-rows-frto the three KPI/skeleton/onboarding grids on the dashboard and propagatesh-fullthroughStaggerItem,Card, andCardContentso every card in a row stretches to match the tallest sibling. TheStaggerItemcomponent already acceptedclassName, 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
auto-rows-frto KPI/skeleton/onboarding grids andh-fullto 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:#fffReviews (1): Last reviewed commit: "fix(dashboard): equalize KPI card height..." | Re-trigger Greptile