From 1ee5ee32586e101adcdcf29d5fafad80cc21659b Mon Sep 17 00:00:00 2001
From: davd-gzl <60177543+davd-gzl@users.noreply.github.com>
Date: Thu, 10 Sep 2026 13:21:05 +0200
Subject: [PATCH] Destination list: the station name is never squeezed out by
 the count chip

The from/to card was one flex row where the count chip and the arrow stub never shrink and the name may shrink to nothing: at a 1100px window every name got 6px. The name now sits on its own line above the chips, the shape the Ideas rows use, and a chip wider than the column wraps its words.
---
 src/styles.css   |  4 ++++
 src/ui/render.ts | 10 +++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index 00672f6..926bb3f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3323,6 +3323,10 @@ select.input::-ms-expand {
   flex-wrap: wrap;
   padding: 0;
 }
+/* A chip wider than the list wraps its words, as on a phone, rather than running under the arrow stub. */
+.dest-main > .dest-body .stat-chip {
+  white-space: normal;
+}
 .dest-main > .chev {
   align-self: stretch;
   margin-inline-start: 6px;
diff --git a/src/ui/render.ts b/src/ui/render.ts
index 7320882..6d89e1c 100644
--- a/src/ui/render.ts
+++ b/src/ui/render.ts
@@ -472,14 +472,18 @@ export function groupCardEl(
   const main = el(
     "button",
     {
-      class: "dest-main",
+      class: "dest-main dest-main-stacked",
       type: "button",
       attrs: { "aria-label": `${ctx.label(group.station)} — ${summary}` },
       on: { click: () => ctx.onOpenRoute(origin, destination) },
     },
     [
-      stationNameEl("dest-name", group.station, ctx.label(group.station)),
-      el("span", { class: "dest-meta", attrs: { "aria-hidden": "true" } }, meta),
+      // Name on its own line above the chips, as on the other discovery cards: in one row the
+      // fixed-width chip and duration leave it a few pixels in a narrow list, and "Lyon" vanishes.
+      el("div", { class: "dest-body" }, [
+        stationNameEl("dest-name", group.station, ctx.label(group.station)),
+        el("span", { class: "dest-meta", attrs: { "aria-hidden": "true" } }, meta),
+      ]),
       el("span", { class: "chev", attrs: { "aria-hidden": "true" } }, [icon(I.arrow)]),
     ],
   );