@autobusal/routes-order 1.37.7 → 1.37.9

package/Availability/Availability.tsx

@@ -17,8 +17,15 @@ interface Props {
  *
  * A week: enough that somebody asking "is there a bus this weekend" never
  * has to expand anything, few enough that the page still ends.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * Exported now: ./Skeleton reserves height for exactly this many day-blocks,
+ * not all thirty, because days 8-30 sit inside the closed <details> below
+ * and reserve nothing themselves. One number, so the skeleton and the real
+ * table can never disagree about how many days are "above the fold".
  */
-const VISIBLE = 7;
+export const VISIBLE = 7;
 
 /**
  * Real departures on real dates, for the next thirty days.

package/Availability/Skeleton.tsx

@@ -0,0 +1,119 @@
+import { TFunction } from 'i18next';
+import { Bone } from '../styles';
+import { Container, Heading, Lead, Wrap, Table } from './styles';
+import { VISIBLE } from './Availability';
+
+interface Props {
+  id: string
+  // Real city names where they are already known - see the call site in
+  // ../Sections/Sections, which has them from the SAME facts query this
+  // section's own heading is built from once it answers. Undefined only
+  // for the instant before that, in which case the heading is a bar rather
+  // than a guess at English words in the middle of another language.
+  from?: string
+  to?: string
+  t: TFunction<'common'>
+}
+
+const COLUMNS = 6;
+
+/**
+ * How many rows a day's placeholder reserves.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * Not knowable before the fetch answers - a quiet rural pair might run once
+ * a day, a trunk route ten times (see TRIPS in ./Schema, measured on
+ * Tirana-Thessaloniki). Three is not a guess pulled from nowhere: three rows
+ * across the seven VISIBLE days is twenty-one, and at this table's real
+ * padding and line-height that comes to almost exactly the ~1,290px,
+ * ~20-row block that was actually measured on production - see the
+ * height math this number produces below, which is what earns it the name
+ * "defensible" rather than "round". Under-reserving still shifts the page
+ * when the real rows land; over-reserving by a lot wastes screen before
+ * anyone has asked for anything - three is the number that keeps both
+ * errors small.
+ */
+const ROWS_PER_DAY = 3;
+
+const day = (index: number): JSX.Element => (
+  <tbody key={ index }>
+    <tr>
+      <th colSpan={ COLUMNS } scope="colgroup">
+        <Bone $width={ 35 } $height={ 16 } />
+      </th>
+    </tr>
+
+    { Array.from({ length: ROWS_PER_DAY }, (_, row) => (
+      <tr key={ row }>
+        <td><Bone $width={ 70 } /></td>
+        <td><Bone $width={ 70 } /></td>
+        <td><Bone $width={ 60 } /></td>
+        <td><Bone $width={ 80 } /></td>
+        <td><Bone $width={ 55 } /></td>
+        <td><Bone $width={ 60 } /></td>
+      </tr>
+    )) }
+  </tbody>
+);
+
+/**
+ * What the section looks like before /api/routes/search/availability
+ * answers.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * WHY THIS EXISTS. This section used to render nothing at all while the
+ * fetch was in flight (~1.2-1.4s) and then drop a ~1,290px block in all at
+ * once - measured CLS of 0.5172-1.1646 on pair pages, against a homepage
+ * (which has no such block) of 0.0000. The fix is not to load faster, it is
+ * to occupy the space from the FIRST paint, in the shape the real content
+ * will take, so the swap moves nothing.
+ *
+ * SAME BOXES, PLACEHOLDER CONTENT. This reuses Availability's own Container,
+ * Heading, Lead, Wrap and Table rather than a hand-measured approximation of
+ * them, so the two can never quietly drift apart - a padding change in
+ * ./styles resizes both at once. Only the day count (VISIBLE, imported
+ * rather than repeated) and the row count (ROWS_PER_DAY, above) are guesses;
+ * everything else is the real box model.
+ *
+ * aria-hidden, and no live region: a placeholder table announces nothing,
+ * because it has nothing to announce - the section's actual content is
+ * either the real table that replaces this, a few seconds later, or nothing
+ * at all.
+ */
+const AvailabilitySkeleton = ({ id, from, to, t }: Props): JSX.Element => (
+  <Container id={ id } className="box" aria-hidden="true">
+    <Heading>
+      { from && to
+        ? t('routes_order.availability.title', { from, to })
+        : <Bone $width={ 45 } $height={ 22 } /> }
+    </Heading>
+
+    { /* Not data-dependent - the same translation the real Lead prints,
+         so this line never has to move when the real table lands. */ }
+    <Lead>{ t('routes_order.availability.lead') }</Lead>
+
+    <Wrap>
+      <Table>
+        <thead>
+          <tr>
+            { /* Real column headers, not placeholders - like the lead
+                 above, these come from static translations rather than
+                 from the fetch, so there is no reason to guess at them. */ }
+            <th>{ t('routes_order.schedule.departure') }</th>
+            <th>{ t('routes_order.schedule.arrival') }</th>
+            <th>{ t('routes_order.schedule.duration') }</th>
+            <th>{ t('routes_order.schedule.operator') }</th>
+            <th>{ t('routes_order.availability.price') }</th>
+            <th>{ t('routes_order.availability.book') }</th>
+          </tr>
+        </thead>
+
+        { Array.from({ length: VISIBLE }, (_, index) => day(index)) }
+      </Table>
+    </Wrap>
+  </Container>
+);
+
+export default AvailabilitySkeleton;

package/Availability/styles.ts

@@ -185,7 +185,8 @@ export const Price = styled.strong`
  * until a customer did.
  */
 export const SeatsLeft = styled.span<{ $low: boolean }>`
-  font-size: ${ props => props.theme.size.xxs };
+  // Claude - 2026-09-16 (audit): xs - the xxs was 10px, under the phone floor
+  font-size: ${ props => props.theme.size.xs };
   line-height: 1.25;
   white-space: nowrap;
   font-weight: ${ props => (props.$low ? 700 : 400) };

package/Facts/Facts.tsx

@@ -1,5 +1,5 @@
 import { TFunction } from 'i18next';
-import { Container, Grid, Fact, Label, Value, Note, Notice, Operators, Prose } from './styles';
+import { Container, Heading, Grid, Fact, Label, Value, Note, Notice, Operators, Prose } from './styles';
 import { FactsData } from './types';
 import { DAYS, duration } from './questions';
 import { stopped, detail } from './service';
@@ -11,6 +11,12 @@ interface Props {
   // same response, and two components each running the same query would have
   // meant the prerender crawl paying for every pair twice.
   facts: FactsData
+  /**
+   * Claude - 2026-09-16 (audit): h1 on the pair page, where this title is
+   * the page's subject; h2 on the results steps, whose own step heading is
+   * the h1. The caller knows which page it is; this block does not.
+   */
+  heading?: 'h1' | 'h2'
   t: TFunction<'common'>
 }
 
@@ -45,7 +51,7 @@ interface Props {
  * is printed in the weaker wording. A pair with one weekly coach ends up
  * with a short honest block, not a padded one.
  */
-const Facts = ({ id, facts, t }: Props): JSX.Element => {
+const Facts = ({ id, facts, heading = 'h2', t }: Props): JSX.Element => {
   /**
    * Edited: Claude - Date: 2026-08-20
    *
@@ -109,7 +115,7 @@ const Facts = ({ id, facts, t }: Props): JSX.Element => {
 
   return (
     <Container id={ id } className="box">
-      <h2>{ t('routes_order.facts.title', { from: facts.from, to: facts.to }) }</h2>
+      <Heading as={ heading }>{ t('routes_order.facts.title', { from: facts.from, to: facts.to }) }</Heading>
 
       { dead && (
         <Notice>

package/Facts/styles.ts

@@ -4,6 +4,18 @@ export const Container = styled.section`
   margin-top: 25px;
 `;
 
+/**
+ * The section's title, at whichever level the page hands it.
+ *
+ * Claude - 2026-09-16 (audit): on the pair page this IS the page's subject
+ * and renders as its one h1; on the results steps it drops to h2 under the
+ * step heading. The size is pinned to the h2 scale either way, so promoting
+ * the level is an outline decision and does not resize the block.
+ */
+export const Heading = styled.h2`
+  font-size: ${ props => props.theme.size.xl };
+`;
+
 export const Grid = styled.dl`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

package/Found/Dates/Dates.tsx

@@ -3,7 +3,10 @@ import { TFunction } from 'i18next';
 import { AiOutlineCaretLeft, AiOutlineCaretRight } from 'react-icons/ai';
 import { Button } from '@autobusal/common';
 import { useMediaQuery } from '@autobusal/hooks';
-import { createDate, getDayParts } from '@autobusal/utilities';
+import { createDate, prepareDate, getDayParts } from '@autobusal/utilities';
+import { useGetSettings } from '@autobusal/providers/services';
+import { useGetSuggestions } from '@autobusal/routes-search/services';
+import { todayIn } from '../../Step1/prepare';
 import Loading from './Loading';
 import { Container, Inner, ButtonDay, DayPrice, Cheapest, Weekday, DayNumber, Month } from './styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
@@ -40,6 +43,29 @@ const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
 
   const { data, isLoading } = useGetDates(step1, type, number);
 
+  /**
+   * The first day that can still be boarded, as the departure city reckons it.
+   *
+   * Claude - 2026-09-16 (audit): the cut-off used to be `new Date() <= day`
+   * - the device's current INSTANT against the day's UTC midnight - which
+   * declared today unavailable from 00:00 UTC onwards, i.e. from 02:00 in
+   * Tirana. obtapi already starts the window on today (Search\Dates::find)
+   * and says per day whether anything runs, so the only job left here is
+   * not to offer a day that has passed where the coach leaves from: the
+   * origin's calendar day, then the server's, then the device's. The same
+   * clock the form now opens on. On the return step the strip is the
+   * reverse pair, so its origin is the destination that was searched.
+   */
+  const { data: cities } = useGetSuggestions();
+
+  const { data: settings } = useGetSettings();
+
+  const origin = type === '_return' ? step1.to : step1.from;
+
+  const zone = cities.find(city => city.slug === origin)?.country?.timezone;
+
+  const floor = createDate(todayIn(zone) ?? settings.today ?? prepareDate(new Date()));
+
   if (isLoading) {
     return <Loading t={ t } />;
   }
@@ -60,8 +86,6 @@ const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
     setNumber(number + 1);
   };
 
-  const today = new Date();
-
   /**
    * Edited: Ferjolt Ozuni - Date: 2026-08-01
    *
@@ -116,8 +140,8 @@ const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
   const items = shown.map(item => {
     const date = createDate(item.day);
 
-    // if date in the future, and we have routes available
-    const isAvailable = today.getTime() <= date.getTime() && item.routes;
+    // today or later where the coach leaves from, and something runs that day
+    const isAvailable = date.getTime() >= floor.getTime() && item.routes;
 
     const isCheapest = varies && lowest !== null && item.from_price === lowest;
 

package/Found/Dates/styles.ts

@@ -44,12 +44,18 @@ export const Inner = styled.div`
    * they took 70px of a 355px row between them - a fifth of the week's worth
    * of space spent on two chevrons, which left each day 34px and forced the
    * prices to wrap three times.
+   *
+   * Claude - 2026-09-16 (audit): squeezed to 30px tall they were 26px wide,
+   * and a thumb misses that. 44px square each: the phone strip shows THREE
+   * days now rather than seven, so 88px of arrows still leaves each day
+   * about 89px of a 375px screen.
    */
   & > button:first-child,
   & > button:last-child {
     flex: 0 0 auto;
-    padding: 0 6px;
-    height: 30px;
+    padding: 0;
+    width: 44px;
+    height: 44px;
   }
 
   @media (min-width: 640px) {
@@ -134,7 +140,8 @@ export const ButtonDay = styled.button<{ $available: boolean, $selected: boolean
   justify-content: center;
   gap: 2px;
   padding: 4px 0;
-  min-height: 26px;
+  // Claude - 2026-09-16 (audit): the 44px tap minimum - the chips measured 37px
+  min-height: 44px;
   font-weight: 700;
   text-align: center;
   font-size: ${ props => props.theme.size.xs };
@@ -178,11 +185,11 @@ export const DayPrice = styled.span<{ $cheapest: boolean }>`
   white-space: normal;
   overflow-wrap: anywhere;
   line-height: 1.15;
-  font-size: calc(${ props => props.theme.size.xs } - 1px);
+  // Claude - 2026-09-16 (audit): xs at every width - 11px is under the floor
+  font-size: ${ props => props.theme.size.xs };
 
   @media (min-width: 640px) {
     white-space: nowrap;
-    font-size: ${ props => props.theme.size.xs };
   }
   font-weight: ${ props => props.$cheapest ? 700 : 400 };
   opacity: .85;
@@ -196,13 +203,19 @@ export const DayPrice = styled.span<{ $cheapest: boolean }>`
  * unreadable at 10px. On the selected day it inherits the button's own
  * contrast colour and leans on weight instead of hue.
  */
+/*
+ * Claude - 2026-09-16 (audit): the strip is no longer dark - it sits on
+ * background.neutral - and the green that read well on it measures 2.42:1
+ * there (#79AB51 on #F2F2F2). The word is the cue now, in the ordinary ink
+ * (14.4:1 light, 11:1 dark), and at xs rather than a 10px xxs.
+ */
 export const Cheapest = styled.span<{ $selected: boolean }>`
   display: block;
-  font-size: ${ props => props.theme.size.xxs };
+  font-size: ${ props => props.theme.size.xs };
   text-transform: uppercase;
   letter-spacing: .5px;
   font-weight: 700;
-  color: ${ props => props.$selected ? 'inherit' : props.theme.font.success };
+  color: ${ props => props.$selected ? 'inherit' : props.theme.font.normal };
 `;
 
 export const ContainerLoading = styled.div`

package/Found/Filters/styles.ts

@@ -45,15 +45,28 @@ export const Toggle = styled.button<{ $open: boolean }>`
   z-index: 900;
 
   /*
-   * Clear of the home indicator on a notched phone. env() resolves to 0 on
-   * everything that has no inset, so the fallback is simply the base value.
+   * Clear of the home indicator on a notched phone, AND clear of the
+   * cookie notice on a narrow one.
+   *
+   * Edited: Claude - Date: 2026-09-16
+   *
+   * --obt-cookie-notice-height is published by CookieNotification
+   * (packages/common) while its own bar sits fixed to this same edge under
+   * 640px - see NOTICE_HEIGHT_VAR there. Two elements anchored to the same
+   * "bottom: 0" both being fixed to the viewport does not resolve itself by
+   * z-index, which only decides which one paints on top of the other; this
+   * button was measured sitting directly under the notice at 375px. The
+   * variable defaults to 0px, so a page without the notice - or a visitor
+   * who has already dismissed it - sees no change at all.
    */
-  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
+  bottom: calc(20px + env(safe-area-inset-bottom, 0px) + var(--obt-cookie-notice-height, 0px));
 
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 9px 16px;
+  // Claude - 2026-09-16 (audit): the 44px tap minimum - this measured 35px
+  min-height: 44px;
   font-size: ${ props => props.theme.size.xs };
   font-weight: 700;
   border-radius: 100px;

package/Found/Orders/Orders.tsx

@@ -1,10 +1,9 @@
 import { TFunction } from 'i18next';
-import { Inline } from '@autobusal/common';
 import Route from '../Route/Route';
-import Group from '../Group/Group';
 import Empty from '../Empty/Empty';
+import Skeleton from './Skeleton';
 import { getFavorites, getNormal } from './utilities';
-import { sortItems, groupItems, SortKey } from '../refine';
+import { sortItems, SortKey } from '../refine';
 import { Container, ContainerNotFound, Reset } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
@@ -28,12 +27,16 @@ interface Props {
 }
 
 const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferredStop, step1, alternatives, alternativesLoading, t, onReset, onSave }: Props): JSX.Element => {
+  /*
+   * Edited: Claude - Date: 2026-09-16
+   *
+   * A skeleton the shape of the real list, not a one-line message - see
+   * ./Skeleton for why (measured on a dated results URL, which is never
+   * prerendered: 0.6868-1.1646 CLS from a page that renders almost nothing
+   * until the search answers, then drops every card in at once).
+   */
   if (loading) {
-    return (
-      <div className="box">
-        <Inline text={ t('routes_order.step2.loading.routes') } />
-      </div>
-    );
+    return <Skeleton t={ t } />;
   }
 
   // Edited: Ferjolt Ozuni - Date: 2026-08-01
@@ -67,9 +70,22 @@ const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferr
    * Preferred-stop pinning stays the OUTER partition and each side is
    * sorted within itself. Sorting the whole list first would have let
    * "cheapest" quietly un-pin a stop the user deliberately saved.
+   */
+  /*
+   * Claude - 2026-09-16 (Ferjolt: "When we have more than one departure for
+   * the same route from the same operator, should not group them as we do
+   * now but should show them as a standalone search result in full. Is very
+   * easy to get confused visitors with grouped alternatives. So, remove the
+   * grouping and put them all as standalone.")
    *
-   * Grouping runs AFTER sorting: groupItems keeps input order, so a
-   * collapsed set of shuttles lands wherever its best member sorted to.
+   * EVERY DEPARTURE IS ITS OWN CARD. Interchangeable departures used to
+   * collapse into one card with a row of times under it, and the card showed
+   * only the earliest - so somebody scanning for "the 14:00" saw a 06:00 and
+   * moved on, and somebody who did find the picker booked whichever time
+   * happened to be highlighted. The grouped card also defeated the sort it
+   * sat in: ordered "latest first", a group still led with its EARLIEST
+   * time. A run of similar rows is the honest shape of an hourly service,
+   * and the sort and filters above are there to cut it down.
    */
   /**
    * Edited: Ferjolt Ozuni - Date: 2026-08-05
@@ -82,30 +98,16 @@ const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferr
   const date = step1[type];
 
   const render = (list: FoundData[], kind: 'favorite' | 'normal'): JSX.Element[] => (
-    groupItems(sortItems(list, sort)).map(group => (
-      group.length > 1
-        ? (
-          <Group
-            key={ group[0].id }
-            items={ group }
-            type={ kind }
-            date={ date }
-            passengers={ passengers }
-            t={ t }
-            onSave={ onSave }
-          />
-        )
-        : (
-          <Route
-            key={ group[0].id }
-            type={ kind }
-            data={ group[0] }
-            date={ date }
-            passengers={ passengers }
-            t={ t }
-            onSave={ onSave }
-          />
-        )
+    sortItems(list, sort).map(item => (
+      <Route
+        key={ item.id }
+        type={ kind }
+        data={ item }
+        date={ date }
+        passengers={ passengers }
+        t={ t }
+        onSave={ onSave }
+      />
     ))
   );
 

package/Found/Orders/Skeleton.tsx

@@ -0,0 +1,102 @@
+import { TFunction } from 'i18next';
+import { Bone } from '../../styles';
+import { Container as Card, Trip, Company, Location, Time, Price, Amount } from '../Route/styles';
+import { Container } from './styles';
+
+/**
+ * How many placeholder cards to reserve room for.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * Not knowable before the search answers - see ROWS_PER_DAY in
+ * ../../Availability/Skeleton for the same problem one section over. Five
+ * is the same kind of middle estimate: enough to fill roughly one screen on
+ * a desktop, which is where a reserved-but-empty block would otherwise be
+ * most visible, and not so many that a route with genuinely few departures
+ * reserves a page and a half of blank cards. A result count either side of
+ * five is a residual shift of one card's height, not the ~20-card collapse
+ * this exists to prevent.
+ */
+const CARDS = 5;
+
+/**
+ * One placeholder card, in the shape Route/Route.tsx renders.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * SAME STYLED COMPONENTS AS THE REAL CARD - Card, Trip, Company, Location,
+ * Time, Price, Amount all come from ../Route/styles, not a redrawn
+ * approximation of them. That is what keeps this accurate as the card
+ * itself changes: a padding or gap edited there resizes the skeleton at the
+ * same time, rather than the two silently drifting apart.
+ *
+ * The three bars inside Price carry the REAL card's own class names
+ * (price-notice, details-toggle, seats-left) so the same nth-child/class
+ * ordering rules in Price's CSS lay them out exactly as they lay out the
+ * real amount, tax note, button, details toggle and seat count - including
+ * the extra rows those last two add on a phone, which is most of what made
+ * the old three-line estimate come up short.
+ */
+const SkeletonCard = (): JSX.Element => (
+  <Card className="box" $type="normal" aria-hidden="true">
+    <Trip>
+      <Company>
+        <Bone $width={ 45 } $height={ 28 } />
+        <Bone $width={ 60 } $height={ 14 } />
+      </Company>
+
+      <Location $side="from">
+        <Bone $width={ 75 } $height={ 17 } />
+        <Bone $width={ 90 } $height={ 15 } />
+      </Location>
+
+      <Time>
+        <Bone $width={ 40 } $height={ 30 } />
+      </Time>
+
+      <Location $side="to">
+        <Bone $width={ 75 } $height={ 17 } />
+        <Bone $width={ 90 } $height={ 15 } />
+      </Location>
+
+      <Price>
+        <Amount><Bone $width={ 60 } $height={ 26 } /></Amount>
+        <Bone $width={ 100 } $height={ 44 } />
+        <Bone className="price-notice" $width={ 85 } $height={ 14 } />
+        <Bone className="details-toggle" $width={ 55 } $height={ 16 } />
+        <Bone className="seats-left" $width={ 65 } $height={ 14 } />
+      </Price>
+    </Trip>
+  </Card>
+);
+
+interface Props {
+  t: TFunction<'common'>
+}
+
+/**
+ * What the results list looks like before a search answers.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * WHY THIS EXISTS. A dated results URL (?departure=...) is never
+ * prerendered - it serves the SPA shell, so the very first thing a visitor
+ * sees is whatever this component renders while `loading` is true. That
+ * used to be a single line of text ("Searching for tickets..."), which
+ * collapsed the whole page to almost nothing and then dropped every result
+ * card in at once the moment the search answered - the same shape of CLS
+ * bug as ../../Availability/Skeleton, on a page that cannot be prerendered
+ * around it.
+ *
+ * `role="status"` with the SAME loading string the old text used, rather
+ * than a live region per card: a screen reader is told once that results
+ * are loading, not read five identical placeholder cards. The cards
+ * themselves are aria-hidden - there is nothing in them to announce.
+ */
+const Skeleton = ({ t }: Props): JSX.Element => (
+  <Container role="status" aria-label={ t('routes_order.step2.loading.routes') }>
+    { Array.from({ length: CARDS }, (_, index) => <SkeletonCard key={ index } />) }
+  </Container>
+);
+
+export default Skeleton;

package/Found/Route/Route.tsx

@@ -37,13 +37,9 @@ interface Props {
   passengers: number
   t: TFunction<'common'>
   onSave: (data: FoundData) => void
-  // Edited: Ferjolt Ozuni - Date: 2026-08-01
-  // Slot under the trip row, used by Group to hang a departure-time picker
-  // on a card that stands for several interchangeable departures.
-  children?: React.ReactNode
 }
 
-const Route = ({ data, type, date, passengers, t, onSave, children }: Props): JSX.Element => {
+const Route = ({ data, type, date, passengers, t, onSave }: Props): JSX.Element => {
   const [ information, setInformation ] = useState<boolean>(false);
 
   // Edited: Ferjolt Ozuni - Date: 2026-08-03
@@ -345,12 +341,10 @@ const Route = ({ data, type, date, passengers, t, onSave, children }: Props): JS
         </Price>
       </Trip>
 
-      { children }
-
       { /* Claude - 2026-09-01: the wide-screen copy, back where it sat before
-           the phone rebuild - bottom-left of the card, below the itinerary
-           and whatever `children` adds, rather than inside the fare column.
-           Exactly one of the two is ever displayed; see ButtonDetails. */ }
+           the phone rebuild - bottom-left of the card, below the itinerary,
+           rather than inside the fare column. Exactly one of the two is ever
+           displayed; see ButtonDetails. */ }
       <ButtonDetails
         $only="wide"
         type="button"