mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-18 21:16:47 +00:00
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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user