From f4ee06e93127f0aac9ebc7a9e265ca68d8c4d7c7 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Tue, 18 Aug 2026 17:27:20 +0200
Subject: [PATCH] fix(share): stop the day header collapsing the title into a
 one-word column
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The day card header on /shared/ is a single nowrap flex row, and its title block
carried `flex: 1`. That is a flex base size of 0, so the moment an accommodation
chip pushes the row past the available width the block freezes at its min-content
width while the chip and the place count stay at full content width — the ~37px
column with one word, or one CJK character, per line from #1955.

It is content-driven, not viewport-driven, which is why it also showed up on a
1149px-wide desktop window: one long hotel name, or a day carrying both a
check-out and a check-in, is enough. A breakpoint would have been the wrong fix.

The title block now shrinks proportionally and truncates, the chip can shrink and
truncates too, and the place count is pinned so it never wraps or gets pushed out
of the card. The chip also moves off its hard-coded 9px onto the 10.5px the day
sidebar uses in the app, with an icon to match — at 9px it was barely readable.
---
 client/src/pages/SharedTripPage.tsx | 40 ++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/client/src/pages/SharedTripPage.tsx b/client/src/pages/SharedTripPage.tsx
index d16cc9df2..153a0a754 100644
--- a/client/src/pages/SharedTripPage.tsx
+++ b/client/src/pages/SharedTripPage.tsx
@@ -486,17 +486,34 @@ export default function SharedTripPage() {
                       >
                         {di + 1}
                       </div>
-                      <div style={{ flex: 1 }}>
+                      {/* `flex: 1` alone gives this block a base size of 0, so the moment an
+                          accommodation chip pushes the row over the available width it freezes
+                          at its min-content width — a ~37px column with one word, or one CJK
+                          character, per line (#1955). Base auto plus minWidth 0 lets it shrink
+                          proportionally and truncate instead. */}
+                      <div style={{ flex: '1 1 auto', minWidth: 0 }}>
                         <div
                           className="text-[#111827]"
-                          style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600 }}
+                          style={{
+                            fontSize: 'calc(14px * var(--fs-scale-body, 1))',
+                            fontWeight: 600,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                          }}
                         >
                           {day.title || t('dayplan.dayN', { n: day.day_number })}
                         </div>
                         {day.date && (
                           <div
                             className="text-[#9ca3af]"
-                            style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', marginTop: 1 }}
+                            style={{
+                              fontSize: 'calc(11px * var(--fs-scale-caption, 1))',
+                              marginTop: 1,
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              whiteSpace: 'nowrap',
+                            }}
                           >
                             {new Date(day.date + 'T00:00:00Z').toLocaleDateString(locale, {
                               weekday: 'short',
@@ -512,18 +529,27 @@ export default function SharedTripPage() {
                           key={acc.id}
                           className="bg-[#f3f4f6] text-[#6b7280]"
                           style={{
-                            fontSize: 'calc(9px * var(--fs-scale-caption, 1))',
+                            fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))',
                             padding: '2px 6px',
                             borderRadius: 4,
                             display: 'flex',
                             alignItems: 'center',
-                            gap: 3,
+                            gap: 4,
+                            minWidth: 0,
                           }}
                         >
-                          <Hotel size={8} /> {acc.place_name}
+                          <Hotel size={11} style={{ flexShrink: 0 }} />
+                          {/* Own span: text-overflow needs a block container, and the chip
+                              itself is a flex container. */}
+                          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                            {acc.place_name}
+                          </span>
                         </span>
                       ))}
-                      <span className="text-[#9ca3af]" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))' }}>
+                      <span
+                        className="text-[#9ca3af]"
+                        style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', flexShrink: 0, whiteSpace: 'nowrap' }}
+                      >
                         {dayPlaceCount} {t('shared.places')}
                       </span>
                     </div>