From 6b22383823d641d3089e0eac7e258416456ec2ad Mon Sep 17 00:00:00 2001
From: Jeremy Ruppel <jeremyruppel@users.noreply.github.com>
Date: Wed, 22 Jul 2026 17:05:29 -0400
Subject: [PATCH] fix(site/src/pages/TemplateBuilder): show all step content
 without inner scroll (#27437)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

The Template Builder steps clipped their content to an inner scrollbar
via
`max-h-[calc(...)]` + `overflow-y-auto`, so the base picker showed fewer
than
three rows before requiring scroll. This removes those wrappers from all
four
steps so every base/module renders and the page scrolls naturally.

Resolves DEVEX-585.

## Changes

- `BaseInfraSelectStep.tsx` — base picker grid (3-col grid retained)
- `ModuleSelectStep.tsx` — module picker grid
- `ModuleSettingsStep.tsx` — module variables list
- `BaseTemplateParametersStep.tsx` — base config; unwrapped the
now-styleless
  wrapper `div` into the fragment

The sticky sidebar summary (`SelectionSummary.tsx`) is intentionally
left as-is;
it is not a wizard step.

### Tradeoff

With the inner scroll removed, the Back/Continue controls sit below the
full
grid, so reaching them requires page scroll when a list is long. This
matches
the requested "just show all of em" behavior.


https://github.com/user-attachments/assets/7e371850-7b97-42c7-b92c-5ac00a3e7979

<details>
<summary>Implementation plan</summary>

# DEVEX-585: Show more base templates before requiring scroll

## Problem
The base template picker on the Template Builder feels too narrow: it
clips to
fewer than three rows before an inner scrollbar appears.

## Root cause
The step grids were wrapped in `max-h-[calc(100vh-420px)]
overflow-y-auto`
(and `340px` variants), constraining height so only a couple of rows
showed
before an inner scrollbar clipped the rest.

## Approach (chosen: remove inner scroll)
Show all content and let the page scroll naturally by removing the
height/scroll utilities (and stale comments) from each step's container.
Applied to the base picker, base parameters, module picker, and module
settings steps.

## Testing / verification
- Biome check passes on all edited files; LSP reports no diagnostics.
- Visual: each step renders all content with no inner scrollbar; the
page
  scrolls if the list is long.

## Out of scope
- The sidebar summary scroll (`SelectionSummary.tsx`) is not a wizard
step.
- Auto-filling customization fields (separate work, PR #27272).

</details>

---

This PR was generated by Coder Agents on behalf of @jeremyruppel.
---
 .../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 c7744c6ff3..5d4a2b48d8 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 3b0e63f0e9..ca7b2266ad 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 7c46eb416a..a5a04e1234 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 eb89be0810..a156884adb 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);