fix(#516): handle incomplete card grid rows gracefully on dashboard#522
Conversation
… dashboard Closes meswaramuthu#516 The dashboard layouts left the final card isolated on a new row when there were fewer cards than the available columns, causing excessive whitespace and an unfinished appearance. Three separate grids in student_dashboard.html had this problem; admin_dashboard.html had a latent version covered by the comment fix below. Root causes and fixes --------------------- 1. student_dashboard.html -- .stat-card (flex grid, 3 cards) Before: flex: 1 (no upper bound) Problem: a lone last card expanded to fill 100% of the row Fix: flex: 1 1 200px + max-width: calc(33.333% - 14px) The max-width mirrors the natural 1/3 column width so the card never grows wider than a full-row peer would be. 2. student_dashboard.html -- .dashboard-action (flex grid, 3 cards) Same root cause as above. Fix: flex: 1 1 250px + max-width: calc(33.333% - 14px) 3. student_dashboard.html -- .recent-achievements (CSS Grid) Before: grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) Problem: auto-fill creates invisible placeholder columns; the last real card is forced to fill the remaining track width (potentially the whole row width). Fix: Changed to auto-fit, which collapses empty tracks so no phantom columns remain. Added max-width: 350px on each .recent-achievement card so a lone survivor can't stretch past a natural card width. 4. admin_dashboard.html -- .stat-card (Bootstrap col-md-3 grid) Bootstrap already enforces 25% column width at >=768 px, so a lone card cannot stretch beyond that boundary. Added an explanatory comment in the CSS and a max-width: 100% reset for mobile, where Bootstrap stacks cards to a single column and max-width should not constrain them. Mobile behaviour ---------------- @media (max-width: 768px) overrides reset max-width to 100% for all affected elements so narrow screens continue to render full-width cards as intended.
|
@singhanurag0317-bit is attempting to deploy a commit to the 007's projects Team on Vercel. A member of the Team first needs to authorize it. |
Thanks for creating a PR for your Issue!
|
![entelligence-ai-pr-reviews[bot]](https://avatars.githubusercontent.com/in/932812?s=60&v=4){kind=small}
| full Bootstrap column width and creating excessive whitespace. | ||
| Bootstrap col-md-3 gives each card 25% — we enforce that cap | ||
| so the card never grows beyond its natural column size. */ | ||
| max-width: 100%; /* Bootstrap already caps at col-md-3 = 25% */ |
There was a problem hiding this comment.
student_dashboard.html caps lone cards at calc(33.333% - 14px) to prevent full-width stretching; admin_dashboard.html sets max-width: 100% which is the browser default and adds no constraint. Bootstrap col-md-3 sets width on the outer .col wrapper, not a max-width on .stat-card, so a lone card inside its col still expands to fill that 25% col, and at viewport widths where cols stack to col-12 (below md breakpoint), .stat-card has no cap at all.
| .stat-card { | ||
| flex: 1; | ||
| flex: 1 1 200px; /* grow/shrink but never below 200 px */ | ||
| max-width: calc(33.333% - 14px); /* max 1/3 width so lone card stays bounded */ |
There was a problem hiding this comment.
The new max-width: calc(33.333% - 14px) is sized for a 3-card row, but the Student Performance section at lines 449–466 renders 4 .stat-card elements in the same .dashboard-stats flex container. With 4 cards each capped at ~33%, only 3 fit per row; the 4th wraps to a new line as a lone card at 33% width — exactly the whitespace problem the PR claims to fix, now introduced in the performance section.
Prompt to fix with AI
Copy this prompt into your AI coding assistant to fix this issue.
The `.stat-card` max-width is hardcoded to 33.333% (1/3), but the performance section (lines 449–466) has 4 stat cards. Either: (a) give the 4-card performance section a distinct class (e.g. `.dashboard-stats--4col`) and set its .stat-card max-width to calc(25% - 15px), or (b) change the global .stat-card max-width to `none` and apply the 33.333% cap only to the 3-card sections via a modifier class. The mobile override at line 197 already resets to 100% so that does not need changing.
Confidence Score: 2/5 - Changes NeededNot safe to merge — while this PR attempts to fix incomplete card grid rows on the dashboard, both fixes contain correctness issues that will introduce new visual regressions. The Key Findings:
Files requiring special attention
|
1 participant
Summary
Closes #516
The dashboard layouts left the final card isolated on a new row when there were fewer cards than the available columns, creating excessive whitespace and an unfinished appearance.
Root Causes and Fixes
1.
student_dashboard.html—.stat-card(flex grid, 3 cards)flex: 1(unbounded)flex: 1 1 200pxcalc(33.333% - 14px)Problem:
flex: 1with no upper bound allowed a lone last card to expand to 100% row width.Fix: Added
max-widthmirroring the natural 1/3 column width so the card never grows wider than a full-row peer.2.
student_dashboard.html—.dashboard-action(flex grid, 3 action cards)Same root cause as above.
Fix:
flex: 1 1 250px+max-width: calc(33.333% - 14px)3.
student_dashboard.html—.recent-achievements(CSS Grid)grid-template-columnsrepeat(auto-fill, ...)repeat(auto-fit, ...)350pxProblem:
auto-fillcreates invisible placeholder columns. When the last row is incomplete, the remaining real card is forced to fill the full row width.Fix: Switched to
auto-fit, which collapses empty tracks. Addedmax-width: 350pxon.recent-achievementso a lone card can't stretch beyond a natural card width.4.
admin_dashboard.html—.stat-card(Bootstrap col-md-3)Bootstrap already enforces 25% column width at >=768px, preventing card stretching. Added an explanatory CSS comment and a
max-width: 100%mobile reset so narrow screens continue to render full-width stacked cards as intended.Mobile Behaviour
@media (max-width: 768px)resets allmax-widthcaps to100%so narrow screens continue to render full-width stacked cards without constraint.Files Changed
templates/student_dashboard.html.stat-card,.dashboard-action(flexmax-width),.recent-achievements(auto-fill→auto-fit, cardmax-width)templates/admin_dashboard.htmlmax-widthreset for.stat-card