fix(dashboard): stop the Member column swallowing the Member × Month grid - #51
Merged
Merged
Conversation
…grid The column carried `width: 100%` and acted as the slack sink, which read fine while every label was a full name: the months hugged their digits and the names took the rest. Aliases cut the content to a few characters but the 100% kept soaking up every spare pixel, so the names sat against a vast empty gap with the twelve months huddled off to the right. Size it to content instead — `width: 1px` with the existing 9.5rem floor, the shrink-to-fit idiom under `table-layout: auto` — and let the months become the auto-width columns that share the slack. They end up evenly spread, so the grid reads as one matrix. Self-correcting across the states that matter: short aliases give a narrow column, a member still on their full name widens it back (no truncation, verified against "Thummalapalli Guru Prasanna Lakshmi"), and on a phone the floor holds the column at 9.5rem and the table scrolls, which is the behaviour a4795bb set out to get. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The Member column carried
width: 100%and acted as the deliberate slack sink (#48/#49). That read fine while every label was a full name — the months hugged their digits and the names took the rest. Aliases cut the content to a few characters, but the100%kept soaking up every spare pixel, so names sat against a vast empty gap with the twelve months huddled off to the right.Fix
Size the column to its content —
width: 1pxwith the existing9.5remfloor, the shrink-to-fit idiom undertable-layout: auto— and let the months become the auto-width columns that share the slack. They end up evenly spread, so the grid reads as one matrix.Verified
Rendered in headless Chrome against a static reproduction of the table (same markup,
table-layout: auto, same per-column width rules), because the real page needs a database:Thummalapalli Guru Prasanna Lakshmiin full, no truncation9.5rem, table scrolls — the behaviour a4795bb set out to getTwo alternatives were rendered and rejected: giving the months a fixed percentage, and capping them at
4.5rem. Both strand a dead gap between DEC and TOTAL.385 tests, typecheck, lint and build pass.
🤖 Generated with Claude Code