From 4f98fa1e03ee8a9ce4af2497aca52426afbe072a Mon Sep 17 00:00:00 2001
From: Andrew Aquino <dawneraq@gmail.com>
Date: Mon, 6 Jul 2026 15:16:51 -0700
Subject: [PATCH] fix(site/src/pages/OrganizationSettingsPage): enable sticky
 positioning for horizontal form sections (#26949)

Followup to #26907, which re-enabled sticky positioning within
`#main-content` throughout the site. From
https://github.com/coder/coder/pull/26907#issuecomment-4860536495:

>Updating [`HorizontalSection` in OrganizationSettingsPageView.tsx]'s
sticky styles will be a little more involved, so I'll save that for a
separate PR.

## before

Note that I inflated this section's height to 1000px in DevTools to be
able to demo sticky positioning not working. This page isn't tall enough
at the moment for the lack of sticky positioning to be much of a
problem. But this will future-proof it (since `FormSection`, whose
sticky styles were fixed in #26907, was built for this purpose) and
allow us to remove some redundant components/files. No other files
imported `HorizontalContainer` or `HorizontalSection`, so
OrganizationSettingsPage/Horizontal.tsx can be safely deleted.

Also note that the **Info** section is sticky as expected, since it was
already using `FormSection`. The **Workspace Sharing** and **Delete
Organization** sections are the ones whose stickiness is fixed by this
PR


https://github.com/user-attachments/assets/9ffed486-87f7-4762-a97a-4268d0328829

## after


https://github.com/user-attachments/assets/581cb33e-50b5-466e-9be9-2518dc22bfa6
---
 .../OrganizationSettingsPage/Horizontal.tsx   | 35 -------------------
 .../OrganizationSettingsPageView.tsx          | 17 +++++----
 2 files changed, 8 insertions(+), 44 deletions(-)
 delete mode 100644 site/src/pages/OrganizationSettingsPage/Horizontal.tsx

diff --git a/site/src/pages/OrganizationSettingsPage/Horizontal.tsx b/site/src/pages/OrganizationSettingsPage/Horizontal.tsx
deleted file mode 100644
index e32f1096b6..0000000000
--- a/site/src/pages/OrganizationSettingsPage/Horizontal.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { FC, HTMLAttributes, ReactNode } from "react";
-export const HorizontalContainer: FC<HTMLAttributes<HTMLDivElement>> = ({
-	...attrs
-}) => {
-	return <div className="flex flex-col gap-16 md:gap-20" {...attrs} />;
-};
-
-interface HorizontalSectionProps
-	extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-	title: ReactNode;
-	description: ReactNode;
-	children?: ReactNode;
-}
-
-export const HorizontalSection: FC<HorizontalSectionProps> = ({
-	children,
-	title,
-	description,
-	...attrs
-}) => {
-	return (
-		<section className="flex flex-col gap-4 lg:flex-row lg:gap-32" {...attrs}>
-			<div className="w-full shrink-0 lg:sticky lg:top-6 lg:max-w-[312px]">
-				<h2 className="m-0 mb-2 flex flex-row items-center gap-3 text-xl font-normal text-content-primary">
-					{title}
-				</h2>
-				<div className="m-0 text-sm leading-[160%] text-content-secondary">
-					{description}
-				</div>
-			</div>
-
-			{children}
-		</section>
-	);
-};
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
index f9e904581a..2ccf13bc37 100644
--- a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
+++ b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
@@ -33,7 +33,6 @@ import {
 	onChangeTrimmed,
 } from "#/utils/formUtils";
 import { DisableWorkspaceSharingDialog } from "./DisableWorkspaceSharingDialog";
-import { HorizontalContainer, HorizontalSection } from "./Horizontal";
 
 const MAX_DESCRIPTION_CHAR_LIMIT = 128;
 const MAX_DESCRIPTION_MESSAGE = `Please enter a description that is no longer than ${MAX_DESCRIPTION_CHAR_LIMIT} characters.`;
@@ -150,8 +149,8 @@ export const OrganizationSettingsPageView: FC<
 			</HorizontalForm>
 
 			{onChangeShareableOwners && (
-				<HorizontalContainer className="mt-12">
-					<HorizontalSection
+				<HorizontalForm className="mt-12">
+					<FormSection
 						title="Workspace Sharing"
 						description="Control whether workspace owners can share their workspaces."
 					>
@@ -255,13 +254,13 @@ export const OrganizationSettingsPageView: FC<
 								</div>
 							</div>
 						</div>
-					</HorizontalSection>
-				</HorizontalContainer>
+					</FormSection>
+				</HorizontalForm>
 			)}
 
 			{!organization.is_default && (
-				<HorizontalContainer className="mt-12">
-					<HorizontalSection
+				<HorizontalForm className="mt-12">
+					<FormSection
 						title="Delete Organization"
 						description="Delete your organization permanently."
 					>
@@ -277,8 +276,8 @@ export const OrganizationSettingsPageView: FC<
 								</Button>
 							</div>
 						</div>
-					</HorizontalSection>
-				</HorizontalContainer>
+					</FormSection>
+				</HorizontalForm>
 			)}
 
 			<DeleteDialog