From 348f86c179b0813c8487291e1cec6af32479b7ab Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 24 Mar 2026 18:28:50 -0700
Subject: [PATCH] fix(rtrips): fit all views on one screen without page
 scrolling

Pin nav bar and tabs at top, make tab content scroll within the remaining
viewport height. Uses flex layout with overflow-y: auto on the content
area. Applies to list, detail, and AI planner views.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 modules/rtrips/components/folk-trips-planner.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/modules/rtrips/components/folk-trips-planner.ts b/modules/rtrips/components/folk-trips-planner.ts
index 8c3862b..93d037f 100644
--- a/modules/rtrips/components/folk-trips-planner.ts
+++ b/modules/rtrips/components/folk-trips-planner.ts
@@ -421,10 +421,12 @@ class FolkTripsPlanner extends HTMLElement {
 	private render() {
 		this.shadow.innerHTML = `
 		<style>
-			:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: var(--rs-text-primary); }
+			:host { display: flex; flex-direction: column; height: calc(100vh - 112px); font-family: system-ui, -apple-system, sans-serif; color: var(--rs-text-primary); overflow: hidden; }
 			* { box-sizing: border-box; }
+			.rtrips-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
+			.rtrips-scroll { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 8px; }
 
-			.rapp-nav { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; min-height: 36px; }
+			.rapp-nav { flex-shrink: 0; display: flex; gap: 8px; margin-bottom: 12px; align-items: center; min-height: 36px; }
 			.rapp-nav__back { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--rs-border-subtle); background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 13px; }
 			.rapp-nav__back:hover { color: var(--rs-text-primary); border-color: rgba(255,255,255,0.2); }
 			.rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: var(--rs-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -454,7 +456,7 @@ class FolkTripsPlanner extends HTMLElement {
 			.trip-budget-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
 			.trip-budget-label { display: flex; justify-content: space-between; font-size: 10px; color: var(--rs-text-muted); margin-top: 4px; }
 
-			.tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
+			.tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; flex-shrink: 0; }
 			.tab { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--rs-border-strong); background: var(--rs-bg-surface-sunken); color: var(--rs-text-muted); cursor: pointer; font-size: 12px; }
 			.tab:hover { border-color: var(--rs-bg-surface-raised); }
 			.tab.active { border-color: #14b8a6; color: #14b8a6; }
@@ -499,7 +501,7 @@ class FolkTripsPlanner extends HTMLElement {
 			.empty { text-align: center; color: var(--rs-text-muted); padding: 40px; }
 
 			/* AI Planner */
-			.ai-planner { display: flex; height: calc(100vh - 60px); gap: 0; }
+			.ai-planner { display: flex; flex: 1; min-height: 0; gap: 0; }
 			.ai-chat { width: 40%; min-width: 280px; display: flex; flex-direction: column; border-right: 1px solid var(--rs-border, #e5e7eb); }
 			.ai-chat-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; }
 			.ai-msg { padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; font-size: 13px; line-height: 1.4; max-width: 85%; white-space: pre-wrap; word-break: break-word; }
@@ -537,7 +539,9 @@ class FolkTripsPlanner extends HTMLElement {
 		</style>
 
 		${this.error ? `<div style="color:var(--rs-error);text-align:center;padding:8px">${this.esc(this.error)}</div>` : ""}
+		<div class="rtrips-shell">
 		${this.view === "ai-planner" ? this.renderAiPlanner() : this.view === "list" ? this.renderList() : this.renderDetail()}
+		</div>
 		`;
 		this.attachListeners();
 		if (this.view !== 'ai-planner') this._tour.renderOverlay();
@@ -555,6 +559,7 @@ class FolkTripsPlanner extends HTMLElement {
 				<button class="rapp-nav__btn rapp-nav__btn--ai" id="btn-plan-ai">✨ Plan with AI</button>
 				<button class="rapp-nav__btn" id="btn-tour" style="font-size:0.78rem;padding:4px 10px;opacity:0.7">Tour</button>
 			</div>
+			<div class="rtrips-scroll">
 			${this.trips.length > 0 ? `<div class="trip-grid">
 				${this.trips.map(t => {
 					const st = this.getStatusStyle(t.status || "PLANNING");
@@ -584,6 +589,7 @@ class FolkTripsPlanner extends HTMLElement {
 				<p style="font-size:16px;margin-bottom:8px">No trips yet</p>
 				<p style="font-size:13px">Start planning your next adventure</p>
 			</div>`}
+			</div>
 		`;
 	}
 
@@ -603,7 +609,7 @@ class FolkTripsPlanner extends HTMLElement {
 					`<button class="tab ${this.tab === tab ? "active" : ""}" data-tab="${tab}">${tab.charAt(0).toUpperCase() + tab.slice(1)}</button>`
 				).join("")}
 			</div>
-			${this.renderTab()}
+			<div class="rtrips-scroll">${this.renderTab()}</div>
 		`;
 	}