iv: fix layout grid rendering — screens render column divs directly

src/App.jsx

@@ -49,11 +49,7 @@ export default function App() {
   async function onSelectBackground(backgroundId) {
     const bg = BACKGROUNDS.find(b => b.id === backgroundId)
     if (!bg) return
-    const updated = {
-      ...state,
-      background_id: backgroundId,
-      den: bg.starting_den,
-    }
+    const updated = { ...state, background_id: backgroundId, den: bg.starting_den }
     setState(updated)
     await saveState(token, updated)
     setContext('forum')
@@ -83,40 +79,9 @@ export default function App() {
     return <div className="otivm-loading"><span>Consulting the ledger...</span></div>
   }
 
-  // Active context config for Shell
-  const activeCtx   = contextsJson.find(c => c.id === context) || contextsJson[0]
-  const subitems    = activeCtx.subitems || []
-
-  // Context header text
-  const ctxHeader = (
-    <div className="otivm-ctx-header">
-      <div>
-        <span className="otivm-ctx-eyebrow">Context</span>
-        <span className="otivm-ctx-name">{activeCtx.name} — {activeCtx.subtitle}</span>
-      </div>
-    </div>
-  )
-
-  // Screen content
-  let screen
-  if (context === 'actor') {
-    screen = (
-      <Actor
-        state={state}
-        onSelectBackground={onSelectBackground}
-      />
-    )
-  } else if (context === 'forum') {
-    screen = (
-      <Forum
-        state={state}
-        onStateChange={onStateChange}
-        onNewGame={onNewGame}
-      />
-    )
-  } else if (context === 'map') {
-    screen = <Map state={state} />
-  }
+  const activeCtx = contextsJson.find(c => c.id === context) || contextsJson[0]
+  const layout    = activeCtx.layout
+  const subitems  = activeCtx.subitems || []
 
   return (
     <Shell
@@ -124,45 +89,35 @@ export default function App() {
       activeId={context}
       onContext={setContext}
       subitems={subitems}
-      layout={activeCtx.layout}
+      layout={layout}
       token={token}
       onNewGame={onNewGame}
+      ctxName={activeCtx.name}
+      ctxSubtitle={activeCtx.subtitle}
     >
-      {ctxHeader}
-      <div className="otivm-layout-wrap">
-        {context === 'actor' && (
-          <div className={activeCtx.layout === 'three-col' ? 'otivm-layout-three-col' : ''}>
-            {activeCtx.layout === 'three-col' ? (
-              <>
-                <div>{filterCol(screen, 'left')}</div>
-                <div>{filterCol(screen, 'center')}</div>
-                <div>{filterCol(screen, 'right')}</div>
-              </>
-            ) : screen}
-          </div>
-        )}
-        {context === 'forum' && (
-          <div className={activeCtx.layout === 'two-col' ? 'otivm-layout-two-col' : ''}>
-            {activeCtx.layout === 'two-col' ? (
-              <>
-                <div>{filterCol(screen, 'left')}</div>
-                <div>{filterCol(screen, 'right')}</div>
-              </>
-            ) : screen}
-          </div>
-        )}
-        {context === 'map' && screen}
-      </div>
+      {/* ACTOR */}
+      {context === 'actor' && (
+        <Actor
+          state={state}
+          onSelectBackground={onSelectBackground}
+          layout={layout}
+        />
+      )}
+
+      {/* FORUM */}
+      {context === 'forum' && (
+        <Forum
+          state={state}
+          onStateChange={onStateChange}
+          onNewGame={onNewGame}
+          layout={layout}
+        />
+      )}
+
+      {/* MAP */}
+      {context === 'map' && (
+        <Map state={state} layout={layout} />
+      )}
     </Shell>
   )
 }
-
-// Extract children from a screen component by their col prop.
-// Actor and Forum return arrays of Section elements with col props.
-function filterCol(screen, col) {
-  if (!screen) return null
-  const children = screen.props?.children
-  if (!children) return null
-  const arr = Array.isArray(children) ? children : [children]
-  return arr.filter(c => c?.props?.col === col)
-}