jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Jeff Emmett 2026-03-24 18:28:50 -07:00
parent 1eb4e1cb66
commit 348f86c179
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
modules/rtrips/components/folk-trips-planner.ts
View File

@ -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>
`;
}