From 936b37ab0d2510221a109440657937444bb3f484 Mon Sep 17 00:00:00 2001 From: Waleed Latif Date: Thu, 27 Aug 2026 21:54:01 -0700 Subject: [PATCH] improvement(files): fill the active find match instead of ringing it The Cmd/Ctrl+F active match was drawn as a 1.5px ring in --highlight-match-text. An outline around a run of text traces its line box, so on a heading it read as a stray dark rectangle rather than as emphasis, and a match wrapping across two lines drew two disjoint boxes. The active hit is now a solid --brand-secondary fill with a fixed dark ink, so it stays in the same family as the inactive tint and wraps cleanly. The ink is fixed rather than tokenized because the fill is: --brand-secondary is the same blue in both themes, so a theme-flipping text token would go white on light blue in dark mode. Same pairing the note card's active search mark already uses. --- .../rich-markdown-editor/rich-markdown-editor.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css index 99e30205923..a936b509ffe 100644 --- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css +++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css @@ -587,14 +587,22 @@ } /* Cmd/Ctrl+F match highlights. Every hit carries the same tint the rest of the app - * paints a search match with; the active one is ringed rather than recolored, so the - * two read as one family and neither needs a token that only exists here. */ + * paints a search match with. */ .rich-markdown-nodes .rich-find-match { background-color: var(--highlight-match-bg); color: var(--highlight-match-text); border-radius: 2px; } +/* The active hit is a stronger fill of the same hue, never a ring: an outline drawn + * around a run of text traces the line box, so on a heading it reads as a stray + * rectangle rather than as emphasis. Filling instead keeps the two states one family. + * + * The ink is fixed rather than tokenized because the fill is: `--brand-secondary` is + * the same blue in both themes, so a theme-flipping text token would go white on light + * blue in dark mode. Same reasoning as the note card's active search mark, which pairs + * its solid fill with a fixed dark ink for exactly this reason. */ .rich-markdown-nodes .rich-find-match-active { - box-shadow: 0 0 0 1.5px var(--highlight-match-text); + background-color: var(--brand-secondary); + color: #000; }