From 1c09c3fca6fbe258694264b87cacb78a1b8706bd Mon Sep 17 00:00:00 2001
From: Andrew Aquino <dawneraq@gmail.com>
Date: Mon, 29 Jun 2026 11:38:56 -0700
Subject: [PATCH] fix(site): reduce prerequisites markdown font size (#26776)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closes DEVEX-517
alternative to #26759

This PR is mainly about the type style overrides I added to
`MemoizedMarkdown` in BaseTemplateParametersStep.tsx‎.

I did also shoehorn some other misc styling updates into this PR, but
they're only scoped to template builder so I'll keep it as 1 PR instead
of making a Graphite stack:

- 1b98ac374fc3277c7d667227af14b5efc91becd4: adjusted `StepDivider`'s
left margin which I missed during #26757
- f1eb9210485caf1a3144771c2d2ae437e4821b49: refactored
templates/modules' avatars to use an `AvatarData` component, so that the
text appears to the right of the avatar instead of below it
---
 .../BaseTemplateParametersStep.tsx            | 13 +++++-
 .../TemplateBuilder/ModuleConfiguration.tsx   | 39 ++++-------------
 .../TemplateBuilder/SelectionSummary.tsx      |  2 +-
 .../TemplateBuilderAvatarData.tsx             | 42 +++++++++++++++++++
 .../TemplateBuilder/TemplateBuilderHeader.tsx |  2 +-
 .../TemplateBuilder/TemplateConfiguration.tsx | 37 ++++------------
 6 files changed, 71 insertions(+), 64 deletions(-)
 create mode 100644 site/src/pages/TemplateBuilder/TemplateBuilderAvatarData.tsx

diff --git a/site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx b/site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx
index bef9b4dde6..b5f01f0763 100644
--- a/site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx
+++ b/site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx
@@ -10,6 +10,7 @@ import {
 	TemplateBuilderSubtitle,
 	TemplateBuilderTitle,
 } from "#/pages/TemplateBuilder/TemplateBuilderHeader";
+import { cn } from "#/utils/cn";
 import type { ConfigurationFieldDefinition } from "./ConfigurationField";
 import { TemplateConfiguration } from "./TemplateConfiguration";
 
@@ -120,7 +121,17 @@ export const BaseTemplateParametersStep: FC<
 			>
 				{prerequisites && (
 					<div className="mt-6">
-						<MemoizedMarkdown>{prerequisites}</MemoizedMarkdown>
+						<MemoizedMarkdown
+							className={cn(
+								"text-sm font-normal",
+								"[&_h2]:mt-6 [&_h2]:text-base [&_h2]:font-semibold",
+								"[&_h3]:mt-2 [&_h3]:mb-1 [&_h3]:text-sm [&_h3]:font-semibold",
+								"[&_p]:mb-3 [&_p]:text-content-secondary",
+								"[&_a]:font-normal",
+							)}
+						>
+							{prerequisites}
+						</MemoizedMarkdown>
 					</div>
 				)}
 			</TemplateConfiguration>
diff --git a/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx b/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx
index 14cb1ad2aa..98de5549f2 100644
--- a/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx
@@ -1,7 +1,7 @@
 import { TrashIcon } from "lucide-react";
 import { Button } from "#/components/Button/Button";
 import { CollapsibleSummary } from "#/components/CollapsibleSummary/CollapsibleSummary";
-import { Link } from "#/components/Link/Link";
+import { TemplateBuilderAvatarData } from "#/pages/TemplateBuilder/TemplateBuilderAvatarData";
 import {
 	ConfigurationField,
 	ConfigurationFieldContainer,
@@ -30,36 +30,13 @@ export const ModuleConfiguration: React.FC<ModuleConfigurationProps> = ({
 	return (
 		<section className="pt-4 px-4 pb-6 rounded bg-surface-secondary">
 			<header className="flex items-start gap-6 mb-6">
-				<div className="flex flex-1 items-center gap-3 min-w-0">
-					<figure className="flex items-center justify-center p-1 rounded-md size-10 shrink-0 bg-surface-secondary border border-solid border-border m-0 mb-3">
-						{iconUrl ? (
-							<img
-								src={iconUrl}
-								alt={`${name} icon`}
-								className="size-7 object-contain"
-							/>
-						) : (
-							<div className="size-7 rounded bg-surface-primary" />
-						)}
-					</figure>
-					<div>
-						<h3 className="text-md font-semibold text-content-primary my-0">
-							{name}
-						</h3>
-						<p className="text-sm font-normal text-content-secondary inline">
-							{description}
-						</p>
-						{detailsUrl && (
-							<Link
-								href={detailsUrl}
-								target="_blank"
-								size="sm"
-								className="text-xs font-normal ml-1"
-							>
-								View details
-							</Link>
-						)}
-					</div>
+				<div className="flex-1">
+					<TemplateBuilderAvatarData
+						name={name}
+						description={description}
+						iconUrl={iconUrl}
+						detailsUrl={detailsUrl}
+					/>
 				</div>
 				{onRemove && (
 					<Button
diff --git a/site/src/pages/TemplateBuilder/SelectionSummary.tsx b/site/src/pages/TemplateBuilder/SelectionSummary.tsx
index 50a1cadfb9..63a235a6a5 100644
--- a/site/src/pages/TemplateBuilder/SelectionSummary.tsx
+++ b/site/src/pages/TemplateBuilder/SelectionSummary.tsx
@@ -107,7 +107,7 @@ const StepIndicator: React.FC<StepIndicatorProps> = ({ step, children }) => {
 };
 
 const stepDividerVariants = cva(
-	"border-0 border-l border-solid mx-4 -translate-x-px",
+	"border-0 border-l border-solid mx-3 -translate-x-px",
 	{
 		variants: {
 			variant: {
diff --git a/site/src/pages/TemplateBuilder/TemplateBuilderAvatarData.tsx b/site/src/pages/TemplateBuilder/TemplateBuilderAvatarData.tsx
new file mode 100644
index 0000000000..7ac2cdd451
--- /dev/null
+++ b/site/src/pages/TemplateBuilder/TemplateBuilderAvatarData.tsx
@@ -0,0 +1,42 @@
+import type { FC, PropsWithChildren } from "react";
+import { Avatar } from "#/components/Avatar/Avatar";
+import { AvatarData } from "#/components/Avatar/AvatarData";
+import { Link } from "#/components/Link/Link";
+
+type TemplateBuilderAvatarDataProps = PropsWithChildren<{
+	name: string;
+	description: string;
+	iconUrl?: string;
+	detailsUrl?: string;
+}>;
+
+export const TemplateBuilderAvatarData: FC<TemplateBuilderAvatarDataProps> = ({
+	name,
+	description,
+	iconUrl,
+	detailsUrl,
+}) => {
+	return (
+		<AvatarData
+			avatar={<Avatar src={iconUrl} size="lg" />}
+			title={<h3 className="m-0 text-xl font-semibold">{name}</h3>}
+			subtitle={
+				<>
+					<p className="text-xs font-normal text-content-secondary inline">
+						{description}
+					</p>
+					{detailsUrl && (
+						<Link
+							href={detailsUrl}
+							target="_blank"
+							size="sm"
+							className="text-xs font-normal ml-1"
+						>
+							View details
+						</Link>
+					)}
+				</>
+			}
+		/>
+	);
+};
diff --git a/site/src/pages/TemplateBuilder/TemplateBuilderHeader.tsx b/site/src/pages/TemplateBuilder/TemplateBuilderHeader.tsx
index 81f1ebd03b..d5f16235bd 100644
--- a/site/src/pages/TemplateBuilder/TemplateBuilderHeader.tsx
+++ b/site/src/pages/TemplateBuilder/TemplateBuilderHeader.tsx
@@ -1,7 +1,7 @@
 import type { FC, PropsWithChildren } from "react";
 
 export const TemplateBuilderTitle: FC<PropsWithChildren> = ({ children }) => {
-	return <h2 className="mt-0 text-xl font-semibold mb-1">{children}</h2>;
+	return <h2 className="mt-0 text-2xl font-semibold mb-1">{children}</h2>;
 };
 
 export const TemplateBuilderSubtitle: FC<PropsWithChildren> = ({
diff --git a/site/src/pages/TemplateBuilder/TemplateConfiguration.tsx b/site/src/pages/TemplateBuilder/TemplateConfiguration.tsx
index 36b0d1e8ca..a18924f448 100644
--- a/site/src/pages/TemplateBuilder/TemplateConfiguration.tsx
+++ b/site/src/pages/TemplateBuilder/TemplateConfiguration.tsx
@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from "react";
-import { Link } from "#/components/Link/Link";
+import { TemplateBuilderAvatarData } from "#/pages/TemplateBuilder/TemplateBuilderAvatarData";
 import {
 	ConfigurationField,
 	ConfigurationFieldContainer,
@@ -25,35 +25,12 @@ export const TemplateConfiguration: React.FC<TemplateConfigurationProps> = ({
 	return (
 		<section className="pt-4 px-4 pb-6 rounded bg-surface-secondary">
 			<header className="mb-6">
-				<figure className="flex items-center justify-center p-1 rounded-md size-10 shrink-0 bg-surface-secondary border border-solid border-border m-0 mb-3">
-					{iconUrl ? (
-						<img
-							src={iconUrl}
-							alt={`${name} icon`}
-							className="size-7 object-contain"
-						/>
-					) : (
-						<div className="size-7 rounded bg-surface-primary" />
-					)}
-				</figure>
-				<div>
-					<h3 className="mb-0 text-sm font-semibold text-content-primary">
-						{name}
-					</h3>
-					<p className="text-xs font-normal text-content-secondary inline">
-						{description}
-					</p>
-					{detailsUrl && (
-						<Link
-							href={detailsUrl}
-							target="_blank"
-							size="sm"
-							className="text-xs font-normal ml-1"
-						>
-							View details
-						</Link>
-					)}
-				</div>
+				<TemplateBuilderAvatarData
+					name={name}
+					description={description}
+					iconUrl={iconUrl}
+					detailsUrl={detailsUrl}
+				/>
 			</header>
 
 			{fields && fields.length > 0 && (