fix(dashboard): fit the whole Member × Month grid on screen

[parameshjava]

Problem

The Member × Month tab on /dashboard renders a 12-month pivot that measured ~1400px wide against ~1120–1216px of content area (max-w-7xl minus lg:px-8). The late months sat off the right edge behind a horizontal scrollbar most readers never found.

Fix

Three changes buy the width back, so the grid lands at ~1076px and fits without scrolling:

• Member column fixed at 9.5rem, ellipsised (full name on hover via title). This was the main hog — whitespace-nowrap over a bare minWidth let names like "Rallabandi Venkata Narasimha Charlu" take ~245px.
• Month cells drop the ₹ prefix. A new gridAmount() helper prints the same en-IN lakh grouping formatRupees produces, minus the symbol; the unit is stated once ("Amounts in ₹") beside the export menu, spreadsheet-style.
• New opt-in .pr-table-dense class halves horizontal cell padding (0.75rem → 0.4rem) and drops body type to 0.75rem / headers to 0.625rem. Column min-widths shrink to match (# 3→2.25rem, months 5.5→3.5rem, Total 6.5→4.5rem) — columns still auto-expand to content, so nothing wraps or clips.

Gridlines + zebra striping (new gridlines / striped pass-through props on PrDataTable → PrimeReact's showGridlines / stripedRows) keep a cell traceable back to both its member and its month across 12 narrow columns. The dense class also cancels the gridlines theme's outer left/right frame, which would otherwise double up against the rounded card border.

Horizontal scroll stays enabled as the fallback on phones. CSV/PDF exports are untouched — still ₹-labelled headers and raw numeric values.

Verification

• npm run build — passes
• npm run lint — passes (one pre-existing warning in pending-interest-panel.tsx)
• npm test — 338 passing

Not viewed in a browser (the dashboard is behind Google OAuth), so the fit is from measurement rather than a screenshot — worth an eyeball on a real screen before merge.

🤖 Generated with Claude Code

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
aits-fcf-tracker	Ready	Preview	Aug 8, 2026 4:00pm

[parameshjava]

Two mobile follow-ups pushed (edd9978).

Frozen label columns. scrollable disables PrimeReact's card-stacking — datatable.cjs.js:7126 gates the stack stylesheet on props.responsiveLayout === 'stack' && !props.scrollable — so on a phone this stays a grid that scrolls sideways, and past ~Mar the member name left the screen. # and Member are now frozen (new pass-through props on PrDataTable); PrimeReact computes each column's left offset by walking the preceding frozen siblings, so the pair pins as a unit without hand-maintained widths.

The freeze seam sits on the last frozen cell's own right edge, not the first scrolling cell's left edge — the sticky columns paint over the scrolled content, so a border on the far side would slide underneath and vanish. Width only; the theme sets border: 1px solid #e5e7eb on all four sides before narrowing the widths, so the color comes along and no hex is hardcoded.

₹ caption. The note was hidden sm:inline in the toolbar, which meant phones — having also lost the per-cell ₹ — had the unit stated nowhere. It's now an always-visible caption under the table, with a sideways-scroll hint below sm.

Backgrounds check out for the sticky cells: thead th and tfoot td carry their own opaque #f9fafb from the theme at higher specificity, and body cells have no background of their own, so .p-frozen-column { background: inherit } picks up the row's white / #f8f8fa striped fill rather than letting scrolled content show through.

npm run build, npm run lint, npm test (338) all pass. Still not rendered in a browser — the compositing of frozen columns + gridlines + striping is verified by reading the theme CSS and the DataTable source, not by eye, so that's the bit worth a real device check before merge.