Aug 26, 2025 · Aug 18, 2025 · Aug 18, 2025 · Aug 18, 2025 · Aug 18, 2025 · Aug 18, 2025
diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx

 interface SidebarProps {
 children?: ReactNode;
 className?: string;
 }

 export const Sidebar: FC<SidebarProps> = ({ children }) => {
 return <nav className="w-60 flex-shrink-0">{children}</nav>;
 export const Sidebar: FC<SidebarProps> = ({className,children }) => {
 return <nav className={cn("w-60 flex-shrink-0", className)}>{children}</nav>;
 };

 interface SidebarHeaderProps {
diff --git a/site/src/modules/dashboard/DashboardLayout.tsx b/site/src/modules/dashboard/DashboardLayout.tsx
 {canViewDeployment && <LicenseBanner />}
 <AnnouncementBanners />

 <div className="flex flex-colmin-h-screen">
 <div className="flex flex-col h-screen justify-between">
 <Navbar />

 <div className="flex flex-col flex-1 min-h-0pb-12">
 <div className="flex flex-col flex-1 min-h-0overflow-y-auto">
 <Suspense fallback={<Loader />}>
 <Outlet />
 </Suspense>
diff --git a/site/src/modules/management/OrganizationSettingsLayout.tsx b/site/src/modules/management/OrganizationSettingsLayout.tsx
 organizationPermissions,
 }}
 >
 <div>
 <div className="flex flex-col flex-1 min-h-0">
 <Breadcrumb>
 <BreadcrumbList>
 <BreadcrumbItem>
 )}
 </BreadcrumbList>
 </Breadcrumb>
 <hr className="h-px border-none bg-border" />
 <div className="px-10 max-w-screen-2xl">
 <div className="h-px border-none bg-border" />
 <div className="flex flex-col flex-1 min-h-0 pl-10">
 <Suspense fallback={<Loader />}>
 <Outlet />
 </Suspense>
