From e4f2eaf336adc4d5bb6c521e16d0e933243540cf Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sun, 6 Sep 2026 15:39:30 +0200
Subject: [PATCH] fix(trips): stop the two date fields overlapping in the trip
 dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A grid item defaults to min-width:auto, so the two date cells never went below
the width of their contents: a long locale date plus the keyboard button beside
it pushed each cell past its track, and on a phone the end date came to sit on
top of the start date with its own button clipped off the edge. Measured on a
412px viewport, the row overflowed its container by 30px.

Both cells get min-w-0 so the track wins, and the picker's own trigger gets it
too, which is what finally lets the ellipsis it already carries do its job
rather than the button simply growing. "12. Sept. 2026" now reads "12. Sept…"
in a narrow column instead of escaping it.

Keeping the locale format: the report suggests ISO 8601, but the date is
formatted from the user's language everywhere in the app, and the overlap is
the layout, not the wording.
---
 client/src/components/Trips/TripFormModal.tsx         | 7 +++++--
 client/src/components/shared/CustomDateTimePicker.tsx | 5 +++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Trips/TripFormModal.tsx b/client/src/components/Trips/TripFormModal.tsx
index 228e97d76..5b954eaa1 100644
--- a/client/src/components/Trips/TripFormModal.tsx
+++ b/client/src/components/Trips/TripFormModal.tsx
@@ -534,14 +534,17 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
 
         <div className={panelCls}>
 
+        {/* min-w-0 on both cells: a grid item defaults to min-width:auto, so a
+            long date ("12. Sept. 2026" and the keyboard button beside it) pushed
+            the cell past its track and the two columns overlapped (#2267). */}
         <div className="grid grid-cols-2 gap-3">
-          <div>
+          <div className="min-w-0">
             <label className={labelCls}>
               <Calendar className="w-3.5 h-3.5" />{t('dashboard.startDate')}
             </label>
             <CustomDatePicker value={formData.start_date} onChange={v => update('start_date', v)} placeholder={t('dashboard.startDate')} />
           </div>
-          <div>
+          <div className="min-w-0">
             <label className={labelCls}>
               <Calendar className="w-3.5 h-3.5" />{t('dashboard.endDate')}
             </label>
diff --git a/client/src/components/shared/CustomDateTimePicker.tsx b/client/src/components/shared/CustomDateTimePicker.tsx
index e0497fbe5..2c8436b23 100644
--- a/client/src/components/shared/CustomDateTimePicker.tsx
+++ b/client/src/components/shared/CustomDateTimePicker.tsx
@@ -304,6 +304,11 @@ export function CustomDatePicker({
             aria-haspopup="dialog"
             style={{
               flex: 1,
+              // Without this the trigger never goes below its text width, so the
+              // ellipsis on the label below is unreachable and the button
+              // overflows its column instead. A long locale date ("12. Sept.
+              // 2026") in a two-column grid is exactly that case (#2267).
+              minWidth: 0,
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',