Fix landing card bars, alignment, and terminology - #174
Merged
Conversation
Two things were wrong on the landing cards. The bars were scaled against the widest card's denominator rather than their own, so Ruby LSP's 9 of 9 rendered at 56% -- 9/16, the TypeScript server's population -- and read as a 56% score. Each bar is now a share of its own card's shared denominator. Cross-card bar lengths were never a valid comparison anyway: rivals answer different populations, from 5 shared cases for gopls to 16 for the TypeScript server, and the project's own guardrail is that those denominators are not interchangeable. The cards also came out at two different heights. Two causes, both measured rather than guessed. The rival's name sat in a fixed 5.5rem label column, so the longer ones wrapped to a second line; the two bar rows now share one grid, whose label column sizes to the longer of the pair and never wraps. And Starlight's markdown flow puts a top margin on every sibling after the first, which left the first card a different height from the rest inside the grid -- the grid's gap owns that spacing now. While in there, the per-card breakdown moves from a sentence to three fixed slots, so it is the same height on every card and scannable down a column, and the third label reads "Rival only" rather than repeating a server name that the card title and its own bar row already carry, which was being truncated mid-phrase. Verified in a browser against the real published scores: all ten cards 206px by 350px with no truncated labels, bars at 100%/22.2% for 9 of 9 against 2 of 9, and the checked-in placeholder still renders the no-result state. astro check clean, links:check 22 routes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The three-slot breakdown at the foot of each card was misaligned: the first column's label and number sat 16px above its neighbours, and its column was 16px taller. Same cause as the uneven card heights fixed a commit ago -- Starlight's markdown flow puts a top margin on every sibling after the first, so columns two and three were pushed down while column one was not. Measured as margins of 0px, 16px, 16px across the three. Every grid in this component owns its spacing through gap, so the reset now covers the cards, the breakdown columns, and the bar rows rather than only the cards. Also drop "rival" for "reference". That was my coinage; the project already has a word for this and uses it everywhere else. The generated result page's own column heading is "Reference only", the registry calls these reference profiles, and the evidence map speaks of reference-found counts. The landing page now matches its own source tables, and it reads less like a scoreboard against opponents and more like what it is -- a comparison against established implementations, on cases both sides answer. Fixes a swallowed space that rendered "in7 of 10 comparisons". Verified in a browser against the real published scores: no card has a misaligned breakdown row, all ten are 190px by 332px, labels read Both exact, Bifrost only, Reference only, and no label truncates. Placeholder still renders the no-result state; astro check clean, links:check 22 routes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
DavidBakerEffendi
changed the title
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.
Follow-up to #173 on two reported nits.
The bars were lying
Ruby LSP's
9/9rendered at 56% width. The bars were scaled against thewidest card's denominator (16, the TypeScript server) rather than their own, so
a perfect 9 of 9 drew as 9/16 and read as a 56% score.
Each bar is now a share of its own card's
shareddenominator:9/9is full,2/9is 22.2%,8/10is 80%.Cross-card bar lengths were never a valid comparison anyway — rivals answer
different populations, from 5 shared cases for gopls to 16 for the TypeScript
server — and the project's own guardrail is that those denominators are not
interchangeable. Per-card scaling now prevents that false read rather than
inviting it.
Uneven card heights
Two causes, both measured in the browser rather than guessed at:
5.5remlabel column, so "Eclipse JDT LS","TypeScript LS" and "rust-analyzer" wrapped to a second line. The two bar
rows now share one grid, whose label column sizes to the longer of the pair
and never wraps.
margin: 16px 0 0on every sibling after thefirst, so the first card was a different height from the rest inside the
grid. The grid's own
gapowns that spacing now.Also swapped the per-card breakdown from a prose sentence to three fixed slots
— same height on every card, scannable down a column — and the third label
reads "Rival only" instead of repeating a server name the card title and bar
row already carry, which was truncating mid-phrase to "Eclipse JDT LS …".
Verified
In a browser against the real published scores, at 800px and 1400px:
100%/22.2%for Ruby LSP's 9 of 9 against 2 of 9astro checkclean,links:check22 routes🤖 Generated with Claude Code