Fix UI for mobile render

shared/breakpoint.ts

@@ -2,23 +2,33 @@ import { reactive } from '#shared/reactive';
 
 export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
-const breakpoints = [
-	{ name: 'sm',  query: '(min-width: 640px)' },
-	{ name: 'md',  query: '(min-width: 768px)' },
-	{ name: 'lg',  query: '(min-width: 1024px)' },
-	{ name: 'xl',  query: '(min-width: 1280px)' },
-	{ name: '2xl', query: '(min-width: 1536px)' },
+const BREAKPOINT_WIDTHS: [Breakpoint, number][] = [
+	['sm', 640],
+	['md', 768],
+	['lg', 1024],
+	['xl', 1280],
+	['2xl', 1536],
 ];
 
-export const breakpoint = reactive({ current: 'lg' as Breakpoint });
+export const breakpoint = reactive({ container: 'lg' as Breakpoint, viewport: 'lg' as Breakpoint });
 
-if (typeof window !== 'undefined') {
-	const updateBreakpoint = () => {
-		for (let i = breakpoints.length - 1; i >= 0; i--)
-			if (window.matchMedia(breakpoints[i]!.query).matches)
-				{ breakpoint.current = breakpoints[i]!.name as Breakpoint; break; }
-	};
-
-	updateBreakpoint();
-	breakpoints.forEach(b => window.matchMedia(b.query).addEventListener('change', updateBreakpoint));
+function updateBreakpoint()
+{
+	for (let i = BREAKPOINT_WIDTHS.length - 1; i >= 0; i--)
+	{
+		if (window.innerWidth >= BREAKPOINT_WIDTHS[i]![1])
+		{
+			const bp = BREAKPOINT_WIDTHS[i]![0];
+			breakpoint.viewport = bp;
+			breakpoint.container = bp;
+			return;
+		}
+	}
+}
+
+if (typeof window !== 'undefined')
+{
+	updateBreakpoint();
+
+	BREAKPOINT_WIDTHS.forEach(e => window.matchMedia(`(min-width: ${e[1]}px)`).addEventListener('change', updateBreakpoint));
 }