fix(site/src/pages): keep TemplateCard official badge inline under preflight (#28433)

## 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).

<img width="1083" height="626" alt="Screenshot 2026-08-21 at 12 02
47 PM"
src="https://github.com/user-attachments/assets/2183dbf4-1f4f-4aae-92cf-21c11efebc5e"
/>

<details>
<summary>Investigation notes</summary>

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.

</details>

---
_This PR was generated by Coder Agents on behalf of @jeremyruppel._
This commit is contained in:
Jeremy Ruppel
2026-08-21 12:58:12 -04:00
committed by GitHub
parent ee87ad6521
commit 7b72f5d86b
2 changed files with 3 additions and 3 deletions
@@ -193,8 +193,8 @@ const createComponents = (
img: ({ src, alt }: MarkdownComponentProps) => (
<MarkdownImage src={src} alt={alt} />
),
// 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: () => (
<hr className="my-6 border-0 border-t border-solid border-border-default" />
),
@@ -66,7 +66,7 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
{official && (
<>
{" "}
<BadgeCheckIcon className="size-4 text-highlight-sky align-middle" />
<BadgeCheckIcon className="size-4 text-highlight-sky align-middle inline-block" />
</>
)}
</h3>