Show related tools as the catalog card, not a look-alike - #169
Merged
Conversation
The "Related tools" strip on a utility page had its own card markup and its own CSS: a name, a description, a standards line, no thumbnail. A utility therefore looked like one thing in the catalog and another thing when cross-linked, and the strip quietly missed the localized copy — it rendered utility.name and utility.description straight from the data file, while the catalog card runs them through tu(). Non-English visitors got English titles there. Reuses the home page UtilityCard instead, laid out on the same .utilityGrid, so there is one card and one grid to maintain. The strip now carries the thumbnail and the tech badge as well, and picks up translations for free. The bespoke .utility-related__card block is deleted. That also removes a light-theme bug visible in the screenshot that prompted this: the name rule was `color: var(--ifm-heading-color, #f5f7ff)` and the light-theme override only restyled the card, so the fallback painted the titles near-white on white. Moving the card exposed a second version of the same fault, this time in the card itself. `.titleLink` is `color: inherit`, and the title was the only line in the card without a colour of its own — every other line already sets one. That works on the home page, whose <main> sets a colour per theme, and breaks anywhere else: the utility shell is dark-first and hands down a near-white regardless of theme, so the reused card lost its title on a white card. Pinned the title to the card with the values the home page was already producing, so the card no longer depends on where it is dropped. Verified against the production build in both themes, on both pages, with the transitions forced to settle: HOME light card #ffffff title rgb(15, 23, 42) HOME dark card rgba(5, 7, 19, .6) title rgb(243, 246, 255) SHELL light card #ffffff title rgb(15, 23, 42) (was 245, 247, 255) SHELL dark card rgba(5, 7, 19, .6) title rgb(243, 246, 255) The two home-page rows are identical to what they measured before this change, so the catalog is untouched. Three cards render in the strip, each with its thumbnail. typecheck, lint and a six-locale build pass. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
YurMil
added a commit
that referenced
this pull request
Aug 17, 2026
No dependabot alerts remain open. What is left in the runbook is now exactly the work that needs Supabase project access, which is worth saying explicitly so the next reader does not re-audit the closed items. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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 "Related tools" strip on a utility page had its own card markup and its own CSS — a name, a description, a standards line, no thumbnail. A utility looked like one thing in the catalog and a different thing when cross-linked from another tool.
It also quietly lost translations: the strip rendered
utility.name/utility.descriptionstraight from the data file, while the catalog card puts them throughtu(). Non-English visitors saw English titles there.Change
Reuses the home page
UtilityCardon the same.utilityGrid, so there is one card and one grid to maintain. The strip now shows the thumbnail and the tech badge too, and picks up localized copy for free.Two versions of the same bug, both fixed
The one in the screenshot. The deleted
.utility-related__namerule readcolor: var(--ifm-heading-color, #f5f7ff), and the light-theme block only restyled the card — so the fallback painted titles near-white on white.The one moving the card exposed.
.titleLinkiscolor: inherit, and the title was the only line in the card without a colour of its own; every other line already sets one. That works on the home page, whose<main>sets a colour per theme, and breaks anywhere else — the utility shell is dark-first and hands down a near-white regardless of theme. The title is now pinned to the card, using the values the home page was already producing, so the card no longer depends on where it is dropped.Verification
Against the production build, both themes, both pages, with transitions forced to settle:
#ffffffrgb(15, 23, 42)rgba(5, 7, 19, .6)rgb(243, 246, 255)#ffffffrgb(15, 23, 42)— wasrgb(245, 247, 255)rgba(5, 7, 19, .6)rgb(243, 246, 255)The two home-page rows match what they measured before this change, so the catalog is untouched. Three cards render in the strip, each with its thumbnail.
pnpm typecheck, eslint on the changed file, and a six-localepnpm buildall pass.One note on method: the local preview tab stopped painting partway through, which froze
.titleLink's 0.25s colour transition mid-flight and madegetComputedStylereport a stale value. The numbers above were taken after calling.finish()on the pending animations. Screenshots from that tab came out blank, so this was verified through computed styles rather than visually — worth a glance on the Vercel preview.🤖 Generated with Claude Code