diff --git a/apps/web/src/app/[locale]/iwooos/page.tsx b/apps/web/src/app/[locale]/iwooos/page.tsx index a7ef384f..927fe80d 100644 --- a/apps/web/src/app/[locale]/iwooos/page.tsx +++ b/apps/web/src/app/[locale]/iwooos/page.tsx @@ -23,7 +23,7 @@ import { } from 'lucide-react' import Link from 'next/link' import { useTranslations } from 'next-intl' -import { useState, type ReactNode } from 'react' +import { useEffect, useRef, useState, type ReactNode } from 'react' import { AppLayout } from '@/components/layout' type PostureMetric = { @@ -9072,6 +9072,20 @@ function IwoooSFirstProgressUnlockPathBoard() { function IwoooSFocusDeckBoard() { const t = useTranslations('iwooos.focusDeck') const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const } + const deckBodyRef = useRef(null) + const [isCompactDeck, setIsCompactDeck] = useState(false) + + useEffect(() => { + const node = deckBodyRef.current + if (!node) return + + const updateLayout = () => setIsCompactDeck(node.getBoundingClientRect().width < 700) + updateLayout() + + const observer = new ResizeObserver(updateLayout) + observer.observe(node) + return () => observer.disconnect() + }, []) return (