diff --git a/site/src/modules/management/OrganizationSidebar.tsx b/site/src/modules/management/OrganizationSidebar.tsx
 useOrganizationSettings();

 return (
 <BaseSidebar>
 <BaseSidebar className="pt-10">
 <OrganizationSidebarView
 activeOrganization={organization}
 orgPermissions={organizationPermissions}
diff --git a/site/src/modules/management/OrganizationSidebarLayout.tsx b/site/src/modules/management/OrganizationSidebarLayout.tsx

 const OrganizationSidebarLayout: FC = () => {
 return (
 <div className="flex flex-rowgap-28 py-10">
 <div className="flex flex-rowflex-1 min-h-0 w-full">
 <OrganizationSidebar />
 <maincss={{ flexGrow: 1 }}>
 <mainclassName="flex flex-col items-center flex-1 min-h-0 h-full overflow-y-auto w-full px-10 pt-10">
 <Suspense fallback={<Loader />}>
 <Outlet />
 </Suspense>
diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx
 const isEmpty = !isLoading && auditLogs?.length === 0;

 return (
 <Margins>
 <Margins className="pb-12">
 <PageHeader>
 <PageHeaderTitle>
 <Stack direction="row" spacing={1} alignItems="center">
diff --git a/site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx b/site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx
 const isEmpty = !isLoading && connectionLogs?.length === 0;

 return (
 <Margins>
 <Margins className="pb-12">
 <PageHeader>
 <PageHeaderTitle>
 <Stack direction="row" spacing={1} alignItems="center">
diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
 CreateTemplateGalleryPageViewProps
 > = ({ starterTemplatesByTag, error }) => {
 return (
 <Margins>
 <Margins className="pb-12">
 <PageHeader
 actions={
 <Button asChild size="sm" variant="outline">
diff --git a/site/src/pages/GroupsPage/GroupsPage.tsx b/site/src/pages/GroupsPage/GroupsPage.tsx
 }

 return (
 <>
 <div className="w-full max-w-screen-2xl pb-10">
 {helmet}

 <Stack
 canCreateGroup={permissions.createGroup}
 groupsEnabled={groupsEnabled}
 />
 </>
 </div>
 );
 };

diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx
 }

 return (
 <>
 <div className="w-full max-w-screen-2xl pb-10">
 <Helmet>
 <title>
 {pageTitle(
 }}
 />
 </RequirePermission>
 </>
 </div>
 );
 };

diff --git a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx
 }

 return (
 <>
 <div className="w-full max-w-screen-2xl pb-10">
 {helmet}

 <div className="flex flex-col gap-12">
 </Cond>
 </ChooseOne>
 </div>
 </>
 </div>
 );
 };

diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.tsx
 import type { Interpolation, Theme } from "@emotion/react";
 import { getErrorMessage } from "api/errors";
 import { groupsByUserIdInOrganization } from "api/queries/groups";
 import {
 </ul>
 </p>

 <p css={styles.test}>
 Are you sure you want to remove this member?
 </p>
 <p className="pb-5">Are you sure you want to remove this member?</p>
 </Stack>
 }
 />
 </>
 );
 };

 const styles = {
 test: {
 paddingBottom: 20,
 },
 } satisfies Record<string, Interpolation<Theme>>;

 export default OrganizationMembersPage;
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx
 updateMemberRoles,
 }) => {
 return (
 <div>
 <div className="w-full max-w-screen-2xl pb-10">
 <SettingsHeader>
 <SettingsHeaderTitle>Members</SettingsHeaderTitle>
 </SettingsHeader>
diff --git a/...ationSettingsPage/OrganizationProvisionerJobsPage/OrganizationProvisionerJobsPageView.tsx b/...ationSettingsPage/OrganizationProvisionerJobsPage/OrganizationProvisionerJobsPageView.tsx
 }

 return (
 <>
 <div className="w-full max-w-screen-2xl pb-10">
 <Helmet>
 <title>
 {pageTitle(
 </TableBody>
 </Table>
 </section>
 </>
 </div>
 );
 };

diff --git a/...ationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.tsx b/...ationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.tsx
 OrganizationProvisionerKeysPageViewProps
 > = ({ showPaywall, provisionerKeyDaemons, error, onRetry }) => {
 return (
 <section>
 <section className="w-full max-w-screen-2xl pb-10">
 <SettingsHeader>
 <SettingsHeaderTitle>Provisioner Keys</SettingsHeaderTitle>
 <SettingsHeaderDescription>
diff --git a/...rganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx b/...rganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx
 onRetry,
 }) => {
 return (
 <section>
 <section className="w-full max-w-screen-2xl pb-10">
 <SettingsHeader>
 <SettingsHeaderTitle>Provisioners</SettingsHeaderTitle>
 <SettingsHeaderDescription>
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
 const [isDeleting, setIsDeleting] = useState(false);

 return (
 <div>
 <div className="w-full max-w-screen-2xl pb-10">
 <SettingsHeader>
 <SettingsHeaderTitle>Settings</SettingsHeaderTitle>
 </SettingsHeader>
diff --git a/site/src/pages/TemplatePage/TemplateLayout.tsx b/site/src/pages/TemplatePage/TemplateLayout.tsx

 if (error || workspacePermissionsQuery.error) {
 return (
 <divcss={{ margin: 16 }}>
 <divclassName="p-4">
 <ErrorAlert error={error} />
 </div>
 );
 }

 return (
 <>
 <div className="pb-12">
 <TemplatePageHeader
 template={data.template}
 activeVersion={data.activeVersion}
 <Suspense fallback={<Loader />}>{children}</Suspense>
 </TemplateLayoutContext.Provider>
 </Margins>
 </>
 </div>
 );
 };
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
 const isEmpty = templates && templates.length === 0;

 return (
 <Margins>
 <Margins className="pb-12">
 <PageHeader
 actions={
 canCreateTemplates && (
diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
 terminalFontLabels,
 terminalFonts,
 } from "theme/constants";
 import { cn } from "utils/cn";
 import { Section } from "../Section";

 interface AppearanceFormProps {
 onChange={onSelect}
 css={{ ...visuallyHidden }}
 />
 <label htmlFor={displayName} className={className}>
 <label htmlFor={displayName} className={cn("relative",className)}>
 <ThemePreview
 css={{
 // This half is absolute to not advance the layout (which would offset the second half)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,10 +5,11 @@ import { cn } from "utils/cn";

		interface SidebarProps {
		children?: ReactNode;
		className?: string;
		}

		export const Sidebar: FC<SidebarProps> = ({ children }) => {
		return <nav className="w-60 flex-shrink-0">{children}</nav>;
		export const Sidebar: FC<SidebarProps> = ({className,children }) => {
		return <nav className={cn("w-60 flex-shrink-0", className)}>{children}</nav>;
		};

		interface SidebarHeaderProps {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,10 +23,10 @@ export const DashboardLayout: FC = () => {
		{canViewDeployment && <LicenseBanner />}
		<AnnouncementBanners />

		<div className="flex flex-colmin-h-screen">
		<div className="flex flex-col h-screen justify-between">
		<Navbar />

		<div className="flex flex-col flex-1 min-h-0pb-12">
		<div className="flex flex-col flex-1 min-h-0overflow-y-auto">
		<Suspense fallback={<Loader />}>
		<Outlet />
		</Suspense>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -91,7 +91,7 @@ const OrganizationSettingsLayout: FC = () => {
		organizationPermissions,
		}}
		>
		<div>
		<div className="flex flex-col flex-1 min-h-0">
		<Breadcrumb>
		<BreadcrumbList>
		<BreadcrumbItem>
Expand DownExpand Up		@@ -121,8 +121,8 @@ const OrganizationSettingsLayout: FC = () => {
		)}
		</BreadcrumbList>
		</Breadcrumb>
		<hr className="h-px border-none bg-border" />
		<div className="px-10 max-w-screen-2xl">
		<div className="h-px border-none bg-border" />
		<div className="flex flex-col flex-1 min-h-0 pl-10">
		<Suspense fallback={<Loader />}>
		<Outlet />
		</Suspense>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,7 +13,7 @@ export const OrganizationSidebar: FC = () => {
		useOrganizationSettings();

		return (
		<BaseSidebar>
		<BaseSidebar className="pt-10">
		<OrganizationSidebarView
		activeOrganization={organization}
		orgPermissions={organizationPermissions}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,9 +5,9 @@ import { OrganizationSidebar } from "./OrganizationSidebar";

		const OrganizationSidebarLayout: FC = () => {
		return (
		<div className="flex flex-rowgap-28 py-10">
		<div className="flex flex-rowflex-1 min-h-0 w-full">
		<OrganizationSidebar />
		<maincss={{ flexGrow: 1 }}>
		<mainclassName="flex flex-col items-center flex-1 min-h-0 h-full overflow-y-auto w-full px-10 pt-10">
		<Suspense fallback={<Loader />}>
		<Outlet />
		</Suspense>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -57,7 +57,7 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
		const isEmpty = !isLoading && auditLogs?.length === 0;

		return (
		<Margins>
		<Margins className="pb-12">
		<PageHeader>
		<PageHeaderTitle>
		<Stack direction="row" spacing={1} alignItems="center">
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -56,7 +56,7 @@ export const ConnectionLogPageView: FC<ConnectionLogPageViewProps> = ({
		const isEmpty = !isLoading && connectionLogs?.length === 0;

		return (
		<Margins>
		<Margins className="pb-12">
		<PageHeader>
		<PageHeaderTitle>
		<Stack direction="row" spacing={1} alignItems="center">
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,7 +24,7 @@ export const CreateTemplateGalleryPageView: FC<
		CreateTemplateGalleryPageViewProps
		> = ({ starterTemplatesByTag, error }) => {
		return (
		<Margins>
		<Margins className="pb-12">
		<PageHeader
		actions={
		<Button asChild size="sm" variant="outline">
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -76,7 +76,7 @@ const GroupsPage: FC = () => {
		}

		return (
		<>
		<div className="w-full max-w-screen-2xl pb-10">
Copy link Member ParkreinerAug 25, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Is there any way we can refactor the layouts to bake the`pb-10` in by default? I'm worried that it could get missed as we add new page types in the future Copy link ContributorAuthor brettkolodnyAug 25, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I believe I tried doing that, but the pages aren't set up consistently so it didn't end up being feasible. And making the pages more consistent seemed out of scope for this PR
		{helmet}

		<Stack
Expand DownExpand Up		@@ -107,7 +107,7 @@ const GroupsPage: FC = () => {
		canCreateGroup={permissions.createGroup}
		groupsEnabled={groupsEnabled}
		/>
		</>
		</div>
		);
		};

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -58,7 +58,7 @@ const CustomRolesPage: FC = () => {
		}

		return (
		<>
		<div className="w-full max-w-screen-2xl pb-10">
		<Helmet>
		<title>
		{pageTitle(
Expand DownExpand Up		@@ -116,7 +116,7 @@ const CustomRolesPage: FC = () => {
		}}
		/>
		</RequirePermission>
		</>
		</div>
		);
		};

Expand Down