From 2ab3d1010f5356cb10d0a706aaa8bbdc269bee71 Mon Sep 17 00:00:00 2001 From: Andrew Aquino Date: Wed, 1 Jul 2026 15:41:18 -0700 Subject: [PATCH] fix(site): enable sticky positioning inside `#main-content` (#26907) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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`, `
` 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 `
` 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 --- site/src/components/Form/Form.tsx | 2 +- site/src/modules/dashboard/DashboardLayout.tsx | 2 +- site/src/modules/templates/TemplateFiles/TemplateFiles.tsx | 3 ++- site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx | 2 +- .../src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx | 2 +- site/src/pages/TemplateBuilder/TemplateBuilderPageView.tsx | 4 ++-- 6 files changed, 8 insertions(+), 7 deletions(-) diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx index 5b4d4d3343..ebfab3b4a6 100644 --- a/site/src/components/Form/Form.tsx +++ b/site/src/components/Form/Form.tsx @@ -99,7 +99,7 @@ export const FormSection: 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 index f5827e29f9..b7291ab255 100644 --- a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx +++ b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx @@ -61,7 +61,8 @@ export const TemplateFiles: FC = ({ return (
-
+ {/* top-28 (112px) is a sum of nav height (72px) and TemplateLayout's LinkTabs' mb-10 (40px) */} +
{ diff --git a/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx b/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx index 7d2295b5b7..3608fc95f0 100644 --- a/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx +++ b/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx @@ -65,7 +65,7 @@ export const StarterTemplates: FC = ({ return (
{starterTemplatesByTag && tags && ( -
+

Choose a starter template

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index d55179221b..ee75928c44 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -398,7 +398,7 @@ export const CreateWorkspacePageView: FC = ({
- {/* Sidebar */} -
+ {/* Sidebar (top position is 72px so that it can sit below nav) */} +