From d274f832b3bdb2f9e6dc8738ad540a4a9b2e28c1 Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Tue, 26 Aug 2025 14:14:44 -0400 Subject: [PATCH] chore: improve scroll behavior of DashboardLayout wrapped pages (#19396) Updates the the `DashboardLayout` to create a singular scroll area between the top nav bar and the deployment banner on the bottom. Also improves the scroll behavior of the org settings pages. CleanShot 2025-08-18 at 13 53 01 https://github.com/user-attachments/assets/128be43d-433f-4a0f-af5b-bbfb7d646345 --- site/src/components/Sidebar/Sidebar.tsx | 5 +++-- site/src/modules/dashboard/DashboardLayout.tsx | 4 ++-- .../modules/management/OrganizationSettingsLayout.tsx | 6 +++--- site/src/modules/management/OrganizationSidebar.tsx | 2 +- .../modules/management/OrganizationSidebarLayout.tsx | 4 ++-- site/src/pages/AuditPage/AuditPageView.tsx | 2 +- .../pages/ConnectionLogPage/ConnectionLogPageView.tsx | 2 +- .../CreateTemplateGalleryPageView.tsx | 2 +- site/src/pages/GroupsPage/GroupsPage.tsx | 4 ++-- .../CustomRolesPage/CustomRolesPage.tsx | 4 ++-- .../IdpSyncPage/IdpSyncPage.tsx | 4 ++-- .../OrganizationMembersPage.tsx | 11 +---------- .../OrganizationMembersPageView.tsx | 2 +- .../OrganizationProvisionerJobsPageView.tsx | 4 ++-- .../OrganizationProvisionerKeysPageView.tsx | 2 +- .../OrganizationProvisionersPageView.tsx | 2 +- .../OrganizationSettingsPageView.tsx | 2 +- site/src/pages/TemplatePage/TemplateLayout.tsx | 6 +++--- site/src/pages/TemplatesPage/TemplatesPageView.tsx | 2 +- .../AppearancePage/AppearanceForm.tsx | 3 ++- 20 files changed, 33 insertions(+), 40 deletions(-) diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx index ab289a7d7e..4f626b8802 100644 --- a/site/src/components/Sidebar/Sidebar.tsx +++ b/site/src/components/Sidebar/Sidebar.tsx @@ -5,10 +5,11 @@ import { cn } from "utils/cn"; interface SidebarProps { children?: ReactNode; + className?: string; } -export const Sidebar: FC = ({ children }) => { - return ; +export const Sidebar: FC = ({ className, children }) => { + return ; }; interface SidebarHeaderProps { diff --git a/site/src/modules/dashboard/DashboardLayout.tsx b/site/src/modules/dashboard/DashboardLayout.tsx index 1bbf5347e0..1b3c5945b4 100644 --- a/site/src/modules/dashboard/DashboardLayout.tsx +++ b/site/src/modules/dashboard/DashboardLayout.tsx @@ -23,10 +23,10 @@ export const DashboardLayout: FC = () => { {canViewDeployment && } -
+
-
+
}> diff --git a/site/src/modules/management/OrganizationSettingsLayout.tsx b/site/src/modules/management/OrganizationSettingsLayout.tsx index edbe759e0d..46947c750b 100644 --- a/site/src/modules/management/OrganizationSettingsLayout.tsx +++ b/site/src/modules/management/OrganizationSettingsLayout.tsx @@ -91,7 +91,7 @@ const OrganizationSettingsLayout: FC = () => { organizationPermissions, }} > -
+
@@ -121,8 +121,8 @@ const OrganizationSettingsLayout: FC = () => { )} -
-
+
+
}> diff --git a/site/src/modules/management/OrganizationSidebar.tsx b/site/src/modules/management/OrganizationSidebar.tsx index 4f77348eef..ebcc5e13ce 100644 --- a/site/src/modules/management/OrganizationSidebar.tsx +++ b/site/src/modules/management/OrganizationSidebar.tsx @@ -13,7 +13,7 @@ export const OrganizationSidebar: FC = () => { useOrganizationSettings(); return ( - + { return ( -
+
-
+
}> diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx index f69e62581d..ed19092c0a 100644 --- a/site/src/pages/AuditPage/AuditPageView.tsx +++ b/site/src/pages/AuditPage/AuditPageView.tsx @@ -57,7 +57,7 @@ export const AuditPageView: FC = ({ const isEmpty = !isLoading && auditLogs?.length === 0; return ( - + diff --git a/site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx b/site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx index fe3840d098..0fcadf085f 100644 --- a/site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx +++ b/site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx @@ -56,7 +56,7 @@ export const ConnectionLogPageView: FC = ({ const isEmpty = !isLoading && connectionLogs?.length === 0; return ( - + diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx index 0ac220d4bc..0dfdb4a219 100644 --- a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx +++ b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx @@ -24,7 +24,7 @@ export const CreateTemplateGalleryPageView: FC< CreateTemplateGalleryPageViewProps > = ({ starterTemplatesByTag, error }) => { return ( - + diff --git a/site/src/pages/GroupsPage/GroupsPage.tsx b/site/src/pages/GroupsPage/GroupsPage.tsx index c5089cbad1..64459955c9 100644 --- a/site/src/pages/GroupsPage/GroupsPage.tsx +++ b/site/src/pages/GroupsPage/GroupsPage.tsx @@ -76,7 +76,7 @@ const GroupsPage: FC = () => { } return ( - <> +
{helmet} { canCreateGroup={permissions.createGroup} groupsEnabled={groupsEnabled} /> - +
); }; diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx index ff197cc52a..92cfa5b404 100644 --- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx +++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx @@ -58,7 +58,7 @@ const CustomRolesPage: FC = () => { } return ( - <> +
{pageTitle( @@ -116,7 +116,7 @@ const CustomRolesPage: FC = () => { }} /> </RequirePermission> - </> + </div> ); }; diff --git a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx index 59a086a024..ea9604a385 100644 --- a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx +++ b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx @@ -117,7 +117,7 @@ const IdpSyncPage: FC = () => { } return ( - <> + <div className="w-full max-w-screen-2xl pb-10"> {helmet} <div className="flex flex-col gap-12"> @@ -182,7 +182,7 @@ const IdpSyncPage: FC = () => { </Cond> </ChooseOne> </div> - </> + </div> ); }; diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.tsx index f2c270cd92..2e226f79f8 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.tsx @@ -1,4 +1,3 @@ -import type { Interpolation, Theme } from "@emotion/react"; import { getErrorMessage } from "api/errors"; import { groupsByUserIdInOrganization } from "api/queries/groups"; import { @@ -156,9 +155,7 @@ const OrganizationMembersPage: FC = () => { </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> } /> @@ -166,10 +163,4 @@ const OrganizationMembersPage: FC = () => { ); }; -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 index 7f8ed8e92e..f720ba692d 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx @@ -81,7 +81,7 @@ export const OrganizationMembersPageView: FC< updateMemberRoles, }) => { return ( - <div> + <div className="w-full max-w-screen-2xl pb-10"> <SettingsHeader> <SettingsHeaderTitle>Members</SettingsHeaderTitle> </SettingsHeader> diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/OrganizationProvisionerJobsPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/OrganizationProvisionerJobsPageView.tsx index 8b6a2a839b..f54cb163e3 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/OrganizationProvisionerJobsPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/OrganizationProvisionerJobsPageView.tsx @@ -99,7 +99,7 @@ const OrganizationProvisionerJobsPageView: FC< } return ( - <> + <div className="w-full max-w-screen-2xl pb-10"> <Helmet> <title> {pageTitle( @@ -227,7 +227,7 @@ const OrganizationProvisionerJobsPageView: FC< </TableBody> </Table> </section> - </> + </div> ); }; diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.tsx index 6d5b1be355..a8812cb603 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.tsx @@ -45,7 +45,7 @@ export const OrganizationProvisionerKeysPageView: FC< 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/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx index ac6e45aed2..386d87d8c1 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx @@ -58,7 +58,7 @@ export const OrganizationProvisionersPageView: FC< 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 index 16bc561efc..a5891df618 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx @@ -68,7 +68,7 @@ export const OrganizationSettingsPageView: FC< 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 index c6b9f81945..57fad23dc9 100644 --- a/site/src/pages/TemplatePage/TemplateLayout.tsx +++ b/site/src/pages/TemplatePage/TemplateLayout.tsx @@ -108,7 +108,7 @@ export const TemplateLayout: FC<PropsWithChildren> = ({ if (error || workspacePermissionsQuery.error) { return ( - <div css={{ margin: 16 }}> + <div className="p-4"> <ErrorAlert error={error} /> </div> ); @@ -119,7 +119,7 @@ export const TemplateLayout: FC<PropsWithChildren> = ({ } return ( - <> + <div className="pb-12"> <TemplatePageHeader template={data.template} activeVersion={data.activeVersion} @@ -166,6 +166,6 @@ export const TemplateLayout: FC<PropsWithChildren> = ({ <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 index c8e391a7eb..a37cb31232 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -205,7 +205,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({ 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 index 43db670850..aa10f315b6 100644 --- a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx +++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx @@ -21,6 +21,7 @@ import { terminalFontLabels, terminalFonts, } from "theme/constants"; +import { cn } from "utils/cn"; import { Section } from "../Section"; interface AppearanceFormProps { @@ -164,7 +165,7 @@ const AutoThemePreviewButton: FC<AutoThemePreviewButtonProps> = ({ 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)