Skip to content

chore: improve scroll behavior of DashboardLayout wrapped pages #19396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
+33 −40
Open

chore: improve scroll behavior of DashboardLayout wrapped pages #19396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8b316d7
chore: improve layout so only content scroll
brettkolodny Aug 18, 2025
6062c75
chore: improve scroll behavior for org members page
brettkolodny Aug 18, 2025
e49317c
chore: improve groups page scroll behavior
brettkolodny Aug 18, 2025
9b9f421
chore: improve all org settings pages scroll behavior
brettkolodny Aug 18, 2025
57f715d
chore: fmt
brettkolodny Aug 18, 2025
a740ac5
chore: add bottom padding to audit page
brettkolodny Aug 18, 2025
4f18c8b
chore: add bottom padding to connections page
brettkolodny Aug 18, 2025
c4b0601
fix: apperance form
brettkolodny Aug 18, 2025
75e39f4
chore: fmt
brettkolodny Aug 18, 2025
52b689f
chore: add bottom padding to template layout
brettkolodny Aug 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions site/src/components/Sidebar/Sidebar.tsx
View file
Open in desktop
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
4 changes: 2 additions & 2 deletions site/src/modules/dashboard/DashboardLayout.tsx
View file
Open in desktop
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-col min-h-screen">
<div className="flex flex-col h-screen justify-between">
<Navbar />

<div className="flex flex-col flex-1 min-h-0 pb-12">
<div className="flex flex-col flex-1 min-h-0 overflow-y-auto">
<Suspense fallback={<Loader />}>
<Outlet />
</Suspense>
Expand Down
6 changes: 3 additions & 3 deletions site/src/modules/management/OrganizationSettingsLayout.tsx
View file
Open in desktop
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 Down Expand 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
2 changes: 1 addition & 1 deletion site/src/modules/management/OrganizationSidebar.tsx
View file
Open in desktop
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
4 changes: 2 additions & 2 deletions site/src/modules/management/OrganizationSidebarLayout.tsx
View file
Open in desktop
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-row gap-28 py-10">
<div className="flex flex-row flex-1 min-h-0 w-full">
<OrganizationSidebar />
<main css={{ flexGrow: 1 }}>
<main className="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
2 changes: 1 addition & 1 deletion site/src/pages/AuditPage/AuditPageView.tsx
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
View file
Open in desktop
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
4 changes: 2 additions & 2 deletions site/src/pages/GroupsPage/GroupsPage.tsx
View file
Open in desktop
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

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
Contributor Author

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 Down Expand Up @@ -107,7 +107,7 @@ const GroupsPage: FC = () => {
canCreateGroup={permissions.createGroup}
groupsEnabled={groupsEnabled}
/>
</>
</div>
);
};

Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx
View file
Open in desktop
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 Down Expand Up @@ -116,7 +116,7 @@ const CustomRolesPage: FC = () => {
}}
/>
</RequirePermission>
</>
</div>
);
};

Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -182,7 +182,7 @@ const IdpSyncPage: FC = () => {
</Cond>
</ChooseOne>
</div>
</>
</div>
);
};

Expand Down
11 changes: 1 addition & 10 deletions site/src/pages/OrganizationSettingsPage/OrganizationMembersPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import type { Interpolation, Theme } from "@emotion/react";
import { getErrorMessage } from "api/errors";
import { groupsByUserIdInOrganization } from "api/queries/groups";
import {
Expand Down Expand Up @@ -156,20 +155,12 @@ 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>
}
/>
</>
);
};

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

export default OrganizationMembersPage;
2 changes: 1 addition & 1 deletion site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions ...ationSettingsPage/OrganizationProvisionerJobsPage/OrganizationProvisionerJobsPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ const OrganizationProvisionerJobsPageView: FC<
}

return (
<>
<div className="w-full max-w-screen-2xl pb-10">
<Helmet>
<title>
{pageTitle(
Expand Down Expand Up @@ -227,7 +227,7 @@ const OrganizationProvisionerJobsPageView: FC<
</TableBody>
</Table>
</section>
</>
</div>
);
};

Expand Down
2 changes: 1 addition & 1 deletion ...ationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion ...rganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions site/src/pages/TemplatePage/TemplateLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export const TemplateLayout: FC<PropsWithChildren> = ({

if (error || workspacePermissionsQuery.error) {
return (
<div css={{ margin: 16 }}>
<div className="m-4">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Totally okay if this isn't feasible because it would require too many changes elsewhere, but could we update this to use padding instead? I feel like margins are an anti-pattern ~95% of the time

<ErrorAlert error={error} />
</div>
);
Expand All @@ -119,7 +119,7 @@ export const TemplateLayout: FC<PropsWithChildren> = ({
}

return (
<>
<div className="pb-12">
<TemplatePageHeader
template={data.template}
activeVersion={data.activeVersion}
Expand Down Expand Up @@ -166,6 +166,6 @@ export const TemplateLayout: FC<PropsWithChildren> = ({
<Suspense fallback={<Loader />}>{children}</Suspense>
</TemplateLayoutContext.Provider>
</Margins>
</>
</div>
);
};
2 changes: 1 addition & 1 deletion site/src/pages/TemplatesPage/TemplatesPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
const isEmpty = templates && templates.length === 0;

return (
<Margins>
<Margins className="pb-12">
<PageHeader
actions={
canCreateTemplates && (
Expand Down
3 changes: 2 additions & 1 deletion site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
terminalFontLabels,
terminalFonts,
} from "theme/constants";
import { cn } from "utils/cn";
import { Section } from "../Section";

interface AppearanceFormProps {
Expand Down Expand Up @@ -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)
Expand Down
Loading