From 735af28ddfa9135eeef770666a6f7a12d9f5cdac Mon Sep 17 00:00:00 2001 From: biosxxx Date: Mon, 17 Aug 2026 08:43:06 +0300 Subject: [PATCH] Show related tools as the catalog card, not a look-alike MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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
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 --- src/components/Utilities/UtilityShellPage.tsx | 13 +++-- src/pages/index.module.css | 11 ++++ static/utilities/util-shell.css | 55 ++----------------- 3 files changed, 24 insertions(+), 55 deletions(-) diff --git a/src/components/Utilities/UtilityShellPage.tsx b/src/components/Utilities/UtilityShellPage.tsx index f39f8a7..3cea21a 100644 --- a/src/components/Utilities/UtilityShellPage.tsx +++ b/src/components/Utilities/UtilityShellPage.tsx @@ -17,6 +17,11 @@ import { shouldReportUtilityUsage, } from '@site/src/shared/utility-usage'; import type {UtilityPageConfig} from '@site/src/data/utilityShellPages'; +// Related tools reuse the catalog card from the home page rather than a +// look-alike of their own, so a utility is presented the same way wherever it +// appears — same thumbnail, same tech badge, same localized copy. +import UtilityCard from '@site/src/components/Home/UtilityCard'; +import homeStyles from '@site/src/pages/index.module.css'; import UtilityErrorBoundary from './UtilityErrorBoundary'; import {saveCalculation} from '@site/src/shared/calculation-history'; import { @@ -371,13 +376,9 @@ export default function UtilityShellPage({tool, ...config}: UtilityShellPageProp {relatedUtilities.length > 0 ? (

{t('relatedTools.title')}

-
+
{relatedUtilities.map((related) => ( - - {related.name} - {related.description} - {related.standards} - + ))}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 9ba1cd7..5506984 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -732,6 +732,13 @@ line-height: 1.25; position: relative; z-index: 3; + /* Pinned to the card rather than inherited. Every other line in the card + already sets its own colour; the title used to be the one that took + whatever the surrounding page happened to be using, which is fine on the + home page (its
sets a colour per theme) and wrong anywhere else. + The utility shell is dark-first and hands down a near-white regardless of + theme, so a reused card lost its title on a white background. */ + color: #f3f6ff; } .titleLink { @@ -989,6 +996,10 @@ color: var(--light-text-muted); } +:global(html[data-theme='light']) .utilityCard h3 { + color: #0f172a; +} + :global(html[data-theme='light']) .utilityCard { border-color: var(--card-border); background: #ffffff; diff --git a/static/utilities/util-shell.css b/static/utilities/util-shell.css index aabf9f0..dd3a3b2 100644 --- a/static/utilities/util-shell.css +++ b/static/utilities/util-shell.css @@ -603,55 +603,12 @@ html[data-theme='light'] body.utility-shell-page { margin-bottom: 0.9rem; } -.utility-related__grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); - gap: 0.75rem; -} - -.utility-related__card { - display: flex; - flex-direction: column; - gap: 0.35rem; - padding: 0.85rem 1rem; - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 12px; - background: rgba(255, 255, 255, 0.04); - text-decoration: none; - transition: border-color 0.2s ease, background 0.2s ease; -} - -.utility-related__card:hover { - border-color: rgba(100, 255, 218, 0.45); - background: rgba(100, 255, 218, 0.06); - text-decoration: none; -} - -.utility-related__name { - font-weight: 600; - color: var(--ifm-heading-color, #f5f7ff); -} - -.utility-related__desc { - font-size: 0.8rem; - opacity: 0.75; -} - -.utility-related__meta { - font-size: 0.72rem; - font-family: var(--ifm-font-family-monospace); - opacity: 0.55; -} - -html[data-theme='light'] .utility-related__card { - border-color: rgba(15, 23, 42, 0.12); - background: rgba(15, 23, 42, 0.03); -} - -html[data-theme='light'] .utility-related__card:hover { - border-color: rgba(15, 118, 110, 0.45); - background: rgba(15, 118, 110, 0.05); -} +/* The cards themselves are the home-page catalog card (UtilityCard), so the + grid and card styling live in src/pages/index.module.css. The bespoke + .utility-related__card set that used to live here is gone: its title rule + read `color: var(--ifm-heading-color, #f5f7ff)` and the light-theme override + only restyled the card, so in light mode the names fell back to near-white + on white and were effectively invisible. */ /* Guest notice (issue #112): shown under the tool frame for signed-out visitors when the site setting gates exports behind sign-in. */