fix(planner): a day without a stay centres its name on the day badge

This commit is contained in:
Maurice
2026-10-10 11:39:10 +02:00
parent b31c2ff1d2
commit d496dd5d30
2 changed files with 21 additions and 3 deletions
@@ -4464,6 +4464,21 @@ describe('DayPlanSidebar', () => {
expect(onPlaceClick).toHaveBeenCalledWith(8)
})
it('FE-PLANNER-DAYPLAN-176c: a day without a stay centres its name on the badge, a day with one keeps it at the top', () => {
const days = [
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
]
const accommodations: Accommodation[] = [
{ id: 1, trip_id: 1, start_day_id: 11, end_day_id: 12, place_id: 9, place_lat: 51.5, place_lng: -0.12, place_name: 'Hotel' },
]
render(<DayPlanSidebar {...makeDefaultProps({ days, accommodations })} />)
expect(dayHeader('Day 1').style.alignItems).toBe('center')
expect(dayHeader('Day 1').querySelector('[data-dp="day-pill"]')).toBeNull()
expect(dayHeader('Day 2').style.alignItems).toBe('flex-start')
})
it('FE-PLANNER-DAYPLAN-176b: a booked stay opens its booking from the pill, the name still opens the place (#2363)', async () => {
const user = userEvent.setup()
const days = [
@@ -1614,6 +1614,9 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
return 0
})
const activeRentals = getActiveRentalsForDay(day.id)
// A day with pills under its name keeps the name at the badge's top edge; a day
// with only its name centres it on the badge instead of leaving it hanging high.
const hasDayPills = dayAccs.length > 0 || activeRentals.length > 0 || !!dayTint?.label
// Everything a day can be given, behind one "+" rather than a grid of four icons.
const addItems = [
onCreatePlaceForDay && { label: t('dayplan.addPlaceHere'), icon: MapPin, onClick: () => onCreatePlaceForDay(day.id) },
@@ -1664,7 +1667,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
onDrop={e => handleDropOnDay(e, day.id)}
onContextMenu={canEditDays ? e => ctxMenu.open(e, dayMenuItems) : undefined}
style={{
display: 'flex', alignItems: 'flex-start', gap: 10,
display: 'flex', alignItems: hasDayPills ? 'flex-start' : 'center', gap: 10,
paddingBlock: 10, paddingInlineEnd: 8, paddingInlineStart: 10,
cursor: 'pointer',
background: isDragTarget ? DAY_HEAD_DROP : (isSelected ? DAY_HEAD_SELECTED : headerTintBg),
@@ -1708,7 +1711,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
)}
</div>
<div className="min-w-0 flex-1 pt-px">
<div className={`min-w-0 flex-1 ${hasDayPills ? 'pt-px' : ''}`}>
<div className="flex min-w-0 items-baseline gap-2">
<span className="min-w-0 truncate font-bold text-content" style={fs(13.5, 'body')}>
{heading.primary}
@@ -1719,7 +1722,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
</span>
)}
</div>
{(dayAccs.length > 0 || activeRentals.length > 0 || dayTint?.label) && (
{hasDayPills && (
<div className="mt-1.5 flex min-w-0 flex-wrap items-center gap-1">
{dayAccs.map(acc => {
const isCheckIn = acc.start_day_id === day.id