fix(demo): pack the dashboard board, which was mostly empty space - #9
Merged
Merged
Conversation
Two separate kinds of gap, both measured rather than eyeballed. Between tiles. A tile spanning two columns cannot start until both are free, so one arriving while the columns are uneven strands the shorter column. The board opened with a 296px void under the second KPI for exactly this reason. Worse, it had eleven wide tiles to nine narrow ones, so the third column could never keep up and finished 900px short of its neighbours. Inside tiles. `.widget ul` is `flex: 1`, so a list stretches to whatever height the author picked. Traffic sources reserved 296px for 168px of rows and left the rest blank. List heights now come from the row count — 48 + 28n, measured against the rendered tile rather than guessed. The fix is eight wide tiles to twelve narrow, ordered so the wide ones land while the columns are level. Found by writing a simulator of the library's own shortest-column placement and searching orderings against it, then confirming the result in a browser — the simulator and the rendered board agree on height to the pixel. 3 columns height 2416 -> 1688, interior holes 676px -> 4px 2 columns height 3580 -> 2552, trailing gap 20px 4 columns height 2000 -> 1264, every column finishes level 185 tests pass, no console errors, no failed requests.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
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.
Two separate kinds of gap, both measured rather than eyeballed.
Between tiles. A tile spanning two columns cannot start until both are free, so one arriving while the columns are uneven strands the shorter column. The board opened with a 296px void under the second KPI for exactly this reason. Worse, it had eleven wide tiles to nine narrow ones, so the third column could never keep up and finished 900px short of its neighbours.
Inside tiles.
.widget ulisflex: 1, so a list stretches to whatever height the author picked. Traffic sources reserved 296px for 168px of rows and left the rest blank. List heights now come from the row count — 48 + 28n, measured against the rendered tile rather than guessed.The fix is eight wide tiles to twelve narrow, ordered so the wide ones land while the columns are level. Found by writing a simulator of the library's own shortest-column placement and searching orderings against it, then confirming the result in a browser — the simulator and the rendered board agree on height to the pixel.
3 columns height 2416 -> 1688, interior holes 676px -> 4px
2 columns height 3580 -> 2552, trailing gap 20px
4 columns height 2000 -> 1264, every column finishes level
185 tests pass, no console errors, no failed requests.
What does this change?
How to see it
Checks
npm testpassesnpm run formatrun on the files I touchednpm run verify:compat, if I changed anything public (builds a real app on Angular 17–22)