From 7b72f5d86b6319611a0f805524890ffbd06b5adc Mon Sep 17 00:00:00 2001 From: Jeremy Ruppel Date: Fri, 21 Aug 2026 12:58:12 -0400 Subject: [PATCH] fix(site/src/pages): keep TemplateCard official badge inline under preflight (#28433) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary In the Template Builder base template select grid, each base template card's "official" checkmark badge was rendering below the card title (`h3`) instead of inline and vertically centered with it. ## Root cause Tailwind preflight was enabled in #27821 (removed `corePlugins: { preflight: false }`), which applies `svg { display: block }`. The badge relied on `align-middle`, which is a no-op on block-level elements, so the icon dropped onto its own line. The same badge in `ModuleCard` was patched in #27821 with `inline-block`, but the identical badge in `TemplateCard` was missed. ## Fix - `TemplateCard.tsx`: add `inline-block` to the badge so it flows inline within the title's text (trailing the last word and wrapping naturally), with `align-middle` handling vertical centering. This matches the existing `ModuleCard` pattern. - `Response.tsx`: update a stale comment that referenced preflight being disabled. ## Verification - `biome check` passes on both files. - Confirmed via a repo-wide sweep that no other inline icon layouts regressed from the preflight change (all other icon-next-to-text usages are protected by flex/inline-flex containers, `asChild` class merging, or are sole children). Screenshot 2026-08-21 at 12 02 47 PM
Investigation notes Timeline: - Preflight was explicitly disabled via `corePlugins: { preflight: false }`. - The official badge (#26806, #27036, #27797) worked because the lucide SVG rendered inline while preflight was off. - #27821 ("refactor: remove MUI and Emotion") removed the `corePlugins.preflight: false` block, enabling preflight and its `svg { display: block }` rule. It patched `ModuleCard` with `inline-block` but missed `TemplateCard`. A read-only sweep across `site/src` found no additional broken inline-icon layouts. Candidates like `DERPRegionPage` (icon inside an `inline-flex` `Link`) and `TemplateCustomizationsStep` `BaseTemplateCard` (intended vertical layout) are safe.
--- _This PR was generated by Coder Agents on behalf of @jeremyruppel._ --- .../src/pages/AgentsPage/components/ChatElements/Response.tsx | 4 ++-- site/src/pages/TemplateBuilder/TemplateCard.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/site/src/pages/AgentsPage/components/ChatElements/Response.tsx b/site/src/pages/AgentsPage/components/ChatElements/Response.tsx index ddf932b0379..1a43edc7e66 100644 --- a/site/src/pages/AgentsPage/components/ChatElements/Response.tsx +++ b/site/src/pages/AgentsPage/components/ChatElements/Response.tsx @@ -193,8 +193,8 @@ const createComponents = ( img: ({ src, alt }: MarkdownComponentProps) => ( ), - // Horizontal rule: reset browser default inset/ridge border - // (preflight is disabled) to a clean 1px solid line. + // Horizontal rule: render a clean 1px solid line using theme + // tokens instead of the default border. hr: () => (
), diff --git a/site/src/pages/TemplateBuilder/TemplateCard.tsx b/site/src/pages/TemplateBuilder/TemplateCard.tsx index 6a987e2e47b..91c35e2759f 100644 --- a/site/src/pages/TemplateBuilder/TemplateCard.tsx +++ b/site/src/pages/TemplateBuilder/TemplateCard.tsx @@ -66,7 +66,7 @@ export const TemplateCard: React.FC = ({ {official && ( <> {" "} - + )}