fix(ui): centralize default layout width and update default setting

internal/site/src/components/routes/settings/general.tsx

@@ -12,7 +12,7 @@ import Slider from "@/components/ui/slider"
 import { HourFormat, Unit } from "@/lib/enums"
 import { dynamicActivate } from "@/lib/i18n"
 import languages from "@/lib/languages"
-import { $userSettings } from "@/lib/stores"
+import { $userSettings, defaultLayoutWidth } from "@/lib/stores"
 import { chartTimeData, currentHour12 } from "@/lib/utils"
 import type { UserSettings } from "@/types"
 import { saveSettings } from "./layout"
@@ -21,7 +21,7 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 	const [isLoading, setIsLoading] = useState(false)
 	const { i18n } = useLingui()
 	const currentUserSettings = useStore($userSettings)
-	const layoutWidth = currentUserSettings.layoutWidth ?? 1500
+	const layoutWidth = currentUserSettings.layoutWidth ?? defaultLayoutWidth
 
 	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
 		e.preventDefault()

internal/site/src/lib/stores.ts

@@ -3,6 +3,9 @@ import type { AlertMap, ChartTimes, SystemRecord, UserSettings } from "@/types"
 import { pb } from "./api"
 import { Unit } from "./enums"
 
+/** Default layout width. Used as fallback when user setting is unset. */
+export const defaultLayoutWidth = 1580
+
 /** Store if user is authenticated */
 export const $authenticated = atom(pb.authStore.isValid)
 

internal/site/src/main.tsx

@@ -14,7 +14,14 @@ 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, $userSettings } from "@/lib/stores.ts"
+import {
+	$authenticated,
+	$copyContent,
+	$direction,
+	$publicKey,
+	$userSettings,
+	defaultLayoutWidth,
+} from "@/lib/stores.ts"
 import * as systemsManager from "@/lib/systemsManager.ts"
 
 const LoginPage = lazy(() => import("@/components/login/login.tsx"))
@@ -100,7 +107,7 @@ const Layout = () => {
 					<LoginPage />
 				</Suspense>
 			) : (
-				<div style={{ "--container": `${userSettings.layoutWidth ?? 1580}px` } as React.CSSProperties}>
+				<div style={{ "--container": `${userSettings.layoutWidth ?? defaultLayoutWidth}px` } as React.CSSProperties}>
 					<div className="container">
 						<Navbar />
 					</div>