Merge pull request 'v0.9.10 — world map fills entire tab area, no scrollbar (#36)' (#39) from world-map-full-area into master

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## v0.9.10 — 2026-09-29 12:57
+- The WORLD MAP now fills the entire available area of its tab (#36): in wide mode (pinned viewport, #21) the OPERATIONS Tabs are a full-height flex column and the world-map panel flexes to the bottom of the pane — the chart SVG sizes to the measured container instead of the old fixed 380px height, so there is no internal scrollbar on this tab at any window size. The scene keeps its viewBox and scales with the pane on resizes (pan/zoom stay accurate; re-fitting after a resize is intentionally not done). Narrow mode keeps the fixed fallback height since the page scrolls naturally there.
+- Follow-up to that layout change (CI run 382): the OPERATIONS Tabs root uses `min-height: 100%` instead of `height: 100%`. With a capped height, a tall tab's content overflowed the flex column and shrank items down to their automatic minimum — the tablist's `overflow-x: auto` zeroes that minimum per CSS spec, so the bar collapsed to ~0px with its buttons clipped out of hit-testing (every subsequent tab click failed with "div intercepts pointer events"); a capped box also released the sticky pin on deep scrolls. With min-height the box grows to fit tall tabs — the bar keeps its natural height and stays pinned across the whole scroll range, while WORLD MAP still fills the pane exactly.
+- e2e: the #31 spec no longer relies on WORLD MAP's overflow to force scrolling — it now switches to SHIP SYSTEMS, whose six always-present stacked system cards deterministically overflow the shrunk 1280×560 pane (waiting for the HULL card first), and asserts the same pinned tab bar.
+
 ## v0.9.9 — 2026-09-29 11:21
 - The WORLD MAP chart is now a force-directed graph (d3-force) with pan + zoom (d3-zoom), replacing the hand-rolled static NodeGraph render (#28): nodes settle into a dynamic layout seeded from the API coordinates and visibly rearrange after every jump, then auto zoom-to-fit so the whole network stays framed in the chart box. Wheel/drag pans and zooms the scene; only systems adjacent to the current one remain clickable (same `role=button` + name contract as before), all nodes lock while a jump is in flight, and a real pan's trailing click never triggers an accidental jump. Jump flow (`POST /api/jump`, turn counter, `onJumped` refresh from #30) is unchanged; the now-orphaned hand-rolled `NodeGraph` component (world map was its only consumer) is deleted.
 

app/globals.css

@@ -160,6 +160,12 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* Radix Tabs hides inactive content via the `hidden` attribute, but inline display styles (the
+   #36 pane-fill flex chain on the WORLD MAP tab) outrank the UA stylesheet — restore semantics. */
+[hidden] {
+  display: none !important;
+}
+
 #root {
   min-height: 100vh;
 }

components/mission-control.tsx

@@ -383,23 +383,28 @@ export function MissionControl() {
               </PanelHeader>
 
               <PanelContent style={{ padding: 0, flex: 1, minHeight: 0, overflowY: 'auto' }}>
+                {/* Flex column at least pane-tall so a tab can fill it (#36). min-height, not height:
+                    tall tabs grow the box to their content, which keeps the sticky tab bar's containing
+                    block spanning the whole scroll range (a capped height releases the pin on deep
+                    scrolls) and means items never overflow the box, so nothing gets shrink-squashed. */}
                 <Tabs
                   value={activeTab ?? 'world-map'}
                   onValueChange={(v) => {
                     setActiveTab(v)
                     window.localStorage.setItem(ACTIVE_TAB_KEY, v) // #27 — keep the tab across refreshes
                   }}
+                  style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}
                 >
-                  <TabsList
-                    style={{
-                      padding: '0 1rem',
-                      background: 'var(--surface-raised)', // opaque — content scrolls under it (#31)
-                      overflowX: 'auto',
-                      position: 'sticky', // #31 — pinned in both modes: to the top of the OPERATIONS
-                      top: 0, // scroll area (wide) and to the viewport when the body scrolls (narrow)
-                      zIndex: 1,
-                    }}
-                  >
+                    <TabsList
+                      style={{
+                        padding: '0 1rem',
+                        background: 'var(--surface-raised)', // opaque — content scrolls under it (#31)
+                        overflowX: 'auto',
+                        position: 'sticky', // #31 — pinned in both modes: to the top of the OPERATIONS
+                        top: 0, // scroll area (wide) and to the viewport when the body scrolls (narrow)
+                        zIndex: 1,
+                      }}
+                    >
                     <TabsTrigger value="world-map">WORLD MAP</TabsTrigger>
                     <TabsTrigger value="local-system">LOCAL SYSTEM</TabsTrigger>
                     <TabsTrigger value="crew">CREW</TabsTrigger>
@@ -409,9 +414,14 @@ export function MissionControl() {
                     <TabsTrigger value="event-log">EVENT LOG</TabsTrigger>
                   </TabsList>
 
-                  {/* WORLD MAP TAB — live data from /api/world */}
-                  <TabsContent value="world-map" style={{ margin: 0, padding: '1rem' }}>
-                    <WorldMapPanel height={380} onJumped={refreshSystem} />
+                  {/* WORLD MAP TAB — live data from /api/world; fills the whole pane (#36). Wide mode:
+                      flex column so the panel can fill it with pure flex sizing (a min-height-only
+                      container breaks percentage resolution, so no height:'100%' anywhere in this chain). */}
+                  <TabsContent
+                    value="world-map"
+                    style={{ margin: 0, padding: '1rem', ...(!narrow ? { display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 } : {}) }}
+                  >
+                    <WorldMapPanel height={380} narrow={narrow} onJumped={refreshSystem} />
                   </TabsContent>
 
                   {/* LOCAL SYSTEM TAB — live data (state owned by MissionControl; scans report up) */}

components/world-map.tsx

@@ -11,10 +11,12 @@ import type { WorldState } from '@/lib/game/save'
 // pan + zoom (d3-zoom), per #28. Clicking a system adjacent to the current one jumps there
 // (same POST /api/jump flow as before); the current and unreachable systems are dimmed and not
 // clickable, and every node is locked while a jump is in flight. Turn-based: fetch on mount,
-// refetch via the jump response — no polling.
+// refetch via the jump response — no polling. In wide mode (#36) the chart fills the whole tab
+// pane (no internal scrollbar); narrow keeps a fixed fallback height since the page scrolls naturally there.
 
 interface WorldMapPanelProps {
-  height?: number
+  height?: number // fallback chart height when the pane gives no definite space (narrow mode)
+  narrow?: boolean
   onJumped?: () => void // #30 — let the parent refresh /api/system after a successful jump
 }
 
@@ -44,7 +46,9 @@ const STATUS_COLOR: Record<NodeStatus, string> = {
   offline: 'var(--border)',
 }
 
-export function WorldMapPanel({ height = 380, onJumped }: WorldMapPanelProps) {
+export function WorldMapPanel({ height = 380, narrow = false, onJumped }: WorldMapPanelProps) {
+  // Wide mode: the flex chain (Tabs → TabsContent → this panel) provides a definite pane size to fill (#36).
+  const filling = !narrow
   const [world, setWorld] = useState<WorldState | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [jumpingId, setJumpingId] = useState<number | null>(null)
@@ -99,7 +103,10 @@ export function WorldMapPanel({ height = 380, onJumped }: WorldMapPanelProps) {
     const container = containerRef.current
     if (!container || !world) return
 
+    // Measured pane size (#36): the flex chain gives a definite box in wide mode; `height` is the
+    // fallback when the container has no resolved size yet (narrow flow, or tab hidden on load).
     const W = container.clientWidth || 800
+    const H = container.clientHeight || height
     const current = world.systems.find((s) => s.current)!
     // Systems one jump away — the only clickable chart fields (the same set as before).
     const reachableIds = new Set(
@@ -116,15 +123,17 @@ export function WorldMapPanel({ height = 380, onJumped }: WorldMapPanelProps) {
           ? (s.discovered ? 'DISCOVERED // JUMP' : 'UNKNOWN // JUMP')
           : s.discovered ? 'DISCOVERED' : 'UNKNOWN',
       x: (s.x / 100) * W, // seed from the API coordinates so the layout settles near the old chart
-      y: (s.y / 100) * height,
+      y: (s.y / 100) * H,
     }))
     const links: ChartLink[] = world.edges.map(([a, b]) => ({ source: a, target: b }))
 
+    // width/height 100% + fixed viewBox: the scene scales with the pane on window resizes without
+    // rebuilding (pan/zoom stay accurate — d3 maps pointers through the SVG transform matrix).
     const svg = select(container)
       .append('svg')
       .attr('width', '100%')
-      .attr('height', height)
-      .attr('viewBox', `0 0 ${W} ${height}`)
+      .attr('height', '100%')
+      .attr('viewBox', `0 0 ${W} ${H}`)
       .style('display', 'block')
 
     const root = svg.append('g')
@@ -162,9 +171,9 @@ export function WorldMapPanel({ height = 380, onJumped }: WorldMapPanelProps) {
         maxY = Math.max(maxY, (n.y ?? 0) + NODE_H / 2)
       }
       const pad = 16
-      const scale = Math.min(W / (maxX - minX + pad * 2), height / (maxY - minY + pad * 2))
+      const scale = Math.min(W / (maxX - minX + pad * 2), H / (maxY - minY + pad * 2))
       const tx = W / 2 - scale * ((minX + maxX) / 2)
-      const ty = height / 2 - scale * ((minY + maxY) / 2)
+      const ty = H / 2 - scale * ((minY + maxY) / 2)
       svg.call(zoomBehavior.transform, zoomIdentity.translate(tx, ty).scale(scale))
     }
 
@@ -220,7 +229,7 @@ export function WorldMapPanel({ height = 380, onJumped }: WorldMapPanelProps) {
     const simulation = forceSimulation(nodes)
       .force('link', forceLink<ChartNode, ChartLink>(links).id((d) => d.id).distance(130).strength(0.25))
       .force('charge', forceManyBody().strength(-420))
-      .force('center', forceCenter(W / 2, height / 2))
+      .force('center', forceCenter(W / 2, H / 2))
       .force('collide', forceCollide(60))
       .on('end', fitToNodes)
       .on('tick', () => {
@@ -256,10 +265,19 @@ export function WorldMapPanel({ height = 380, onJumped }: WorldMapPanelProps) {
     )
   }
 
+  // flex (not height:'100%'): the pane chain is sized by min-height, where percentages don't resolve
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-      {/* Same wrapper + title bar as the old hand-rolled chart; d3 owns everything inside the box. */}
-      <div style={{ border: '1px solid var(--border)', background: 'var(--surface)', fontFamily: 'var(--font-mono)', overflow: 'hidden' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', ...(filling ? { flex: 1, minHeight: 0 } : {}) }}>
+      {/* Wrapper + title bar; in wide mode the box flexes to fill the whole pane (#36). d3 owns everything inside it. */}
+      <div
+        style={{
+          border: '1px solid var(--border)',
+          background: 'var(--surface)',
+          fontFamily: 'var(--font-mono)',
+          overflow: 'hidden',
+          ...(filling ? { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' } : {}),
+        }}
+      >
         <div
           style={{
             padding: '0.4rem 0.75rem',
@@ -273,7 +291,7 @@ export function WorldMapPanel({ height = 380, onJumped }: WorldMapPanelProps) {
         >
           GALACTIC CHART // JUMP ROUTES — TURN {world.turn}
         </div>
-        <div ref={containerRef} style={{ width: '100%', height: `${height}px` }} />
+        <div ref={containerRef} style={{ width: '100%', ...(filling ? { flex: 1, minHeight: 0 } : { height: `${height}px` }) }} />
       </div>
 
       {error && (

e2e/smoke.spec.ts

@@ -87,8 +87,11 @@ test('tab bar stays pinned while panel content scrolls (#31)', async ({ page })
   // Shrink the viewport so the center pane's content overflows its scroll area regardless of save state.
   await page.setViewportSize({ width: 1280, height: 560 });
 
-  // WORLD MAP is always tall enough to overflow (fixed-height chart) — deterministic across retries.
-  await page.getByRole('tab', { name: 'WORLD MAP' }).click();
+  // SHIP SYSTEMS always renders six stacked system cards (seeded at start, never removed) — tall
+  // enough to overflow the shrunk pane on any save state, deterministic across retries. (#36 made
+  // WORLD MAP fill its pane instead of overflowing it, so it can no longer force the scroll.)
+  await page.getByRole('tab', { name: 'SHIP SYSTEMS' }).click();
+  await expect(page.getByRole('heading', { name: 'HULL' })).toBeVisible();
 
   const tablist = page.getByRole('tablist');
   await expect(tablist).toBeVisible();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "space-wanderer",
-  "version": "0.9.9",
+  "version": "0.9.10",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",