From d2ebbc1e6c156fe9344044db27cbce4ccb052796 Mon Sep 17 00:00:00 2001
From: Jeremy Ruppel <jeremy.ruppel@gmail.com>
Date: Wed, 22 Jul 2026 20:47:19 +0000
Subject: [PATCH] fix(site/src/pages/TemplateBuilder): show all step content
 without inner scroll

Remove the max-height and overflow-y-auto wrappers from the base picker, base parameters, module picker, and module settings steps so all content renders and the page scrolls naturally instead of clipping to an inner scrollbar.
---
 .../TemplateBuilder/BaseInfraSelectStep.tsx   |  3 +-
 .../BaseTemplateParametersStep.tsx            | 49 +++++++++----------
 .../TemplateBuilder/ModuleSelectStep.tsx      |  3 +-
 .../TemplateBuilder/ModuleSettingsStep.tsx    |  3 +-
 4 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/site/src/pages/TemplateBuilder/BaseInfraSelectStep.tsx b/site/src/pages/TemplateBuilder/BaseInfraSelectStep.tsx
index c7744c6ff39..5d4a2b48d8b 100644
--- a/site/src/pages/TemplateBuilder/BaseInfraSelectStep.tsx
+++ b/site/src/pages/TemplateBuilder/BaseInfraSelectStep.tsx
@@ -42,8 +42,7 @@ export const BaseInfraSelectStep: FC<BaseInfraSelectStepProps> = ({
 				Select your infrastructure foundation.
 			</TemplateBuilderSubtitle>
 
-			{/* 420px accounts for navbar, page header, card padding, tab bar, and nav controls */}
-			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 max-h-[calc(100vh-420px)] overflow-y-auto">
+			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
 				{bases.map((base) => (
 					<TemplateCard
 						key={base.id}
diff --git a/site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx b/site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx
index 3b0e63f0e92..ca7b2266adc 100644
--- a/site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx
+++ b/site/src/pages/TemplateBuilder/BaseTemplateParametersStep.tsx
@@ -123,32 +123,29 @@ export const BaseTemplateParametersStep: FC<
 				Your base template requires customizations.
 			</TemplateBuilderSubtitle>
 
-			{/* 340px accounts for navbar, page header, card padding, and nav controls */}
-			<div className="max-h-[calc(100vh-340px)] overflow-y-auto">
-				<TemplateConfiguration
-					name={base?.name ?? "Base Template"}
-					description={base?.description ?? ""}
-					iconUrl={base?.icon}
-					detailsUrl={detailsUrl(baseId)}
-					fields={fields}
-				>
-					{prerequisites && (
-						<div className="mt-6">
-							<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>
-			</div>
+			<TemplateConfiguration
+				name={base?.name ?? "Base Template"}
+				description={base?.description ?? ""}
+				iconUrl={base?.icon}
+				detailsUrl={detailsUrl(baseId)}
+				fields={fields}
+			>
+				{prerequisites && (
+					<div className="mt-6">
+						<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/ModuleSelectStep.tsx b/site/src/pages/TemplateBuilder/ModuleSelectStep.tsx
index 7c46eb416a0..a5a04e12349 100644
--- a/site/src/pages/TemplateBuilder/ModuleSelectStep.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleSelectStep.tsx
@@ -244,8 +244,7 @@ export const ModuleSelectStep: FC<ModuleSelectStepProps> = ({
 				</TabsList>
 			</Tabs>
 
-			{/* 420px accounts for navbar, page header, card padding, search, tabs, and nav controls */}
-			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 max-h-[calc(100vh-420px)] overflow-y-auto">
+			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
 				{visibleModules.length ? (
 					visibleModules.map((m) => (
 						<ModuleCard
diff --git a/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx b/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx
index eb89be0810a..a156884adbf 100644
--- a/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx
@@ -129,8 +129,7 @@ export const ModuleSettingsStep: FC<ModuleSettingsStepProps> = ({
 				Set values for module variables.
 			</TemplateBuilderSubtitle>
 
-			{/* 340px accounts for navbar, page header, card padding, and nav controls */}
-			<div className="flex flex-col gap-6 max-h-[calc(100vh-340px)] overflow-y-auto">
+			<div className="flex flex-col gap-6">
 				{selectedModules.map((mod) => {
 					const configurableVars = mod.variables.filter((v) => !v.sensitive);
 					const sensitiveVars = mod.variables.filter((v) => v.sensitive);