From d496dd5d30c7b4f28815bf67a6c39bef83e6d92c Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sat, 10 Oct 2026 11:39:10 +0200
Subject: [PATCH] fix(planner): a day without a stay centres its name on the
 day badge

---
 .../components/Planner/DayPlanSidebar.test.tsx    | 15 +++++++++++++++
 client/src/components/Planner/DayPlanSidebar.tsx  |  9 ++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

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(<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 = [
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
                   )}
                 </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