feat(compare): PR3 — grid-of-lanes with labelled pills and mobile cards [clean]#34
Merged
Conversation
Replace the fragile <table> + single shared detail with a CSS-grid pseudo-table of independently-expandable capability lanes. - Verdict pills (Yes / Limited / No) replace the ambiguous circular marks; colourblind-safe via distinct text + border-style, not hue. - Every lane shows an always-visible one-line takeaway, so rows have identity before any click; each lane expands its own deep-dive (multi-open accordion via an animated grid-rows disclosure). - The Coven column is one continuous highlighted "best fit" rail. - At <=720px the matrix reflows into real stacked capability cards (option labels become visible, Coven row tinted) — not a shrunk table. - Keeps the arrow-key nav; frame uses the shared .panel; focus ring unified via --oc-focus-ring. Note: the disclosure rule keys off the external .js-on class, which Astro would otherwise scope to the component — wrapped in :global(.js-on) so it matches <html>. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
Refactors the landing page “Compare” section from a single-selected <table> to a CSS-grid “lanes” layout where each capability can expand independently, with labeled Yes/Limited/No pills and a stacked-card mobile presentation.
Changes:
- Replaces the table-based comparison matrix with a CSS grid “pseudo-table” composed of independently expandable lanes.
- Introduces per-lane always-visible takeaways and labeled verdict pills (Yes/Limited/No), including a highlighted Coven “rail” column.
- Updates client-side behavior to manage independent expand/collapse plus keyboard navigation across lane toggles.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+132
to
136
| function setOpen(btn, open) { | ||
| const detail = document.getElementById(btn.getAttribute('aria-controls')); | ||
| btn.setAttribute('aria-expanded', open ? 'true' : 'false'); | ||
| if (detail) detail.classList.toggle('is-open', open); | ||
| } |
Comment on lines
+106
to
+109
| <div class:list={["cmp-cell", { "is-coven": c.highlight }]}> | ||
| <span class="cmp-opt">{c.label}</span> | ||
| <span class={`cmp-pill is-${v}`} aria-label={`${c.label} — ${verdict[v]}`}>{verdict[v]}</span> | ||
| </div> |
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
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.
Replaces the fragile table with a CSS-grid of independently-expandable lanes: labelled Yes/Limited/No pills (colourblind-safe), always-visible takeaways, a continuous Coven rail, and a real stacked-card mobile layout. Stacked on the quickstart PR.
Clean re-cut of the section overhaul: a concurrent session had interleaved two commits (px→rem conversion, multi-screen support) into the original stack (#26–#31). Rebuilt in an isolated worktree with only my six signed commits. Supersedes the original PR.
🤖 Generated with Claude Code