@picked/svelte 0.0.1-dev.1793753513002 → 0.0.1-dev.1793756239746

package/dist/plugins/devtools/review/journey/JourneyMap.svelte

@@ -605,6 +605,8 @@
 
 <style>
   .map {
+    flex: 1;
+    min-height: 0;
     display: flex;
     flex-direction: column;
     gap: var(--space-2);
@@ -652,9 +654,9 @@
     position: relative;
     box-sizing: border-box;
     overflow: hidden;
-    /* Grows with a panel that is 90% of the viewport: what is left once the panel's header, the
-       view and journey row, the map's toolbar and its legend (about 223px together) have theirs. */
-    height: max(420px, calc(90vh - 223px));
+    /* Takes the height the toolbar and legend leave in the frame. */
+    flex: 1;
+    min-height: 0;
     border: 1px solid var(--color-gray-200);
     border-radius: var(--radius-lg);
     background-color: var(--color-white);

package/dist/plugins/devtools/review/journey/JourneyPanel.svelte

@@ -16,7 +16,7 @@
    * same vocabulary modules, so a screen is named identically in each and they cannot drift.
    */
   import type { Picked } from '@picked/client'
-  import { Badge, Banner, Button, Card, EmptyState, Stack } from '../../ui'
+  import { Badge, Banner, Button, Card, EmptyState } from '../../ui'
   import { buildOutline, buildTimeline, buildTree } from '../../derive'
   import type { FieldLookup, OutlineRow, SafetyPosture, Trails } from '../../derive'
   import type { JourneyView } from '../../session'
@@ -216,7 +216,7 @@
   }
 </script>
 
-<Stack direction="vertical" gap="medium">
+<div class="journey">
   {#if selectedKey === null}
     <EmptyState
       message="No journeys yet"
@@ -284,23 +284,30 @@
       <Banner status="warning" testId="devtools-journey-readonly">{posture.reason}</Banner>
     {/if}
 
-    <Card sectioned>
-      {#if rows.length === 0}
+    {#if rows.length === 0}
+      <Card sectioned>
         <EmptyState
           message="This journey has no screens yet"
           hint="Its flow has not loaded, or it is built entirely from background steps."
         />
-      {:else if layout !== null}
-        <!-- Keyed on the experience, so a switch re-frames the map instead of keeping the last
-             journey's pan and zoom over a different tree. -->
+      </Card>
+    {:else if layout !== null}
+      <!-- The map and the timeline draw their own frames and fill what the panel leaves them.
+           Keyed on the experience, so a switch re-frames the map instead of keeping the last
+           journey's pan and zoom over a different tree. -->
+      <div class="frame" data-testid="devtools-journey-frame">
         {#key selectedKey}
           <JourneyMap {layout} {canNavigate} onJump={jumpTo} />
         {/key}
-      {:else if timeline !== null}
+      </div>
+    {:else if timeline !== null}
+      <div class="frame" data-testid="devtools-journey-frame">
         {#key selectedKey}
           <JourneyTimeline layout={timeline} {canNavigate} onJump={jumpTo} />
         {/key}
-      {:else}
+      </div>
+    {:else}
+      <Card sectioned>
         <ul class="outline" data-testid="devtools-journey">
           {#each rows as row (row.id)}
             <li class="row kind-{row.kind}" style:--depth={row.depth}>
@@ -350,12 +357,29 @@
             </li>
           {/each}
         </ul>
-      {/if}
-    </Card>
+      </Card>
+    {/if}
   {/if}
-</Stack>
+</div>
 
 <style>
+  /* Fills the pane, and never shrinks below 480px: a shorter pane scrolls. Everything inside
+     takes `min-height: 0`, so this floor is the only one and the views fit it exactly. */
+  .journey {
+    flex: 1;
+    min-height: 480px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+
+  .frame {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
   .controls {
     display: flex;
     align-items: center;

package/dist/plugins/devtools/review/journey/JourneyTimeline.svelte

@@ -369,28 +369,34 @@
 
 <style>
   .timeline {
+    flex: 1;
+    min-height: 0;
     display: flex;
     flex-direction: column;
     gap: var(--space-2);
   }
 
+  /* Takes the height the legend leaves in the frame, as the map's viewport does. */
   .body {
+    flex: 1;
+    min-height: 0;
     display: grid;
     grid-template-columns: minmax(0, 1fr) 320px;
+    grid-template-rows: minmax(0, 1fr);
     gap: var(--space-3);
   }
 
   @media (max-width: 760px) {
     .body {
       grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: minmax(0, 2fr) minmax(0, 1fr);
     }
   }
 
-  /* The same height as the map's viewport, so switching views never moves the page. */
   .scroller,
   .details {
     box-sizing: border-box;
-    height: max(420px, calc(90vh - 223px));
+    min-height: 0;
     border: 1px solid var(--color-gray-200);
     border-radius: var(--radius-lg);
     background-color: var(--color-white);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.1-dev.1793753513002",
+  "version": "0.0.1-dev.1793756239746",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -113,7 +113,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1793753513002",
+    "@picked/client": "0.0.1-dev.1793756239746",
     "effector": "^23.4.4",
     "svelte": "^5.55.7"
   },