fix(dashboard): show member names in full, size months to their digits - #49
Conversation
The month columns were carrying a 3.5rem floor that most of them never needed — monthly contributions run 3–6 digits — and the table stretches to fill its container, so every spare pixel was being shared out as gaps between the numbers while the member names sat truncated behind an ellipsis. Inverted: the numeric columns keep only a small `minWidth` floor and size to their widest amount, and the Member column becomes the slack sink (`width: 100%`). Under `table-layout: auto` the other columns are satisfied at their content width first and the remainder lands there, so the months hug their digits and the leftover shows up as trailing space in the name column instead of as holes in the grid. `whitespace-nowrap` on the name cell means the column can never be narrower than the longest name (~35 chars), so names always render in full — the truncating span and its hover `title` are gone. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Uncapped, the name column measures ~233px of a ~358px viewport — and being frozen, it holds that width permanently, so barely two months stay on screen. Below `sm` the name cell is capped and ellipsised (full text still on `title`); `sm:max-w-none` hands the whole name back everywhere else, where there is slack to absorb it. The inline `minWidth` drops to match the cap — it cannot be responsive, and at 11rem it would have overridden the cap outright. On wider screens the names themselves push the column well past that floor, so nothing changes above `sm`. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
Added the phone cap (a4795bb) — the trade-off flagged in the description is now closed. Below One thing that needed care: the inline
|
1 participant
Follow-up to #48.
Problem
Two symptoms, one cause. The month columns carried a
3.5rem(56px) floor that most of them never needed — monthly contributions run 3–6 digits, so a column's real content is ~40–54px — and the table stretches to fill its container. Every spare pixel was being shared out as gaps between the numbers, while the member names sat truncated behind an ellipsis you had to hover to read.Fix
Inverted which columns are elastic:
3.5rem→2.75rem, Total4.5rem→4rem) and size to their widest amount.width: 100%. Undertable-layout: autothe other columns are satisfied at their content width first and the remainder lands there, so leftover space shows up as trailing whitespace after the names rather than as holes between the months.whitespace-nowrapon the name cell means the column can never be narrower than the longest name (~35 chars: "Rallabandi Venkata Narasimha Charlu"), so names always render in full. The truncating span and its hovertitleare gone.This is the ordinary spreadsheet convention — tight numeric columns, an elastic label column — and it's self-correcting: if the roster gains a longer name or an amount grows a digit, the columns re-fit on their own.
Trade-off worth knowing
On a phone there is no slack, so the Member column sits at its content width (~233px of a ~358px viewport) and, being frozen, it stays there — leaving roughly two months visible per screen instead of the ~2.5 that the truncated column allowed. Full names cost about half a month column on mobile. If that reads badly on a real device, a
max-wcap belowsmrestores the old behaviour on phones only, without touching desktop.Verification
npm run build,npm run lint(one pre-existing warning inpending-interest-panel.tsx),npm test(338 passing) all pass. Widths are from measurement, not a browser — the dashboard is behind Google OAuth.🤖 Generated with Claude Code