Fixes and responsive character sheet.

shared/breakpoint.ts

@@ -0,0 +1,24 @@
+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)' },
+];
+
+export const breakpoint = reactive({ current: '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));
+}