A4 character sheet (summary and lobby), A4/wide switch, print to PDF

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HJhXuLD2Z6hv3Wqeq9UL9K

frontend/src/Lobbies.jsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import SheetView from './SheetView.jsx'
+import PaperSheet from './PaperSheet.jsx'
 
 const J = { 'Content-Type': 'application/json' }
 const send = (url, method, body) => fetch(url, { method, headers: J, body: body === undefined ? undefined : JSON.stringify(body) })
@@ -320,6 +321,14 @@ function CharTab({ cid, owner, rules, onOpen, name }) {
     const t = setInterval(() => !document.hidden && load(), 15000)
     return () => clearInterval(t)
   }, [cid])
+  const [view, setView] = useState(() => { try { return localStorage.getItem('aw_sheetview') === 'wide' ? 'wide' : 'paper' } catch { return 'paper' } })
+  const pick = (v) => { setView(v); try { localStorage.setItem('aw_sheetview', v) } catch { /* storage may be blocked */ } }
+  const viewSwitch = (
+    <span className="seg" role="group" aria-label="Sheet layout">
+      <button className={view === 'paper' ? 'on' : 'ghost'} onClick={() => pick('paper')} title="A4 page layout, compact">A4 sheet</button>
+      <button className={view === 'wide' ? 'on' : 'ghost'} onClick={() => pick('wide')} title="Expand to the full width">Wide</button>
+    </span>
+  )
   return (
     <div>
       <div className="row">
@@ -328,7 +337,8 @@ function CharTab({ cid, owner, rules, onOpen, name }) {
       </div>
       <p className="muted small">{owner ? `Played by ${owner}. ` : ''}Read-only, hover or tap a value to see how it is made up.</p>
       {err && <p className="warn">{err}</p>}
-      {data && <SheetView data={data} baseRules={rules} />}
+      {data && view === 'paper' && <PaperSheet data={data} baseRules={rules} tools={viewSwitch} />}
+      {data && view === 'wide' && <><div className="papertools">{viewSwitch}</div><SheetView data={data} baseRules={rules} /></>}
     </div>
   )
 }