coder

mirror of https://github.com/coder/coder.git synced 2026-11-03 05:55:24 +08:00

Files

T

Jeremy Ruppel 7b72f5d86b 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._

2026-08-21 12:58:12 -04:00