fix: align global layout for settings pages (#22109)

Closes #16148 

This pull-request resolves a few issues with wider displays.
Particularly in ensuring the content's container center's as one would
expect and the content of the headings isn't being contained into a
`max-w-prose`.

site/src/components/SettingsHeader/SettingsHeader.tsx

@@ -17,14 +17,7 @@ export const SettingsHeader: FC<SettingsHeaderProps> = ({
 }) => {
 	return (
 		<hgroup className="flex flex-col justify-between items-start gap-2 pb-6 sm:flex-row">
-			{/*
-			 * The text-sm class is only meant to adjust the font size of
-			 * SettingsDescription, but we need to apply it here. That way,
-			 * text-sm combines with the max-w-prose class and makes sure
-			 * we have a predictable max width for the header + description by
-			 * default.
-			 */}
-			<div className={cn("text-sm max-w-prose flex flex-col gap-2", className)}>
+			<div className={cn("text-sm flex flex-col gap-2 flex-1", className)}>
 				{children}
 			</div>
 			{actions}

site/src/modules/management/DeploymentSettingsLayout.tsx

@@ -51,7 +51,7 @@ const DeploymentSettingsLayout: FC = () => {
 					</BreadcrumbList>
 				</Breadcrumb>
 				<hr className="h-px border-none bg-border" />
-				<div className="px-10 max-w-screen-2xl">
+				<section className="px-10 max-w-screen-2xl mx-auto">
 					<div className="flex flex-row gap-28 py-10">
 						<DeploymentSidebar />
 						<main css={{ flexGrow: 1 }}>
@@ -60,7 +60,7 @@ const DeploymentSettingsLayout: FC = () => {
 							</Suspense>
 						</main>
 					</div>
-				</div>
+				</section>
 			</div>
 		</RequirePermission>
 	);

site/src/pages/UserSettingsPage/Layout.tsx

@@ -1,6 +1,5 @@
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
-import { Stack } from "components/Stack/Stack";
 import { useAuthenticated } from "hooks";
 import { type FC, Suspense } from "react";
 import { Outlet } from "react-router";
@@ -15,14 +14,14 @@ const Layout: FC = () => {
 			<title>{pageTitle("Settings")}</title>
 
 			<Margins>
-				<Stack css={{ padding: "48px 0" }} direction="row" spacing={6}>
+				<div className="flex flex-row gap-12 py-12">
 					<Sidebar user={me} />
 					<Suspense fallback={<Loader />}>
-						<main css={{ maxWidth: 800, width: "100%" }}>
+						<main className="w-full max-w-full">
 							<Outlet />
 						</main>
 					</Suspense>
-				</Stack>
+				</div>
 			</Margins>
 		</>
 	);