{tour.name}
- {/* One line like a plan row's: the badges keep their place, the description gives way,
- and what does not fit fades out instead of ending at a hard edge. */}
+ {tour.description && (
+
+ {tour.description}
+
+ )}
+ {/* One line of whole badges, most important first: one that does not fit wraps onto a
+ second line the fixed height hides, so a narrow sidebar shows two and never half of one. */}
-
+
- {tour.description && (
-
- {tour.description}
-
- )}
@@ -108,9 +108,9 @@ function TourRowActions({ action, mapToggle, selected }: Pick {
expect(row).toHaveClass('bg-surface-selected')
})
- it('RS-01: trails the description after the badges on one line, as a plan row does', () => {
+ it('RS-01: puts the description on its own line between the name and the badges', () => {
const listed = { ...tour, description: 'A quiet path above the lake', website: 'https://www.komoot.com/tour/42', planned_duration_minutes: 95 }
render()
const row = screen.getByRole('option', { name: /Selected ridge walk/i })
const line = within(row).getByTestId('tour-metrics')
- expect(line).toHaveClass('flex-nowrap', 'overflow-hidden')
+ expect(line).toHaveClass('flex-wrap', 'h-6', 'overflow-hidden')
expect(line).toHaveTextContent('1 h 35 min')
- expect(within(line).getByTestId('tour-description-preview')).toHaveTextContent('A quiet path above the lake')
- expect(within(line).getByTestId('tour-description-preview')).toHaveClass('truncate')
+ const description = within(row).getByTestId('tour-description-preview')
+ expect(line).not.toContainElement(description)
+ expect(description).toHaveTextContent('A quiet path above the lake')
+ expect(description).toHaveClass('truncate')
+ expect(description.compareDocumentPosition(line) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
// The information link belongs to the detail, not the list row.
expect(row).not.toHaveTextContent('Komoot')
})