make layout width adjustable

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

@@ -2,14 +2,17 @@
 import { Trans, useLingui } from "@lingui/react/macro"
 import { LanguagesIcon, LoaderCircleIcon, SaveIcon } from "lucide-react"
 import { useState } from "react"
+import { useStore } from "@nanostores/react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Separator } from "@/components/ui/separator"
+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 { chartTimeData, currentHour12 } from "@/lib/utils"
 import type { UserSettings } from "@/types"
 import { saveSettings } from "./layout"
@@ -17,6 +20,8 @@ import { saveSettings } from "./layout"
 export default function SettingsProfilePage({ userSettings }: { userSettings: UserSettings }) {
 	const [isLoading, setIsLoading] = useState(false)
 	const { i18n } = useLingui()
+	const currentUserSettings = useStore($userSettings)
+	const layoutWidth = currentUserSettings.layoutWidth ?? 1480
 
 	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
 		e.preventDefault()
@@ -73,6 +78,27 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 					</Select>
 				</div>
 				<Separator />
+				<div className="grid gap-2">
+					<div className="mb-2">
+						<h3 className="mb-1 text-lg font-medium">
+							<Trans>Layout width</Trans>
+						</h3>
+						<Label htmlFor="layoutWidth" className="text-sm text-muted-foreground leading-relaxed">
+							<Trans>Adjust the width of the main layout</Trans> ({layoutWidth}px)
+						</Label>
+					</div>
+					<Slider
+						id="layoutWidth"
+						name="layoutWidth"
+						value={[layoutWidth]}
+						onValueChange={(val) => $userSettings.setKey("layoutWidth", val[0])}
+						min={1000}
+						max={2000}
+						step={10}
+						className="w-full mb-1"
+					/>
+				</div>
+				<Separator />
 				<div className="grid gap-2">
 					<div className="mb-2">
 						<h3 className="mb-1 text-lg font-medium">

internal/site/src/index.css

@@ -34,6 +34,7 @@
 	--table-header: hsl(225, 6%, 97%);
 	--chart-saturation: 65%;
 	--chart-lightness: 50%;
+	--container: 1480px;
 }
 
 .dark {
@@ -149,7 +150,8 @@
 }
 
 @utility container {
-	@apply max-w-370 mx-auto px-4;
+	max-width: var(--container);
+	@apply mx-auto px-4;
 }
 
 @utility link {

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>
 	)

internal/site/src/types.d.ts

@@ -281,6 +281,7 @@ export interface UserSettings {
 	colorWarn?: number
 	colorCrit?: number
 	hourFormat?: HourFormat
+	layoutWidth?: number
 }
 
 type ChartDataContainer = {