diff --git a/apps/web/src/features/recipes/recipes.scss b/apps/web/src/features/recipes/recipes.scss index 3ad0ea0..ed923a0 100644 --- a/apps/web/src/features/recipes/recipes.scss +++ b/apps/web/src/features/recipes/recipes.scss @@ -627,27 +627,11 @@ } } -// The wider clause a `.step-tech-step` keyword was found in (see -// StepDescription.tsx/highlight-tech-steps.ts's `contextStart`/ -// `contextEnd`) — a lighter treatment than the keyword itself (no dotted -// underline, no hover/focus state, no cursor: help: purely visual, not -// interactive, the keyword segment inside/beside it already carries the -// tooltip) so the keyword still reads as the strongest highlight, this -// just shows how much of the sentence it was understood from. The -// original 6% background tint (half the keyword's own 14%) turned out to -// be imperceptible in practice against this dark theme — `--color-primary` -// itself isn't bright/saturated enough for a same-order-of-magnitude -// percentage cut in half to still read as "highlighted" rather than "not -// highlighted at all" — so this pairs a still-subtle 10% background with a -// thin solid bottom border for a second, independent visual cue. -.step-tech-step-context { - display: inline; - padding: 0 0.15em; - margin: 0; - border-radius: 0.2em; - background: color-mix(in srgb, var(--color-primary) 10%, transparent); - border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent); -} +// `.step-tech-step-context` (the wider clause a `.step-tech-step` keyword +// was found in) used to be highlighted here too, more subtly — turned back +// off (see `StepDescription.tsx`'s doc comment): the backend still +// computes and persists `contextStart`/`contextEnd`, this file just no +// longer gives that class any styling to render with. // --- Favorite star toggle (detail panel header) ----------------------------- .favorite-star-button { diff --git a/apps/web/src/features/recipes/steps/StepDescription.tsx b/apps/web/src/features/recipes/steps/StepDescription.tsx index d7f3a77..7e5641e 100644 --- a/apps/web/src/features/recipes/steps/StepDescription.tsx +++ b/apps/web/src/features/recipes/steps/StepDescription.tsx @@ -9,11 +9,17 @@ import { splitDescriptionByTechSteps } from "./highlight-tech-steps"; * matched words highlighted and given a {@link Tooltip} naming the * technique (e.g. hovering/focusing "hacher" in "Hacher les oignons" shows * "Hacher") — `RecipeDetailPanel`'s replacement for a bare `
{description}
`. - * When a match also carries `contextStart`/`contextEnd` (see - * `StepTechStepView`), the wider clause the keyword was found in (e.g. - * "Dans une poêle chaude" around a `preheat` keyword of "poêle chaude") is - * highlighted too, more subtly — no tooltip of its own, the keyword inside - * it already carries one. + * + * A match's wider `contextStart`/`contextEnd` clause (see + * `StepTechStepView`) is deliberately *not* visualized here — only the + * tight keyword span is highlighted. The backend still computes and + * persists it (`tech-step-matcher.ts`/`StepTechStep`), and + * `splitDescriptionByTechSteps` still splits the description around it + * (`isKeyword: false` context segments), but this component now renders + * those non-keyword segments as plain text, same as a segment with no + * technique at all — the visual "wider clause, subtler highlight" + * treatment (`.step-tech-step-context`) turned out to be more visual noise + * than useful signal in practice and was turned back off. * * `techStep.key` resolves its tooltip label through `catalog.techSteps.