From 84b73d1a8362f718aebe3b66f1f4f2ac36ac551a Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sun, 20 Sep 2026 19:34:47 +0200
Subject: [PATCH] fix(planner): the last day scrolls into view beside the road
 trip switch

With the road trip addon on, the desktop panel puts the Days / Road trip
switch above the day list. The list was sized by height alone, so it ran the
switch's height past the panel's clipped edge and the last day could never
be scrolled into view. It is a flex child of the panel now and yields that
height; where nothing sits above it, the height still fills the panel.
---
 client/src/components/Planner/DayPlanSidebar.test.tsx | 11 +++++++++++
 client/src/components/Planner/DayPlanSidebar.tsx      |  6 +++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Planner/DayPlanSidebar.test.tsx b/client/src/components/Planner/DayPlanSidebar.test.tsx
index c2cd1d9c9..7a6b3f884 100644
--- a/client/src/components/Planner/DayPlanSidebar.test.tsx
+++ b/client/src/components/Planner/DayPlanSidebar.test.tsx
@@ -223,6 +223,17 @@ describe('DayPlanSidebar', () => {
     expect(document.body).toBeInTheDocument()
   })
 
+  it('FE-PLANNER-DAYPLAN-001b: the panel yields to whatever the desktop shell puts above it', () => {
+    // With the Days / Road trip switch above it, a panel sized by height alone ran the
+    // switch's height past the clipped edge and the last day could never be scrolled
+    // into view. jsdom lays nothing out, so the sizing itself is the assertion.
+    const { container } = render(<DayPlanSidebar {...makeDefaultProps()} />)
+    const panel = container.firstElementChild as HTMLElement
+    expect(panel.style.flex).toBe('1 1 0%')
+    expect(panel.style.minHeight).toBe('0px')
+    expect(panel.style.height).toBe('100%')
+  })
+
   it('FE-PLANNER-DAYPLAN-002: renders day titles', () => {
     const day = buildDay({ title: 'Amsterdam Day', date: '2025-06-01' })
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
diff --git a/client/src/components/Planner/DayPlanSidebar.tsx b/client/src/components/Planner/DayPlanSidebar.tsx
index ff565277b..f0296f8d3 100644
--- a/client/src/components/Planner/DayPlanSidebar.tsx
+++ b/client/src/components/Planner/DayPlanSidebar.tsx
@@ -1525,7 +1525,11 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
   }
 
   return (
-    <div ref={setPanel} data-touch-drag={dragDisabled ? undefined : ''} style={{ display: 'flex', flexDirection: 'column', height: '100%', position: 'relative', fontFamily: "var(--font-system)" }}>
+    // Sized as a flex child as well as by height: the desktop panel puts the Days / Road
+    // trip switch above this, and at height 100% alone the list ran the switch's height
+    // past the panel's clipped edge, so the last day could never be scrolled into view.
+    // Where nothing sits above it (the mobile shell), the height still fills the panel.
+    <div ref={setPanel} data-touch-drag={dragDisabled ? undefined : ''} style={{ display: 'flex', flexDirection: 'column', flex: '1 1 0%', minHeight: 0, height: '100%', position: 'relative', fontFamily: "var(--font-system)" }}>
       {/* Toolbar */}
       <DayPlanSidebarToolbar
         tripId={tripId}