make layout width adjustable

internal/site/src/main.tsx

@@ -14,7 +14,7 @@ import { Toaster } from "@/components/ui/toaster.tsx"
 import { alertManager } from "@/lib/alerts"
 import { pb, updateUserSettings } from "@/lib/api.ts"
 import { dynamicActivate, getLocale } from "@/lib/i18n"
-import { $authenticated, $copyContent, $direction, $publicKey } from "@/lib/stores.ts"
+import { $authenticated, $copyContent, $direction, $publicKey, $userSettings } from "@/lib/stores.ts"
 import * as systemsManager from "@/lib/systemsManager.ts"
 
 const LoginPage = lazy(() => import("@/components/login/login.tsx"))
@@ -71,6 +71,7 @@ const Layout = () => {
 	const authenticated = useStore($authenticated)
 	const copyContent = useStore($copyContent)
 	const direction = useStore($direction)
+	const userSettings = useStore($userSettings)
 
 	useEffect(() => {
 		document.documentElement.dir = direction
@@ -96,7 +97,7 @@ const Layout = () => {
 					<LoginPage />
 				</Suspense>
 			) : (
-				<>
+				<div style={{"--container": `${userSettings.layoutWidth ?? 1480}px`} as React.CSSProperties}>
 					<div className="container">
 						<Navbar />
 					</div>
@@ -108,7 +109,7 @@ const Layout = () => {
 							</Suspense>
 						)}
 					</div>
-				</>
+				</div>
 			)}
 		</DirectionProvider>
 	)