From 397f504d0123b3d52a0b0e5285094b045b6d9939 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Wed, 29 Jul 2026 18:06:51 +0200
Subject: [PATCH] fix(planner): reach the day reorder popup with a finger too

The popup is a modal, so it portals out of the sidebar and misses the
opt-in its rows sit inside everywhere else. Its rows already carried a bare
draggable attribute, which on a tablet meant a long press selected the row
label and nothing moved.
---
 .../Planner/DayPlanSidebar.test.tsx           | 25 +++++++++++++++++++
 .../components/Planner/DayReorderPopup.tsx    |  5 +++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Planner/DayPlanSidebar.test.tsx b/client/src/components/Planner/DayPlanSidebar.test.tsx
index 99bbc6669..c23e760a4 100644
--- a/client/src/components/Planner/DayPlanSidebar.test.tsx
+++ b/client/src/components/Planner/DayPlanSidebar.test.tsx
@@ -3836,4 +3836,29 @@ describe('reordering the day plan with a finger (#1616)', () => {
       teardown()
     }
   })
+
+  // The reorder popup renders inside the sidebar, so it inherits the opt-in and
+  // its day rows become draggable by finger too. Pinned so it stays deliberate.
+  it('FE-PLANNER-DAYPLAN-191: a long press reorders days in the reorder popup', async () => {
+    const onReorderDays = vi.fn().mockResolvedValue(undefined)
+    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' }),
+    ]
+    render(<DayPlanSidebar {...makeDefaultProps({ days, onReorderDays, onAddDay: vi.fn() })} />)
+    fireEvent.click(screen.getByLabelText('Reorder days'))
+    const teardown = installTouchDragBridge()
+    try {
+      const rows = document.querySelectorAll('[draggable="true"]')
+      const from = [...rows].find(r => r.textContent?.includes('Day 1'))!
+      const to = [...rows].find(r => r.textContent?.includes('Day 3'))!
+      expect(from.closest('[data-touch-drag]')).not.toBeNull()
+      await longPress(from)
+      dragTo(to)
+      await waitFor(() => expect(onReorderDays).toHaveBeenCalled())
+    } finally {
+      teardown()
+    }
+  })
 })
diff --git a/client/src/components/Planner/DayReorderPopup.tsx b/client/src/components/Planner/DayReorderPopup.tsx
index 0fe7e37a7..d3a45b297 100644
--- a/client/src/components/Planner/DayReorderPopup.tsx
+++ b/client/src/components/Planner/DayReorderPopup.tsx
@@ -85,7 +85,10 @@ export function DayReorderPopup({ isOpen, days, t, locale, onReorder, onAddDay,
         {t('dayplan.reorderHint')}
       </p>
 
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+      {/* The popup is a modal, so it portals out of the planner and has to opt
+          into the long-press drag itself (#1616). Without this a finger only
+          selects the row text. */}
+      <div data-touch-drag style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
         {ordered.map((day, index) => (
           <div
             key={day.id}