fix(tour): cap card max-height + raise placement threshold so step 1 fits its viewport slot

Author: jddunn

src/cli/dashboard/src/components/tour/GuidedTour.module.scss

@@ -39,6 +39,17 @@
   left: var(--card-left, auto);
   bottom: var(--card-bottom, auto);
   right: var(--card-right, auto);
+  // Cap height + scroll-on-overflow. Without this, long step bodies
+  // (e.g. step 1's full Quickstart description) plus the 14-step
+  // counter, action row, and tab badge made the card ~280px tall —
+  // taller than the 200px "below" threshold the placement code uses,
+  // so the Skip/Next buttons disappeared off the bottom of the
+  // viewport. Inner overflow-y: auto keeps every step visible
+  // regardless of how the placement math lands.
+  max-height: calc(100dvh - 32px);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .card.mobile {

src/cli/dashboard/src/components/tour/GuidedTour.tsx

@@ -329,21 +329,30 @@ export function GuidedTour({ activeTab, chatEnabled = true, onTabChange, onClose
 
   // Compute card position via CSS custom properties so the static styles
   // live in the SCSS module while runtime values flow through inline.
+  // Threshold reflects the real card footprint, not just header chrome:
+  // step 1 ("Quickstart — author from a brief") plus the 14-step
+  // counter + tab badge + Skip/Next action row lands around 280px on
+  // desktop, so a 200px "below" check happily placed the card in a
+  // slot it could never fit. The card itself is also max-heighted +
+  // overflow-y: auto in the SCSS so even worst-case anchors keep the
+  // controls reachable, but biasing toward "above" / "right" first
+  // avoids the awkward inner scroll on the most common targets.
+  const CARD_MIN_VERTICAL_SLOT = 320;
   const cardVars: CSSProperties = {};
   if (!isMobile && rect) {
     const below = vh - (rect.top + rect.height + 10);
     const above = rect.top - 10;
     const right = vw - (rect.left + rect.width + 10);
 
-    if (below >= 200) {
+    if (below >= CARD_MIN_VERTICAL_SLOT) {
       (cardVars as Record<string, string>)['--card-top'] = `${rect.top + rect.height + 16}px`;
       (cardVars as Record<string, string>)['--card-left'] = `${Math.max(16, Math.min(rect.left, vw - CARD_W - 16))}px`;
-    } else if (above >= 200) {
+    } else if (above >= CARD_MIN_VERTICAL_SLOT) {
       (cardVars as Record<string, string>)['--card-bottom'] = `${vh - rect.top + 16}px`;
       (cardVars as Record<string, string>)['--card-left'] = `${Math.max(16, Math.min(rect.left, vw - CARD_W - 16))}px`;
     } else if (right >= CARD_W + 24) {
       (cardVars as Record<string, string>)['--card-left'] = `${rect.left + rect.width + 16}px`;
-      (cardVars as Record<string, string>)['--card-top'] = `${Math.max(16, rect.top)}px`;
+      (cardVars as Record<string, string>)['--card-top'] = `${Math.max(16, Math.min(rect.top, vh - CARD_MIN_VERTICAL_SLOT - 16))}px`;
     } else {
       (cardVars as Record<string, string>)['--card-bottom'] = '24px';
       (cardVars as Record<string, string>)['--card-right'] = '24px';