mirror of
https://github.com/coder/coder.git
synced 2026-10-31 11:02:50 +08:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user