fix(web): make IwoooS focus deck responsive

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<HTMLDivElement>(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 (
     <section
@@ -9080,9 +9094,10 @@ function IwoooSFocusDeckBoard() {
     >
       <div style={{ ...band, padding: 14, background: '#fffdf8', borderColor: '#ded8c8' }}>
         <div
+          ref={deckBodyRef}
           style={{
             display: 'grid',
-            gridTemplateColumns: 'minmax(0, 0.88fr) minmax(0, 1.9fr)',
+            gridTemplateColumns: isCompactDeck ? 'minmax(0, 1fr)' : 'minmax(0, 0.88fr) minmax(0, 1.9fr)',
             gap: 12,
             alignItems: 'stretch',
           }}
@@ -9111,7 +9126,7 @@ function IwoooSFocusDeckBoard() {
             <div
               style={{
                 display: 'grid',
-                gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+                gridTemplateColumns: isCompactDeck ? 'repeat(auto-fit, minmax(min(100%, 86px), 1fr))' : 'repeat(3, minmax(0, 1fr))',
                 gap: 7,
                 marginTop: 4,
               }}