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.
This commit is contained in:
Maurice
2026-09-20 19:34:47 +02:00
parent eeda3188c2
commit 84b73d1a83
2 changed files with 16 additions and 1 deletions
@@ -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] })} />)
@@ -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}