From 8b316d7725eb61efa35d7c8b4bf1a965585fb0c9 Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Mon, 18 Aug 2025 15:09:53 +0000 Subject: [PATCH 01/11] chore: improve layout so only content scroll --- site/src/modules/dashboard/DashboardLayout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/modules/dashboard/DashboardLayout.tsx b/site/src/modules/dashboard/DashboardLayout.tsx index 1bbf5347e085e..1b3c5945b4c0d 100644 --- a/site/src/modules/dashboard/DashboardLayout.tsx +++ b/site/src/modules/dashboard/DashboardLayout.tsx @@ -23,10 +23,10 @@ export const DashboardLayout: FC = () => { {canViewDeployment && } -
+
-
+
}> From 6062c75df238979183449973fc2f4cd5136d6674 Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Mon, 18 Aug 2025 16:27:08 +0000 Subject: [PATCH 02/11] chore: improve scroll behavior for org members page --- site/src/components/Sidebar/Sidebar.tsx | 5 +++-- .../modules/management/OrganizationSettingsLayout.tsx | 6 +++--- site/src/modules/management/OrganizationSidebar.tsx | 2 +- .../src/modules/management/OrganizationSidebarLayout.tsx | 4 ++-- .../OrganizationSettingsPage/OrganizationMembersPage.tsx | 9 +-------- .../OrganizationMembersPageView.tsx | 4 +++- 6 files changed, 13 insertions(+), 17 deletions(-) diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx index a09d9bfbaa517..62198cfaa1c08 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/management/OrganizationSettingsLayout.tsx b/site/src/modules/management/OrganizationSettingsLayout.tsx index edbe759e0d5fb..46947c750bca6 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 4f77348eefa93..ebcc5e13ce5bf 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/OrganizationSettingsPage/OrganizationMembersPage.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.tsx index f2c270cd929af..c3822cf1ea58c 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,7 +155,7 @@ const OrganizationMembersPage: FC = () => {

-

+

Are you sure you want to remove this member?

@@ -166,10 +165,4 @@ const OrganizationMembersPage: FC = () => { ); }; -const styles = { - test: { - paddingBottom: 20, - }, -} satisfies Record>; - export default OrganizationMembersPage; diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx index 7f8ed8e92ea17..0fccb6531b4cd 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx @@ -81,7 +81,8 @@ export const OrganizationMembersPageView: FC< updateMemberRoles, }) => { return ( -
+
+
Members @@ -198,6 +199,7 @@ export const OrganizationMembersPageView: FC<
+
); }; From e49317c955ea3a91d7e5e12ddaff30a969466125 Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Mon, 18 Aug 2025 16:45:46 +0000 Subject: [PATCH 03/11] chore: improve groups page scroll behavior --- site/src/pages/GroupsPage/GroupsPage.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/site/src/pages/GroupsPage/GroupsPage.tsx b/site/src/pages/GroupsPage/GroupsPage.tsx index c5089cbad1e6b..2144c85e625fd 100644 --- a/site/src/pages/GroupsPage/GroupsPage.tsx +++ b/site/src/pages/GroupsPage/GroupsPage.tsx @@ -76,7 +76,9 @@ const GroupsPage: FC = () => { } return ( - <> +
+ +
{helmet} { canCreateGroup={permissions.createGroup} groupsEnabled={groupsEnabled} /> - +
+
); }; From 9b9f421debda09c4cf25a60424d6e5b58fa0d7a4 Mon Sep 17 00:00:00 2001 From: Brett Kolodny Date: Mon, 18 Aug 2025 16:53:41 +0000 Subject: [PATCH 04/11] chore: improve all org settings pages scroll behavior --- site/src/modules/management/OrganizationSidebarLayout.tsx | 2 +- site/src/pages/GroupsPage/GroupsPage.tsx | 2 -- .../CustomRolesPage/CustomRolesPage.tsx | 4 ++-- .../OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx | 4 ++-- .../OrganizationSettingsPage/OrganizationMembersPageView.tsx | 2 -- .../OrganizationProvisionerJobsPageView.tsx | 4 ++-- .../OrganizationProvisionerKeysPageView.tsx | 2 +- .../OrganizationProvisionersPageView.tsx | 2 +- .../OrganizationSettingsPage/OrganizationSettingsPageView.tsx | 2 +- 9 files changed, 10 insertions(+), 14 deletions(-) diff --git a/site/src/modules/management/OrganizationSidebarLayout.tsx b/site/src/modules/management/OrganizationSidebarLayout.tsx index a7957f2e382f7..6113235be39b3 100644 --- a/site/src/modules/management/OrganizationSidebarLayout.tsx +++ b/site/src/modules/management/OrganizationSidebarLayout.tsx @@ -7,7 +7,7 @@ const OrganizationSidebarLayout: FC = () => { return (
-
+
}> diff --git a/site/src/pages/GroupsPage/GroupsPage.tsx b/site/src/pages/GroupsPage/GroupsPage.tsx index 2144c85e625fd..7b9b030e90d8c 100644 --- a/site/src/pages/GroupsPage/GroupsPage.tsx +++ b/site/src/pages/GroupsPage/GroupsPage.tsx @@ -76,7 +76,6 @@ const GroupsPage: FC = () => { } return ( -
{helmet} @@ -110,7 +109,6 @@ const GroupsPage: FC = () => { groupsEnabled={groupsEnabled} />
-
); }; diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx index ff197cc52aad6..92cfa5b404efa 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 59a086a024b9a..ea9604a385621 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/OrganizationMembersPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx index 0fccb6531b4cd..f720ba692d0ca 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx @@ -81,7 +81,6 @@ export const OrganizationMembersPageView: FC< updateMemberRoles, }) => { return ( - <div className="flex flex-col items-center flex-1 min-h-0 h-full overflow-y-auto w-full px-10 pt-10"> <div className="w-full max-w-screen-2xl pb-10"> <SettingsHeader> <SettingsHeaderTitle>Members</SettingsHeaderTitle> @@ -199,7 +198,6 @@ export const OrganizationMembersPageView: FC< </PaginationContainer> </div> </div> - </div> ); }; diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/OrganizationProvisionerJobsPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/OrganizationProvisionerJobsPageView.tsx index 8b6a2a839b8af..f54cb163e3eea 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 6d5b1be3552ea..a8812cb603051 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 387baf31519cb..afcc84264f08f 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx @@ -56,7 +56,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 16bc561efcc7d..a5891df618471 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> From 57f715defa8941cf8dd868f53e35a376f5c10f79 Mon Sep 17 00:00:00 2001 From: Brett Kolodny <brett.kolodny@coder.com> Date: Mon, 18 Aug 2025 17:29:18 +0000 Subject: [PATCH 05/11] chore: fmt --- site/src/pages/GroupsPage/GroupsPage.tsx | 1 - .../OrganizationSettingsPage/OrganizationMembersPage.tsx | 4 +--- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/site/src/pages/GroupsPage/GroupsPage.tsx b/site/src/pages/GroupsPage/GroupsPage.tsx index 7b9b030e90d8c..64459955c91ec 100644 --- a/site/src/pages/GroupsPage/GroupsPage.tsx +++ b/site/src/pages/GroupsPage/GroupsPage.tsx @@ -76,7 +76,6 @@ const GroupsPage: FC = () => { } return ( - <div className="w-full max-w-screen-2xl pb-10"> {helmet} diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.tsx index c3822cf1ea58c..2e226f79f8066 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.tsx @@ -155,9 +155,7 @@ const OrganizationMembersPage: FC = () => { </ul> </p> - <p className="pb-5"> - 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> } /> From a740ac5ea93df4794c037f571171fade47e3faa1 Mon Sep 17 00:00:00 2001 From: Brett Kolodny <brett.kolodny@coder.com> Date: Mon, 18 Aug 2025 17:30:23 +0000 Subject: [PATCH 06/11] chore: add bottom padding to audit page --- site/src/pages/AuditPage/AuditPageView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx index f69e62581d202..ed19092c0a640 100644 --- a/site/src/pages/AuditPage/AuditPageView.tsx +++ b/site/src/pages/AuditPage/AuditPageView.tsx @@ -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"> From 4f18c8b808d06cd623fb1778d008f5db133cd3c8 Mon Sep 17 00:00:00 2001 From: Brett Kolodny <brett.kolodny@coder.com> Date: Mon, 18 Aug 2025 17:31:42 +0000 Subject: [PATCH 07/11] chore: add bottom padding to connections page --- site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx b/site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx index fe3840d098aaa..0fcadf085f7ff 100644 --- a/site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx +++ b/site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx @@ -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"> From c4b0601259ca56d01f494fda3af4bacd4f6ebf6b Mon Sep 17 00:00:00 2001 From: Brett Kolodny <brett.kolodny@coder.com> Date: Mon, 18 Aug 2025 18:19:08 +0000 Subject: [PATCH 08/11] fix: apperance form --- site/src/pages/TemplatesPage/TemplatesPageView.tsx | 2 +- .../pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index c8e391a7ebc2b..a37cb31232816 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 43db670850a49..42b93eb0af14a 100644 --- a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx +++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx @@ -22,6 +22,7 @@ import { terminalFonts, } from "theme/constants"; import { Section } from "../Section"; +import { cn } from "utils/cn"; interface AppearanceFormProps { isUpdating?: boolean; @@ -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) From 75e39f4a938a258657b6726bf829e3acd475719d Mon Sep 17 00:00:00 2001 From: Brett Kolodny <brett.kolodny@coder.com> Date: Mon, 18 Aug 2025 18:21:49 +0000 Subject: [PATCH 09/11] chore: fmt --- .../pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx index 42b93eb0af14a..aa10f315b6f2d 100644 --- a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx +++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx @@ -21,8 +21,8 @@ import { terminalFontLabels, terminalFonts, } from "theme/constants"; -import { Section } from "../Section"; import { cn } from "utils/cn"; +import { Section } from "../Section"; interface AppearanceFormProps { isUpdating?: boolean; From 52b689f1cc9416a4882c41d62c4eacc64976587e Mon Sep 17 00:00:00 2001 From: Brett Kolodny <brett.kolodny@coder.com> Date: Mon, 18 Aug 2025 18:52:47 +0000 Subject: [PATCH 10/11] chore: add bottom padding to template layout --- .../CreateTemplateGalleryPageView.tsx | 2 +- site/src/pages/TemplatePage/TemplateLayout.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx index 0ac220d4bcf67..0dfdb4a219504 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 ( - <Margins> + <Margins className="pb-12"> <PageHeader actions={ <Button asChild size="sm" variant="outline"> diff --git a/site/src/pages/TemplatePage/TemplateLayout.tsx b/site/src/pages/TemplatePage/TemplateLayout.tsx index c6b9f81945f30..50fcf2ea5b2be 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="m-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> ); }; From 2e7353b99da72228d714e5dddd3062caec37b148 Mon Sep 17 00:00:00 2001 From: Brett Kolodny <brett.kolodny@coder.com> Date: Tue, 26 Aug 2025 13:47:04 +0000 Subject: [PATCH 11/11] fix: use padding instead of margin --- site/src/pages/TemplatePage/TemplateLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/TemplatePage/TemplateLayout.tsx b/site/src/pages/TemplatePage/TemplateLayout.tsx index 50fcf2ea5b2be..57fad23dc975f 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 className="m-4"> + <div className="p-4"> <ErrorAlert error={error} /> </div> );