fix(dashboard): span MilestonesCard full width on md to prevent orphaned layout

[dccakes]

Daily Product Improvement

Summary

On medium (tablet) screens, the three-card bottom row of the dashboard uses md:grid-cols-2, which places BudgetCard and VendorsCard in a first row and leaves MilestonesCard alone at half-width in a second row with blank space beside it. This fix wraps MilestonesCard in a div with md:col-span-2 lg:col-span-1 so it fills the full row at the md breakpoint and returns to one-third width at lg.

---

Recommendations Reviewed

Area: src/components/dashboard/planning-overview.tsx
Issue: On md (768px–1024px) screens, the 3-card bottom row uses md:grid-cols-2. With 3 cards, CSS Grid places BudgetCard + VendorsCard in row 1 and MilestonesCard alone at 50% width in row 2, leaving a blank half-column.
Recommendation: Wrap MilestonesCard in a div with md:col-span-2 lg:col-span-1.
Type: UX/UI
Priority: Medium
Effort: Small

---

Area: src/components/dashboard/planning-overview.tsx
Issue: The MiniStats 4-stat grid uses grid-cols-2 lg:grid-cols-4, showing as a 2×2 grid on md/tablet screens instead of a single row.
Recommendation: Add md:grid-cols-4 to show all 4 stats in one row from tablet onwards. Note: the "Tasks due this month" label may wrap at narrower tile widths — evaluate before applying.
Type: UX/UI
Priority: Low
Effort: Small

---

Area: src/components/dashboard/planning-overview.tsx
Issue: All 7 dashboard card components (CountdownHero, MiniStats, RsvpCard, TasksCard, BudgetCard, VendorsCard, MilestonesCard) are defined in a single 646-line file, making it harder to navigate and maintain.
Recommendation: Extract each card into its own file under src/components/dashboard/cards/.
Type: Frontend cleanup
Priority: Medium
Effort: Large

---

Area: src/components/guest-list/v2/list/guest-individual-table.tsx
Issue: The Contact Complete and Location Complete columns display "Complete" or "Missing" as text, requiring more horizontal space and slower visual scanning than icon-based indicators.
Recommendation: Replace with CheckCircle/XCircle icons (lucide-react) to reduce column width and improve scanability.
Type: UX/UI
Priority: Low
Effort: Small

---

Area: src/app/(authenicated)/guest-list/page.tsx
Issue: The page's exported server component is named DashboardPage instead of GuestListPage — a copy-paste naming error that is confusing when navigating the codebase.
Recommendation: Rename to GuestListPage.
Type: Frontend cleanup
Priority: Low
Effort: Small

---

Area: src/components/dashboard/planning-overview.tsx — MilestonesCard
Issue: The wedding-day marker uses a raw ✦ Unicode character and the override warning uses ⚠, both inline in JSX text. These are inconsistent with the Lucide icon system used elsewhere.
Recommendation: Replace ⚠ with AlertTriangle from lucide-react; leave ✦ as decorative (it fits the serif aesthetic).
Type: UX/UI
Priority: Low
Effort: Small

---

Selected Improvement

Fix MilestonesCard layout at the md breakpoint: wrap it in <div className='md:col-span-2 lg:col-span-1'> so it spans the full row on tablet screens instead of rendering at half-width with blank space beside it.

Why This Was Selected

The dashboard is the first thing users see every session. On tablets and mid-size browser windows (768px–1024px), the current layout produces a visually incomplete row — MilestonesCard at 50% width with an empty half-column next to it. This is the most user-visible layout issue not already covered by an open PR, and the fix is a single wrapper div with two Tailwind classes.

Changes Made

• Wrapped <MilestonesCard> in <div className='md:col-span-2 lg:col-span-1'> inside the bottom grid row.
• At sm/mobile: no change (single-column stacking).
• At md (768px–1024px): MilestonesCard spans both columns, filling the row.
• At lg (1024px+): col-span resets to 1, all three cards appear in a single row as before.

Files Changed

• src/components/dashboard/planning-overview.tsx

Verification

• TypeScript (tsc --noEmit): passed with no errors (one pre-existing deprecation warning about baseUrl unrelated to this change).
• Biome lint: 5 pre-existing warnings in the file, none introduced by this change.
• Unit tests: 2023 tests passed across 233 test suites (pre-commit hook).
• Diff reviewed: change is isolated to the grid wrapper and does not affect card data, logic, or other breakpoints.

Future Recommendations

Recommendation: Extract each dashboard card (CountdownHero, MiniStats, RsvpCard, TasksCard, BudgetCard, VendorsCard, MilestonesCard) into separate files under src/components/dashboard/cards/
Priority: Medium
Effort: Large
Reason not included: Splitting a 646-line file into 7+ files is a Large refactor with broad diff scope — not appropriate for a single daily run.
Should become GitHub issue: Yes

Recommendation: Add md:grid-cols-4 to MiniStats so the 4 stat tiles appear in a single row on tablets
Priority: Low
Effort: Small
Reason not included: The "Tasks due this month" label is likely to wrap at ~184px tile width on md. Requires a label shortening or truncation decision before applying.
Should become GitHub issue: No

Recommendation: Replace "Complete"/"Missing" text in the guest individual table with CheckCircle/XCircle icons
Priority: Low
Effort: Small
Reason not included: Low priority and narrower user impact (Person Audit view only); the dashboard layout fix is higher value today.
Should become GitHub issue: No

Recommendation: Rename DashboardPage export in guest-list/page.tsx to GuestListPage
Priority: Low
Effort: Small
Reason not included: Pure naming cleanup; not user-facing.
Should become GitHub issue: No

Recommendation: Replace inline ⚠ with a Lucide AlertTriangle icon in MilestonesCard
Priority: Low
Effort: Small
Reason not included: Minor polish; the emoji is functional and not blocking anything.
Should become GitHub issue: No

GitHub Issues Created or Proposed

No GitHub issues created. The largest item (splitting planning-overview.tsx) is worth tracking, but the codebase already has many open PRs from prior daily runs and creating a separate issue today risks adding noise without immediate value. Recommend the repo maintainer evaluate the file size issue in context of existing PR backlog before opening a dedicated issue.

---

Generated by Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
scv	Error		Aug 15, 2026 2:25pm

[github-actions]

Jest Test Coverage

Coverage Summary

Lines	Statements	Branches	Functions
	81.71% (35132/42993)	82.92% (3734/4503)	68.04% (1037/1524)