@autobusal/routes-order 1.16.0 → 1.21.0

package/CHANGELOG.md

@@ -6,6 +6,98 @@ All notable changes to this package are documented here. This project follows
 > Note: 1.8.0 was published without a changelog entry. The gap is left as-is
 > rather than reconstructed after the fact.
 
+## 1.21.0
+
+The same-day notice no longer hedges about timezones. obtapi now holds a zone
+per country, so "has this coach already left" is judged against the departure
+stop's own clock — the warning is about the real remaining risk, which is
+whether a traveller can reach the terminal in time.
+
+## 1.20.0
+
+The date strip: three days on a phone, five on a tablet, seven on a desktop —
+and the label becomes "04 AUG" below desktop rather than "Tue 04".
+
+Seven fitted on a phone once the labels were trimmed, but only at ~36px a
+cell: readable, not comfortable to hit, with the price wrapping to three lines
+under it. Each step up in width now buys two more days instead of squeezing
+the same seven into less room.
+
+The weekday is what gives way, not the month. With three days showing, a date
+needs to say which date it is more than which weekday — "04 AUG" is
+unambiguous alone, while "Tue 04" leaves somebody counting forward to work out
+whether that is this week or next. On a full seven-day strip the weekday earns
+its place, because the row reads as a week; on three days it does not.
+
+## 1.19.0
+
+Same-day travel, and the last of the phone layout.
+
+**Today is bookable**, so today's results carry a countdown — "Leaves in 43
+min", turning red under the hour. Computed server-side: a countdown built from
+the visitor's own clock is wrong for anybody whose device is off or in another
+timezone, and that is exactly the claim that must not be wrong.
+
+**A same-day caution above the results.** A coach that has already gone is
+filtered out server-side, but "already gone" is judged against our clock and
+the system holds no timezone for a city — so on a cross-border route the
+stored departure time and our idea of now can be an hour apart. The notice asks
+the traveller to check against their own local time.
+
+**Five days on a phone, seven above it.** Seven fitted after the labels were
+trimmed, but only at ~36px a cell. The five are centred on the selected day and
+clamped at both ends, so shrinking never hides the day being looked at.
+
+**Fare and button share a row**, tax note beneath — reordered in CSS, because
+the source order (fare, note, button) is the right one to read aloud and the
+right one for a crawler: the note explains the number it follows.
+
+## 1.18.0
+
+The results page on a phone, rebuilt for density.
+
+**The three picks are one strip.** Cheapest, fastest and recommended stacked
+into three full-width bands before a single result — the thing that summarises
+the list was pushing the list off the screen. Side by side they are comparable
+at a glance, which is what they are for. The operator's name drops below 640px:
+at ~110px a card it would ellipsis to three characters.
+
+**All five sort options on one row.** They were wrapping onto three lines,
+taking more height than the first result they reorder. Sized to their own text
+rather than equal shares — equal shares gave all five 59px, which four did not
+need and "Recommended" did, so it alone was truncated to "Recom..." while its
+neighbours sat in whitespace.
+
+**The seven-day strip no longer scrolls sideways.** A 900px floor made half the
+week invisible on a phone, including whichever day was cheapest — and a week is
+a shape you read at a glance, not one you drag. The month is dropped from each
+label (it is identical across a seven-day window) and the week arrows are
+squeezed; the day prices wrap rather than painting over each other.
+
+**Details collapse.** Features, route, transit and policies were four stacked
+bands on every result. They are one wrapped row behind a toggle now, hidden
+with CSS rather than unmounted so the prerendered snapshot a crawler reads is
+unchanged.
+
+**The trip stacks vertically** with the arrow turned to point down. Side by
+side was tried first and does not survive the content: "Thessaloniki (GRC)
+16:30" measures 215px in a 96px column and painted 50px outside the card — the
+page never scrolled sideways, so nothing looked broken until it was measured.
+
+## 1.17.0
+
+Internal linking blocks: "Popular routes from Tirana" / "Popular routes to
+Thessaloniki", as real router links, because the entire value is that a
+crawler follows them.
+
+The sitemap already announces every sellable pair, but a sitemap is a hint —
+a page nothing links to is still orphaned. These put every pair one click from
+another.
+
+Ordered by paid bookings, never filtered by them: the pairs with no orders yet
+are exactly the orphans this exists to reach. The block also survives a pair
+with no facts, which is precisely where a reader most needs a way onward.
+
 ## 1.16.0
 
 The crawlable timetable, and a section layout around the wizard.

package/Facts/types.ts

@@ -40,8 +40,21 @@ export interface ScheduleRow {
   price: string
 }
 
+export interface LinkRow {
+  from: string
+  to: string
+  from_name: string
+  to_name: string
+  url: string
+  // paid orders in the last year - ranks the list, never gates membership
+  orders: number
+}
+
 export interface FactsResponse {
   // null for a pair that is not sold - an envelope rather than a bare null,
   // because `{}` is truthy in JavaScript
   facts: FactsData | null
+  // Tier 3.4 - pairs leaving the origin, and pairs arriving at the
+  // destination. Present even when `facts` is null.
+  links: { from: LinkRow[], to: LinkRow[] }
 }

