k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-10-18 21:16:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(share): stop the day header collapsing the title into a one-word column

Browse Source 
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.
This commit is contained in:
Maurice
2026-08-18 17:27:20 +02:00
committed by Maurice
parent 28765e220b
commit f4ee06e931
1 changed files with 33 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/SharedTripPage.tsx
+33 -7
View File
@@ -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>