diff --git a/client/src/components/Planner/DayPlanSidebar.test.tsx b/client/src/components/Planner/DayPlanSidebar.test.tsx
index e01d95c77..00dad0da6 100644
--- a/client/src/components/Planner/DayPlanSidebar.test.tsx
+++ b/client/src/components/Planner/DayPlanSidebar.test.tsx
@@ -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()
+ 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 = [
diff --git a/client/src/components/Planner/DayPlanSidebar.tsx b/client/src/components/Planner/DayPlanSidebar.tsx
index 3a77a9666..3bd91f19c 100644
--- a/client/src/components/Planner/DayPlanSidebar.tsx
+++ b/client/src/components/Planner/DayPlanSidebar.tsx
@@ -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
)}
-
+
{heading.primary}
@@ -1719,7 +1722,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
)}
- {(dayAccs.length > 0 || activeRentals.length > 0 || dayTint?.label) && (
+ {hasDayPills && (
{dayAccs.map(acc => {
const isCheckIn = acc.start_day_id === day.id