fix(site): enable sticky positioning inside #main-content (#26907)

aqandrew · jeremyruppel · web-flow · commit 2ab3d1010f53 · 2026-07-01T15:41:18.000-07:00
ref DEVEX-567 Fixes a bug I noticed where #26881 claims to have made the template builder's `SelectionSummary` sidebar sticky-positioned, but the sidebar position wasn't actually sticky in practice: ## template builder's `SelectionSummary` (top right) ### before https://github.com/user-attachments/assets/1e9360b5-4b0e-45b4-a859-f8edab51add7 ### after https://github.com/user-attachments/assets/3cee75e9-9813-401e-9922-d2563185f8f5 --- Why I removed `overflow-y-auto` from `#main-content`: >`position: sticky` resolves against the nearest ancestor scroll container — any ancestor whose overflow is not visible. `#main-content` had `overflow-y-auto`, so it _was_ that container for the sidebar. But because the layout wrapper is `min-h-screen`, `<main>` grows to fit its content and never actually scrolls — the window scrolls. So the sidebar was pinning relative to a container that never moves → no effect. That was necessary for the main goal of this PR, which was to fix sticky positioning for the template builder's `SelectionSummary` sidebar. However, removing that style from `#main-content` affected 2 other sticky-positioned elements within the site: >Two other pages have sticky elements that, like our sidebar, were resolving against the non-scrolling `<main>` and were therefore effectively inert: >- CreateWorkspacePageView.tsx:397 — `sticky top-5` side panel >- modules/templates/TemplateFiles/TemplateFiles.tsx:64 — `sticky top-8` file tree ^Like `SelectionSummary`, these 2 elements hadn't been behaving with sticky positioning as expected; they would just scroll away past the top of the screen. For all 3 of these sticky elements, since their `top` is now relative to the window instead of `#main-content`, they have to be positioned farther downward so that they don't get covered by the navbar. ## `TemplateFiles`' `TemplateFileTree` (top left) ### before https://github.com/user-attachments/assets/ee79ea36-1a47-4b1b-86ef-c65b493ea455 ### after https://github.com/user-attachments/assets/a1b0a949-b5e3-4434-acaa-ab24e82b1669 ## `CreateWorkspacePageView`'s "Go back" button (top left) ### before https://github.com/user-attachments/assets/00b076f6-8e55-4a96-8b92-d33d92c85334 ### after https://github.com/user-attachments/assets/10ae05e1-3112-4dfc-84b4-2c44fee23e06 co-authored with Claude Code --------- Co-authored-by: Jeremy Ruppel <jeremyruppel@users.noreply.github.com>
diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx
@@ -99,7 +99,7 @@ export const FormSection: FC<FormSectionProps> = ({
 		>
 			<div
 				className={cn(
-					"w-full shrink-0 top-6",
+					"w-full shrink-0 top-24",
 					direction === "horizontal" && "lg:sticky lg:max-w-[312px]",
 					classes.sectionInfo,
 				)}
diff --git a/site/src/modules/dashboard/DashboardLayout.tsx b/site/src/modules/dashboard/DashboardLayout.tsx
@@ -43,7 +43,7 @@ export const DashboardLayout: FC = () => {
 					id="main-content"
 					tabIndex={-1}
 					className={cn(
-						"relative flex flex-col flex-1 min-h-0 overflow-y-auto",
+						"relative flex flex-col flex-1 min-h-0",
 						"focus:outline-none",
 					)}
 				>
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
@@ -61,7 +61,8 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 	return (
 		<div>
 			<div className="flex items-start gap-8">
-				<div className="sticky top-8 w-[240px] shrink-0 overflow-auto rounded-lg border border-solid border-surface-quaternary py-1">
+				{/* top-28 (112px) is a sum of nav height (72px) and TemplateLayout's LinkTabs' mb-10 (40px) */}
+				<div className="sticky top-28 w-[240px] shrink-0 overflow-auto rounded-lg border border-solid border-surface-quaternary py-1">
 					<TemplateFileTree
 						fileTree={fileTree}
 						onSelect={(path: string) => {
diff --git a/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx b/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
@@ -65,7 +65,7 @@ export const StarterTemplates: FC<StarterTemplatesProps> = ({
 	return (
 		<div className="flex flex-row gap-8 items-start">
 			{starterTemplatesByTag && tags && (
-				<div className="flex flex-col gap-4 w-[202px] shrink-0 sticky">
+				<div className="flex flex-col gap-4 w-[202px] shrink-0 sticky top-[88px]">
 					<h2 className="m-0 text-base font-normal text-content-primary">
 						Choose a starter template
 					</h2>
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -398,7 +398,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 				<button
 					onClick={onCancel}
 					type="button"
-					className="flex items-center gap-2 bg-transparent border-none text-content-secondary hover:text-content-primary translate-y-12"
+					className="flex items-center gap-2 bg-transparent border-none text-content-secondary hover:text-content-primary translate-y-[68px]"
 				>
 					<ArrowLeftIcon size={20} />
 					Go back
diff --git a/site/src/pages/TemplateBuilder/TemplateBuilderPageView.tsx b/site/src/pages/TemplateBuilder/TemplateBuilderPageView.tsx
@@ -182,8 +182,8 @@ export const TemplateBuilderPageView: FC<TemplateBuilderPageViewProps> = ({
 					{currentStep.id === "base-infra" && <TemplateAlternatives />}
 				</div>
 
-				{/* Sidebar */}
-				<div className="w-64 shrink-0 hidden md:block sticky top-0 self-start">
+				{/* Sidebar (top position is 72px so that it can sit below nav) */}
+				<div className="w-64 shrink-0 hidden md:block sticky top-[72px] self-start">
 					<SelectionSummary
 						currentStep={currentStep.group}
 						selectedTemplate={

Original file line number	Diff line number	Diff line change
`@@ -99,7 +99,7 @@ export const FormSection: FC<FormSectionProps> = ({`
`99`	`99`	`>`
`100`	`100`	`<div`
`101`	`101`	`className={cn(`
`102`		`- "w-full shrink-0 top-6",`
	`102`	`+ "w-full shrink-0 top-24",`
`103`	`103`	`direction === "horizontal" && "lg:sticky lg:max-w-[312px]",`
`104`	`104`	`classes.sectionInfo,`
`105`	`105`	`)}`
Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ export const DashboardLayout: FC = () => {`
`43`	`43`	`id="main-content"`
`44`	`44`	`tabIndex={-1}`
`45`	`45`	`className={cn(`
`46`		`- "relative flex flex-col flex-1 min-h-0 overflow-y-auto",`
	`46`	`+ "relative flex flex-col flex-1 min-h-0",`
`47`	`47`	`"focus:outline-none",`
`48`	`48`	`)}`
`49`	`49`	`>`
Original file line number	Diff line number	Diff line change
`@@ -398,7 +398,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({`
`398`	`398`	`<button`
`399`	`399`	`onClick={onCancel}`
`400`	`400`	`type="button"`
`401`		`- className="flex items-center gap-2 bg-transparent border-none text-content-secondary hover:text-content-primary translate-y-12"`
	`401`	`+ className="flex items-center gap-2 bg-transparent border-none text-content-secondary hover:text-content-primary translate-y-[68px]"`
`402`	`402`	`>`
`403`	`403`	`<ArrowLeftIcon size={20} />`
`404`	`404`	`Go back`