fix(web): improve font scale compatibility and defaults

web/src/hooks/useFontScale.ts

@@ -20,6 +20,8 @@ function isBrowser(): boolean {
     return typeof window !== 'undefined' && typeof document !== 'undefined'
 }
 
+const useIsomorphicLayoutEffect = isBrowser() ? useLayoutEffect : useEffect
+
 function safeGetItem(key: string): string | null {
     if (!isBrowser()) {
         return null
@@ -79,7 +81,7 @@ export function initializeFontScale(): void {
 export function useFontScale(): { fontScale: FontScale; setFontScale: (scale: FontScale) => void } {
     const [fontScale, setFontScaleState] = useState<FontScale>(getInitialFontScale)
 
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         applyFontScale(fontScale)
     }, [fontScale])
 

web/src/index.css

@@ -90,7 +90,7 @@
 }
 
 html {
-    font-size: calc(100% * var(--app-font-scale));
+    font-size: calc(100% * var(--app-font-scale, 1));
 }
 
 html,
@@ -105,6 +105,7 @@ body {
 }
 
 body {
+    font-size: 1rem;
     background: var(--app-bg);
     color: var(--app-fg);
 }