fix(ui): move NEXT TURN into the right pane — full width, no longer overlapped (#52)

components/next-turn-button.tsx

@@ -3,12 +3,16 @@
 import { useState } from 'react'
 import { Button } from '@/components/ui/button'
 
-// NEXT TURN — the manual tick control (5b): a fixed bottom-right button + the current turn from
-// the ship snapshot the shell holds. One click = POST /api/turn (no body); on success the shell
-// re-fetches its snapshots. Review Focus 4: the button is NEVER disabled by game state — an
-// empty queue is a FREE SKIP (the route always returns 200) — and the only transient is an
-// in-flight request, which the handler ignores. `disabled` is never set, so the cva
-// disabled:opacity-40 styling never applies either.
+// NEXT TURN — the manual tick control (5b): a normal-flow block in the right pane (#52) carrying
+// the current turn from the ship snapshot the shell holds. One click = POST /api/turn (no body);
+// on success the shell re-fetches its snapshots. Review Focus 4: the button is NEVER disabled by
+// game state — an empty queue is a FREE SKIP (the route always returns 200) — and the only
+// transient is an in-flight request, which the handler ignores. `disabled` is never set, so the
+// cva disabled:opacity-40 styling never applies either.
+// #52 — the fixed bottom-right overlay became the right pane's last flex child (mission-control):
+// full width, size MD, pinned to the pane bottom when the content is short (marginTop:auto) and
+// scrolling with the pane when the cargo list is long. No position/zIndex any more — so the
+// active-tasks strip can no longer paint over it.
 
 export function NextTurnButton({ turn, onTicked }: { turn: number | null; onTicked: () => void }) {
   const [inFlight, setInFlight] = useState(false)
@@ -30,14 +34,11 @@ export function NextTurnButton({ turn, onTicked }: { turn: number | null; onTick
   return (
     <div
       style={{
-        position: 'fixed',
-        right: '1rem',
-        bottom: '1rem',
-        zIndex: 60, // above the header/footer's 50
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'flex-end',
-        gap: '0.375rem',
+        gap: '0.5rem',
+        width: '100%',
+        marginTop: 'auto',
       }}
     >
       {error && (
@@ -46,7 +47,7 @@ export function NextTurnButton({ turn, onTicked }: { turn: number | null; onTick
       <span style={{ fontSize: '0.62rem', color: 'var(--text-muted)', letterSpacing: '0.12em' }}>
         TURN {turn ?? '—'}
       </span>
-      <Button variant="EXEC" size="SM" onClick={tick}>
+      <Button variant="EXEC" size="MD" className="w-full" onClick={tick}>
         NEXT TURN
       </Button>
     </div>