package/Found/Dates/Dates.tsx

@@ -2,9 +2,10 @@ import { useState } from 'react';
 import { TFunction } from 'i18next';
 import { AiOutlineCaretLeft, AiOutlineCaretRight } from 'react-icons/ai';
 import { Button } from '@autobusal/common';
-import { createDate, getFormattedShort } from '@autobusal/utilities';
+import { useMediaQuery } from '@autobusal/hooks';
+import { createDate, getDayParts } from '@autobusal/utilities';
 import Loading from './Loading';
-import { Container, Inner, ButtonDay, DayPrice, Cheapest } from './styles';
+import { Container, Inner, ButtonDay, DayPrice, Cheapest, Weekday, DayNumber, Month } from './styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundDay } from '../../types';
 import { useGetDates } from '../../services';
@@ -19,6 +20,24 @@ interface Props {
 const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
   const [number, setNumber] = useState<number>(0);
 
+  // Edited: Ferjolt Ozuni - Date: 2026-08-03
+  // Three days on a phone, five on a tablet, seven on a desktop.
+  //
+  // Seven fit on a phone without a scroller once the labels were trimmed,
+  // but only at about 36px a cell - enough to read, not enough to be
+  // comfortable to hit with a thumb, and with the price wrapping to three
+  // lines underneath. Each step up in width buys two more days rather than
+  // squeezing the same seven.
+  //
+  // This is one of the few things CSS genuinely cannot do: hiding cells
+  // would mean hiding FIXED positions, and the days that matter least are
+  // the ones furthest from the selected date, which moves.
+  const phone = useMediaQuery('(max-width: 639px)');
+
+  const tablet = useMediaQuery('(max-width: 1023px)');
+
+  const visible = phone ? 3 : (tablet ? 5 : 7);
+
   const { data, isLoading } = useGetDates(step1, type, number);
 
   if (isLoading) {
@@ -67,7 +86,34 @@ const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
     && Math.max(...prices) > (lowest as number)
     && atLowest * 2 <= prices.length;
 
-  const items = data?.map(item => {
+  /**
+   * The days actually shown.
+   *
+   * Centred on the selected day where the window allows, so shrinking to
+   * five never hides the day somebody is looking at - and clamped at both
+   * ends, so a selection sitting at the very start or end of the week still
+   * yields five days rather than three.
+   */
+  const shown = (() => {
+    const days = data ?? [];
+
+    if (days.length <= visible) {
+      return days;
+    }
+
+    const selected = days.findIndex(item => item.day === step1[type]);
+
+    // Centre on the selected day, then clamp - so a selection at either end
+    // of the week still yields a full window rather than a short one.
+    const start = Math.min(
+      Math.max(0, (selected === -1 ? 0 : selected) - Math.floor(visible / 2)),
+      days.length - visible
+    );
+
+    return days.slice(start, start + visible);
+  })();
+
+  const items = shown.map(item => {
     const date = createDate(item.day);
 
     // if date in the future, and we have routes available
@@ -77,7 +123,15 @@ const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
 
     return (
       <ButtonDay key={ item.id } $available={ isAvailable } $selected={ step1[type] === item.day } onClick={ () => onClick(item, isAvailable) }>
-        { getFormattedShort(date, t) }
+        { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+             In parts, so a phone can drop the month and fit seven days
+             without a horizontal scroller - see Month in styles. */ }
+        <Weekday>{ getDayParts(date, t).weekday }</Weekday>
+
+        <DayNumber>
+          { getDayParts(date, t).day }
+          <Month>{ ' ' + getDayParts(date, t).month }</Month>
+        </DayNumber>
 
         { isAvailable && item.from_price_display && (
           <DayPrice $cheapest={ isCheapest }>{ item.from_price_display }</DayPrice>
@@ -88,7 +142,7 @@ const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
         ) }
       </ButtonDay>
     );
-  })
+  });
 
   return (
     <Container>

package/Found/Dates/styles.ts

@@ -1,23 +1,105 @@
 import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
-  overflow-x: auto;
   margin-bottom: 15px;
-  padding: 10px 15px;
+  padding: 8px 6px;
   background-color: ${ props => props.theme.background.neutral };
   border-radius: ${ props => props.theme.borderRadius };
+
+  @media (min-width: 640px) {
+    overflow-x: auto;
+    padding: 10px 15px;
+  }
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * The 900px floor is what forced the strip to scroll sideways on a phone -
+ * seven days plus two arrows in a box the screen could not hold. A week is a
+ * shape people read at a glance, and a shape you have to drag is not one:
+ * half the week was simply invisible, including whichever day was cheapest.
+ *
+ * The floor now applies only from 640px up, where there is room for it.
+ * Below that the days share the width and the month is dropped from each
+ * label (see Month) so seven of them fit.
+ */
 export const Inner = styled.div`
-  min-width: 900px;
   display: flex;
-  gap: 5px;
+  gap: 2px;
   justify-content: center;
   align-items: center;
+
+  /**
+   * The two week-stepping arrows, squeezed on a phone. At their default size
+   * 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.
+   */
+  & > button:first-child,
+  & > button:last-child {
+    flex: 0 0 auto;
+    padding: 0 6px;
+    height: 30px;
+  }
+
+  @media (min-width: 640px) {
+    min-width: 900px;
+    gap: 5px;
+
+    & > button:first-child,
+    & > button:last-child {
+      padding: 0 20px;
+      height: auto;
+    }
+  }
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * The WEEKDAY is what goes below a desktop, not the month.
+ *
+ * With three or five days showing rather than seven, a date needs to say
+ * which date it is more than it needs to say which weekday - "04 AUG" is
+ * unambiguous on its own, while "Tue 04" leaves somebody counting forward
+ * from today to work out whether that is this week or next. On a full
+ * seven-day strip the weekday earns its place, because the row reads as a
+ * week; on three days it does not.
+ */
+export const Weekday = styled.span`
+  display: none;
+
+  @media (min-width: 1024px) {
+    display: inline;
+  }
+`;
+
+export const DayNumber = styled.span`
+  display: block;
+  line-height: 1.2;
+
+  @media (min-width: 1024px) {
+    display: inline;
+
+    &::before {
+      content: ', ';
+    }
+  }
+`;
+
+export const Month = styled.span`
+  text-transform: uppercase;
+
+  @media (min-width: 1024px) {
+    text-transform: none;
+  }
 `;
 
 export const ButtonDay = styled.button<{ $available: boolean, $selected: boolean }>`
-  flex: 1;
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -27,10 +109,14 @@ export const ButtonDay = styled.button<{ $available: boolean, $selected: boolean
   min-height: 26px;
   font-weight: 700;
   text-align: center;
-  font-size: ${ props => props.theme.size.s };
+  font-size: ${ props => props.theme.size.xs };
   border-radius: 12px;
   transition: all 0.3s ease;
 
+  @media (min-width: 640px) {
+    font-size: ${ props => props.theme.size.s };
+  }
+
   ${ props => !props.$available && css`
     opacity: .6;
   ` }
@@ -53,7 +139,23 @@ export const ButtonDay = styled.button<{ $available: boolean, $selected: boolean
  * so the price stays readable once the parent flips to the primary fill.
  */
 export const DayPrice = styled.span<{ $cheapest: boolean }>`
-  font-size: ${ props => props.theme.size.xs };
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Allowed to WRAP on a phone. "38.00 EUR" is wider than the ~45px a
+   * seventh of the screen gives a cell, and held on one line it simply
+   * painted over its neighbours - seven prices overlapping into an
+   * unreadable smear, which is worse than the scroller this replaced. Two
+   * short lines fit.
+   */
+  white-space: normal;
+  overflow-wrap: anywhere;
+  line-height: 1.15;
+  font-size: calc(${ props => props.theme.size.xs } - 1px);
+
+  @media (min-width: 640px) {
+    white-space: nowrap;
+    font-size: ${ props => props.theme.size.xs };
+  }
   font-weight: ${ props => props.$cheapest ? 700 : 400 };
   opacity: .85;
 `;

package/Found/Found.tsx

@@ -8,6 +8,7 @@ import Sort from './Sort/Sort';
 import Picks from './Picks/Picks';
 import Filters from './Filters/Filters';
 import Summary from './Summary/Summary';
+import SameDay from './SameDay/SameDay';
 import { Results, Sidebar, Listing } from '../styles';
 import { useGetAlternatives } from '../services';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
@@ -89,6 +90,14 @@ const Found = ({ type, loading, data, step1, preferredStop, t, onSearch, onSave
     <>
       <Dates type={ type } step1={ step1 } t={ t } onSearch={ onSearch } />
 
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+           Keyed off obtapi sending a countdown at all, which it does only
+           for a same-day search - so there is no second copy of "is this
+           today" here to fall out of step with the server's. */ }
+      { items.some(item => item.departs_in !== null && item.departs_in !== undefined) && (
+        <SameDay t={ t } />
+      ) }
+
       { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
            The Booking.com banner used to sit here, between the date strip
            and the trips, pushing the actual results below it to advertise a

package/Found/Picks/Picks.tsx

@@ -1,5 +1,5 @@
 import { TFunction } from 'i18next';
-import { Container, Pick, Label, Value, Meta } from './styles';
+import { Container, Pick, Label, Value, Meta, Company } from './styles';
 import { SortKey, sortItems } from '../refine';
 import { FoundData } from '@autobusal/providers/types/routes';
 
@@ -55,8 +55,15 @@ const Picks = ({ items, sort, t, onSelect }: Props): JSX.Element | null => {
             <Value>{ best.price.display }</Value>
 
             <Meta>
-              { best.duration !== '-' && `${ best.duration } · ` }
-              { best.operator.company }
+              { best.duration !== '-' && best.duration }
+
+              { /* The operator's name is hidden on a phone - see Company in
+                   styles. The separator goes with it, or a card reads
+                   "4h ·" with nothing after the dot. */ }
+              <Company>
+                { best.duration !== '-' && ' · ' }
+                { best.operator.company }
+              </Company>
             </Meta>
           </Pick>
         );

package/Found/Picks/styles.ts

@@ -1,13 +1,22 @@
 import styled, { css } from 'styled-components';
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Three across at every width, including phones, where these used to stack.
+ * Stacked, they cost three full bands of vertical space before a single
+ * result - so the thing that exists to summarise the list was pushing the
+ * list itself off the screen. Side by side they are a strip, and comparing
+ * three numbers is what they are for; a column of three is a list to read.
+ */
 export const Container = styled.div`
   display: grid;
-  gap: 10px;
+  gap: 6px;
   margin-bottom: 15px;
-  grid-template-columns: 1fr;
+  grid-template-columns: repeat(3, 1fr);
 
   @media (min-width: 640px) {
-    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
   }
 `;
 
@@ -15,9 +24,15 @@ export const Pick = styled.button<{ $active: boolean }>`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 4px;
-  padding: 12px 15px;
+  gap: 2px;
+  padding: 8px 9px;
   text-align: left;
+  min-width: 0;
+
+  @media (min-width: 640px) {
+    gap: 4px;
+    padding: 12px 15px;
+  }
   border-radius: ${ props => props.theme.borderRadius };
   border: 1px solid ${ props => props.theme.inputs.border };
   background: ${ props => props.theme.background.normal };
@@ -34,22 +49,58 @@ export const Pick = styled.button<{ $active: boolean }>`
 `;
 
 export const Label = styled.span`
-  font-size: ${ props => props.theme.size.xs };
+  max-width: 100%;
+  overflow: hidden;
+  font-size: calc(${ props => props.theme.size.xs } - 1px);
   text-transform: uppercase;
-  letter-spacing: .5px;
+  letter-spacing: 0;
   font-weight: 700;
   color: ${ props => props.theme.font.faded };
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  @media (min-width: 640px) {
+    font-size: ${ props => props.theme.size.xs };
+    letter-spacing: .5px;
+  }
 `;
 
 export const Value = styled.strong`
-  font-size: ${ props => props.theme.size.l };
+  font-size: ${ props => props.theme.size.m };
+
+  @media (min-width: 640px) {
+    font-size: ${ props => props.theme.size.l };
+  }
 `;
 
 export const Meta = styled.span`
   overflow: hidden;
   max-width: 100%;
-  font-size: ${ props => props.theme.size.xs };
+  font-size: calc(${ props => props.theme.size.xs } - 1px);
   color: ${ props => props.theme.font.faded };
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  @media (min-width: 640px) {
+    font-size: ${ props => props.theme.size.xs };
+  }
+`;
+
+/**
+ * The operator's name, dropped on a phone.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * At a third of a 375px screen each card gets about 110px, and a company
+ * name is the one thing here that will not fit in it - it would ellipsis to
+ * two or three characters, which is noise rather than information. The
+ * duration stays, because it is short and it is the number being compared;
+ * the name is one line down in the results anyway.
+ */
+export const Company = styled.span`
+  display: none;
+
+  @media (min-width: 640px) {
+    display: inline;
+  }
 `;

package/Found/Route/Route.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { TFunction } from 'i18next';
-import { HiOutlineArrowNarrowRight, HiOutlineDocumentText } from 'react-icons/hi';
+import { HiOutlineArrowNarrowRight, HiOutlineDocumentText, HiChevronDown, HiChevronUp } from 'react-icons/hi';
 import { BiHourglass } from 'react-icons/bi';
 import { RiBus2Line } from 'react-icons/ri';
 import { formatDuration, splitPrice } from '../refine';
 import { Button, RouteFeature, Policy, Rating } from '@autobusal/common';
-import { Container, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, LinkCompany, Details, Detail, ButtonPolicy, TitleDetail, LinkRoute, FeaturesItems } from './styles';
+import { Container, ButtonDetails, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, LinkCompany, Details, Detail, ButtonPolicy, TitleDetail, LinkRoute, FeaturesItems, Leaves } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
 // neutral placeholder so a missing/broken operator logo doesn't render the
@@ -27,6 +27,14 @@ interface Props {
 const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Element => {
   const [ policy, setPolicy ] = useState<boolean>(false);
 
+  // Edited: Ferjolt Ozuni - Date: 2026-08-03
+  // Closed to begin with. Amenities, route code, transit and policies are
+  // supporting detail on a row somebody is scanning, and four bands of it
+  // per result pushed the next result off a phone screen. The content stays
+  // in the DOM either way (see Details in styles) so the prerendered
+  // snapshot a crawler reads is unchanged.
+  const [ details, setDetails ] = useState<boolean>(false);
+
   const customs = Object.values(data.customs).join(', ');
   const transiting = Object.values(data.transiting).join(', ');
 
@@ -47,11 +55,26 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
     ? `${ import.meta.env.VITE_API_OBT }/api/external/go/${ data.external.offer_id }`
     : undefined;
 
+  // Edited: Ferjolt Ozuni - Date: 2026-08-03
+  // Only today's results carry this - obtapi sends null on every other date,
+  // so there is no "in 26 days" badge to suppress here.
+  const leaves = data.departs_in ?? null;
+
+  const soon = leaves !== null && leaves < 60;
+
   return (
     <Container className="box" $type={ type }>
       { data.price.offer === true && <SpecialOffer>{ t('routes_order.step2.route.offer') }</SpecialOffer> }
       { type === 'favorite' && <FavoriteStop>{ t('routes_order.step2.route.preferred_stop') }</FavoriteStop> }
 
+      { leaves !== null && (
+        <Leaves $soon={ soon }>
+          { leaves < 60
+            ? t('routes_order.step2.route.leaves_minutes', { minutes: leaves })
+            : t('routes_order.step2.route.leaves_hours', { hours: Math.floor(leaves / 60), minutes: leaves % 60 }) }
+        </Leaves>
+      ) }
+
       <Trip>
         <Company>
           <LinkCompany to={ bookOnUrl ?? data.operator.link } target="_blank" rel="noopener noreferrer" title={ data.operator.company }><img src={ data.operator.logo_url || LOGO_FALLBACK } onError={ (e) => { e.currentTarget.onerror = null; e.currentTarget.src = LOGO_FALLBACK; } } alt={ data.operator.company } /></LinkCompany>
@@ -134,7 +157,16 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
 
       { children }
 
-      <Details>
+      <ButtonDetails
+        type="button"
+        aria-expanded={ details }
+        onClick={ () => setDetails(!details) }
+      >
+        { details ? <HiChevronUp /> : <HiChevronDown /> }
+        { t('routes_order.step2.route.details') }
+      </ButtonDetails>
+
+      <Details $open={ details }>
         { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
              Amenities were a separate full-width block under the card.
              They are the same kind of thing as route, transit and policies

package/Found/Route/styles.ts

@@ -6,8 +6,20 @@ export const Container = styled.div<{ $type: 'favorite' | 'normal' }>`
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 15px;
-  padding: 15px;
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Tighter on a phone. Every result carried 15px of padding and 15px
+   * between each of its bands, which is most of a thumb of screen spent on
+   * gaps before anything is read.
+   */
+  gap: 8px;
+  padding: 10px;
+
+  @media (min-width: 640px) {
+    gap: 15px;
+    padding: 15px;
+  }
 
   ${ props => props.$type === 'favorite' && css`
     border: 1px solid ${ props => props.theme.font.success }; 
@@ -45,14 +57,32 @@ export const FavoriteStop = styled.div`
   border-bottom-right-radius: ${ props => props.theme.borderRadius };
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * VERTICAL on a phone, side by side from 640px up.
+ *
+ * Side by side was tried first and does not survive the content: each end
+ * gets about 96px at 375px, while "Thessaloniki (GRC) 16:30" measures 215px
+ * - it painted 50px outside the card, and the page never scrolled sideways
+ * so nothing looked broken until it was measured against the box it was
+ * supposed to be in. Stacked, each end has the full width, so nothing is
+ * truncated and nothing escapes.
+ *
+ * Compact is bought back a different way: tight gaps, a short arrow turned
+ * to point down the column, and the price on one row instead of a centred
+ * stack. Same information, roughly a third less height than before.
+ */
 export const Trip = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 6px;
 
   @media (min-width: 640px) {
     flex-direction: row;
     flex-wrap: wrap;
+    align-items: center;
+    gap: 15px;
   }
 
   @media (min-width: 1024px) {
@@ -95,12 +125,49 @@ export const Location = styled.div`
   min-width: 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 3px;
-  text-align: center;
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Left-aligned while the ends are stacked - centred text in a full-width
+   * column leaves the two times floating in the middle of the card with
+   * nothing to line them up against. Centred again from 640px, where the
+   * two ends sit either side of the arrow and the symmetry is the point.
+   */
+  align-items: flex-start;
+  gap: 1px;
+  text-align: left;
+
+  @media (min-width: 640px) {
+    align-items: center;
+    gap: 3px;
+    text-align: center;
+  }
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   *
+   * The heading has to be allowed to WRAP now that the two ends share a
+   * row. The min-width:0 above lets this column shrink, but the heading
+   * inside kept its intrinsic single-line width and simply painted outside
+   * the card - "Thessaloniki (GRC) 16:30" measured 215px inside a 96px
+   * column and ran 50px past the card's right edge. The page never scrolled
+   * sideways, so nothing looked broken until the text was measured against
+   * the box it was supposed to be in.
+   *
+   * A step down in size as well, because three columns of a 375px screen do
+   * not have room for a headline at body-copy scale.
+   */
   & > h2 {
     margin-bottom: 0;
+    max-width: 100%;
+    line-height: 1.25;
+    overflow-wrap: anywhere;
+  }
+
+  @media (min-width: 640px) {
+    & > h2 {
+      overflow-wrap: normal;
+    }
   }
 `;
 
@@ -111,11 +178,30 @@ export const Location = styled.div`
  * body copy it competed with the city above it; a step down lets the eye
  * land on the city first and read the stop only when it needs to.
  */
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Clamped to two lines on a phone. Now that the two ends of the journey
+ * share a row, each gets about 96px - and a name like "Terminali Lindor
+ * Interurban dhe Nderkombetar i Autobusave (TEG)" ran to five lines and
+ * stretched the whole row to match, so one terminal with a long name made
+ * every card taller than the screen. Two lines and an ellipsis, which is
+ * what the reference layouts do with the same problem.
+ */
 export const Stop = styled.span`
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
   font-size: ${ props => props.theme.size.xs };
   font-weight: 700;
   line-height: 1.3;
   color: ${ props => props.theme.font.faded };
+
+  @media (min-width: 1024px) {
+    display: block;
+    overflow: visible;
+  }
 `;
 
 /**
@@ -140,13 +226,39 @@ export const Iso = styled.span`
 
 export const Time = styled.div`
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  flex-direction: row;
+  gap: 6px;
   align-items: center;
   font-weight: 700;
 
+  @media (min-width: 640px) {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * The arrow sat between two stacked blocks at 1.5x the largest type in
+   * the theme. Now that the two ends of the journey share a row with it,
+   * that size would take the width the city names need - it is a
+   * separator, not a headline.
+   */
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Turned to point DOWN while the two ends are stacked - an arrow pointing
+   * right between two things sitting one above the other says the wrong
+   * thing about which way the journey goes.
+   */
   & > svg {
-    font-size: calc(1.5 * ${ props => props.theme.size.xxl });
+    font-size: ${ props => props.theme.size.l };
+    transform: rotate(90deg);
+  }
+
+  @media (min-width: 640px) {
+    & > svg {
+      font-size: calc(1.5 * ${ props => props.theme.size.xxl });
+      transform: none;
+    }
   }
 
   & > span {
@@ -176,12 +288,44 @@ export const Time = styled.div`
 export const Price = styled.div`
   flex-basis: 100%;
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   *
+   * On a phone: the fare and the button share one row, and the tax note sits
+   * under them.
+   *
+   * Reordered in CSS rather than in the markup, because the source order -
+   * fare, note, button - is the right one to read aloud and the right one
+   * for a crawler: the note explains the number it follows. Only the
+   * PAINTING needs to differ, and the order property says exactly that
+   * without moving the note away from the price it qualifies.
+   */
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
   align-items: center;
+  gap: 4px 8px;
+
+  & > *:nth-child(1) { order: 1; }
+
+  /* the note drops to its own line under both */
+  & > *:nth-child(2) { order: 3; flex-basis: 100%; }
+
+  & > *:nth-child(3) { order: 2; }
 
   @media (min-width: 768px) {
     flex: 0 0 165px;
+    flex-direction: column;
+    justify-content: initial;
+    gap: 8px;
+
+    & > *:nth-child(1),
+    & > *:nth-child(2),
+    & > *:nth-child(3) {
+      order: initial;
+      flex-basis: auto;
+    }
   }
 `;
 
@@ -220,11 +364,20 @@ export const Currency = styled.span`
  * frees the vertical space the Select button needs.
  */
 export const PriceNotice = styled.span`
-  margin-top: -4px;
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Left-aligned under the fare on a phone, where it is a full-width line
+   * beneath a price and a button rather than the middle of a centred stack.
+   */
   font-size: ${ props => props.theme.size.xxs };
   line-height: 1.25;
   color: ${ props => props.theme.font.faded };
-  text-align: center;
+  text-align: left;
+
+  @media (min-width: 768px) {
+    margin-top: -4px;
+    text-align: center;
+  }
 `;
 
 export const LinkCompany = styled(Link)`
@@ -239,24 +392,64 @@ export const LinkCompany = styled(Link)`
   }
 `;
 
-export const Details = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Collapsible, and inline at every width including phones.
+ *
+ * Hidden with CSS rather than unmounted, deliberately. These cards are on a
+ * page the prerender crawl snapshots for every route pair in the sitemap, so
+ * amenities, the route code, transit countries and the policy link have to
+ * be IN the DOM whether or not a reader has opened them - unmounting would
+ * take real per-pair content out of exactly the pages Tier 3 exists to
+ * fatten.
+ *
+ * Wrapping instead of stacking on a phone turns four bands of vertical space
+ * into one or two, which is the space the results themselves wanted.
+ */
+export const Details = styled.div<{ $open: boolean }>`
+  display: ${ props => (props.$open ? 'flex' : 'none') };
+  flex-wrap: wrap;
+  gap: 6px;
 
   @media (min-width: 640px) {
-    flex-direction: row;
-    flex-wrap: wrap;
+    gap: 15px;
   }
 `;
 
-export const Detail = styled.div`
-  padding: 8px 10px;
+/**
+ * The disclosure. Small and quiet - it is a way to get at supporting detail,
+ * not an action competing with "select".
+ */
+export const ButtonDetails = styled.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  align-self: flex-start;
+  padding: 4px 0;
   font-size: ${ props => props.theme.size.s };
+  color: ${ props => props.theme.font.faded };
+
+  &:hover {
+    color: ${ props => props.theme.font.normal };
+  }
+
+  svg {
+    transition: transform 0.2s ease;
+  }
+`;
+
+export const Detail = styled.div`
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 5px 8px;
+  font-size: calc(${ props => props.theme.size.s } - 1px);
   background: ${ props => props.theme.background.neutral };
   border-radius: ${ props => props.theme.borderRadius };
 
   @media (min-width: 480px) {
+    padding: 8px 10px;
+    font-size: ${ props => props.theme.size.s };
     flex-basis: calc(50% - 7.5px);
   }
   @media (min-width: 768px) {
@@ -300,4 +493,28 @@ export const FeaturesItems = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
-`;
+`;
+
+/**
+ * "Leaves in 40 minutes", on today's departures only.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Same-day seats are sellable now, and a time alone does not tell somebody
+ * whether they can make it - "14:00" reads very differently at nine in the
+ * morning and at half past one. Under an hour it turns urgent, because that
+ * is the point where the answer stops being "yes" and starts being "only if
+ * you leave now".
+ */
+export const Leaves = styled.div<{ $soon: boolean }>`
+  align-self: flex-start;
+  padding: 3px 10px;
+  border-radius: 100px;
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  white-space: nowrap;
+
+  color: ${ props => (props.$soon ? '#FFF' : props.theme.font.normal) };
+  background: ${ props => (props.$soon ? props.theme.font.error : props.theme.primary.neutral) };
+`;
+

package/Found/SameDay/SameDay.tsx

@@ -0,0 +1,35 @@
+import { TFunction } from 'i18next';
+import { HiOutlineExclamationCircle } from 'react-icons/hi';
+import { Container } from './styles';
+
+interface Props {
+  t: TFunction<'common'>
+}
+
+/**
+ * The caution that comes with selling today's seats.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Same-day departures are sellable now, and two things about them are worth
+ * saying plainly before somebody pays.
+ *
+ * A coach that has already left is filtered out server-side
+ * (Search\Departed), and since countries carry a timezone that filter is now
+ * judged against the DEPARTURE STOP's own clock rather than ours - so the
+ * warning is no longer about doubt on our side.
+ *
+ * What remains is the honest thing to say when the margin is minutes: every
+ * time on the page is local to its stop, the seat is real, the coach is
+ * about to go, and whether somebody can reach the terminal in time is not
+ * something we can know for them.
+ */
+const SameDay = ({ t }: Props): JSX.Element => (
+  <Container>
+    <HiOutlineExclamationCircle />
+
+    <span>{ t('routes_order.step2.same_day') }</span>
+  </Container>
+);
+
+export default SameDay;

package/Found/SameDay/styles.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Shown only on a same-day search. A caution, not an alarm - the whole point
+ * of selling today is that these seats are worth selling, and a red banner
+ * over every one of them would say the opposite.
+ */
+export const Container = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  margin-bottom: 15px;
+  padding: 10px 12px;
+  border-radius: ${ props => props.theme.borderRadius };
+  background: ${ props => props.theme.primary.neutral };
+  color: ${ props => props.theme.font.normal };
+  font-size: ${ props => props.theme.size.s };
+  line-height: 1.4;
+
+  & > svg {
+    flex: 0 0 auto;
+    margin-top: 2px;
+    font-size: ${ props => props.theme.size.l };
+  }
+`;

package/Found/Sort/styles.ts

@@ -1,10 +1,24 @@
 import styled, { css } from 'styled-components';
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * A column on a phone, so the five options get the whole width for one row
+ * instead of losing a third of it to the "Sort by" label and wrapping onto
+ * three lines.
+ */
 export const Container = styled.div`
   display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
 `;
 
 export const Label = styled.span`
@@ -13,17 +27,48 @@ export const Label = styled.span`
   color: ${ props => props.theme.font.faded };
 `;
 
+/**
+ * One row, always. Five short options wrapping onto three lines took more
+ * height than the first result they were meant to reorder.
+ */
 export const Options = styled.div`
   display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
+  gap: 3px;
+  flex-wrap: nowrap;
+
+  @media (min-width: 640px) {
+    gap: 6px;
+    flex-wrap: wrap;
+  }
 `;
 
 export const Option = styled.button<{ $active: boolean }>`
-  padding: 6px 14px;
-  font-size: ${ props => props.theme.size.s };
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   *
+   * NATURAL width, allowed to shrink - not an equal share. Equal shares gave
+   * every option 59px, which four of the five did not need and the fifth
+   * did: "Recommended" wants 71px and was the only one ever truncated, to
+   * "Recom...", while its neighbours sat in whitespace. Left to size
+   * themselves the five come to 311px inside a 335px row and all fit.
+   *
+   * They can still shrink, so a language with longer words degrades to
+   * ellipsis rather than pushing an option off the edge.
+   */
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 5px 2px;
+  font-size: calc(${ props => props.theme.size.xs } - 2px);
   font-weight: 700;
   white-space: nowrap;
+
+  @media (min-width: 640px) {
+    flex: initial;
+    padding: 6px 14px;
+    font-size: ${ props => props.theme.size.s };
+  }
   border-radius: 100px;
   border: 1px solid ${ props => props.theme.inputs.border };
   background: ${ props => props.theme.background.normal };

package/Links/Links.tsx

@@ -0,0 +1,67 @@
+import { TFunction } from 'i18next';
+import { Container, Group, Heading, List, Item } from './styles';
+import { LinkRow } from '../Facts/types';
+
+interface Props {
+  id: string
+  from: LinkRow[]
+  to: LinkRow[]
+  fromName?: string
+  toName?: string
+  t: TFunction<'common'>
+}
+
+/**
+ * Where else you can go from here.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Roadmap Tier 3.4. The sitemap announces every sellable pair, but a sitemap
+ * is a hint - a page nothing links to is still orphaned, and a crawler that
+ * has to be TOLD about a page treats it as less important than one it
+ * arrives at by following a link. These blocks put every pair one click from
+ * another.
+ *
+ * Real router links, deliberately: the whole value is that they are followed.
+ * Ordered by paid bookings server-side, but never filtered by them - the
+ * pairs with no orders yet are exactly the orphans this exists to reach.
+ */
+const Links = ({ id, from, to, fromName, toName, t }: Props): (JSX.Element | null) => {
+  if (from.length === 0 && to.length === 0) {
+    return null;
+  }
+
+  return (
+    <Container id={ id } className="box">
+      { from.length > 0 && (
+        <Group>
+          <Heading>{ t('routes_order.links.from', { city: fromName ?? from[0].from_name }) }</Heading>
+
+          <List>
+            { from.map(row => (
+              <li key={ row.url }>
+                <Item to={ row.url }>{ row.to_name }</Item>
+              </li>
+            )) }
+          </List>
+        </Group>
+      ) }
+
+      { to.length > 0 && (
+        <Group>
+          <Heading>{ t('routes_order.links.to', { city: toName ?? to[0].to_name }) }</Heading>
+
+          <List>
+            { to.map(row => (
+              <li key={ row.url }>
+                <Item to={ row.url }>{ row.from_name }</Item>
+              </li>
+            )) }
+          </List>
+        </Group>
+      ) }
+    </Container>
+  );
+};
+
+export default Links;

package/Links/styles.ts

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+export const Container = styled.section`
+  margin-top: 25px;
+`;
+
+export const Group = styled.div`
+  & + & {
+    margin-top: 20px;
+  }
+`;
+
+export const Heading = styled.h3`
+  margin: 0 0 10px;
+  font-size: ${ props => props.theme.size.m };
+`;
+
+export const List = styled.ul`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
+
+/**
+ * A real router Link, not a styled div with a click handler - the entire
+ * point of these blocks is that a crawler follows them.
+ */
+export const Item = styled(Link)`
+  display: inline-block;
+  padding: 6px 12px;
+  border-radius: ${ props => props.theme.borderRadius };
+  background: ${ props => props.theme.background.neutral };
+  color: ${ props => props.theme.font.normal };
+  font-size: ${ props => props.theme.size.s };
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: none;
+    background: ${ props => props.theme.primary.neutral };
+  }
+`;

package/Sections/Sections.tsx

@@ -1,6 +1,7 @@
 import { TFunction } from 'i18next';
 import Facts from '../Facts/Facts';
 import Schedule from '../Schedule/Schedule';
+import Links from '../Links/Links';
 import { useGetFacts } from '../Facts/services';
 import { Nav, Anchor, Anchored } from './styles';
 
@@ -13,6 +14,7 @@ interface Props {
 const TRIPS = 'trips';
 const FACTS = 'facts';
 const SCHEDULE = 'schedule';
+const LINKS = 'links';
 
 /**
  * Everything on a route-pair page that is not the booking wizard.
@@ -37,8 +39,16 @@ const Sections = ({ from, to, t }: Props): (JSX.Element | null) => {
 
   const facts = data?.facts;
 
+  const links = data?.links ?? { from: [], to: [] };
+
+  // Edited: Ferjolt Ozuni - Date: 2026-08-03
+  // The linking block survives a pair with no facts. A pair that cannot be
+  // sold is precisely where somebody most needs a way onward - dropping the
+  // links there would leave them on a dead end.
   if (!facts) {
-    return null;
+    return links.from.length > 0 || links.to.length > 0
+      ? <Links id={ LINKS } from={ links.from } to={ links.to } t={ t } />
+      : null;
   }
 
   const schedule = facts.schedule ?? [];
@@ -61,6 +71,15 @@ const Sections = ({ from, to, t }: Props): (JSX.Element | null) => {
       <Anchored>
         <Schedule id={ SCHEDULE } from={ facts.from } to={ facts.to } rows={ schedule } t={ t } />
       </Anchored>
+
+      <Links
+        id={ LINKS }
+        from={ links.from }
+        to={ links.to }
+        fromName={ facts.from }
+        toName={ facts.to }
+        t={ t }
+      />
     </>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/routes-order",
-  "version": "1.16.0",
+  "version": "1.21.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"