@autobusal/routes-order 1.23.1 → 1.23.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 1.23.3
+
+**The arrival heading was painting over the price.** Measured: the arrival cell is 165px wide and its content needed **215px**, so it ran 50px into the fare beside it.
+
+Two causes, both fixed — widths alone would only have moved the width at which it broke:
+
+- **No spaces to wrap at.** JSX drops the whitespace around a newline, so city, country and time were concatenated into one unbreakable token. Real spaces added, plus overflow-wrap: break-word above 640px as a backstop for a long city name on its own line.
+- **The operator cell was taking room it did not need.** 185px to 120px with a smaller logo, and the one-row gap from 15px to 10px. That returns 85px to the two location columns, which go 165px to 208px.
+
+Verified no overflow on any card at 1024 / 1100 / 1280 / 1440 / 1920px. 1024 is the tightest - it is where the card first lays out in a single row.
+
+**The route code moved out of the collapsed details and under the logo**, where it sits beside the operator it identifies. That frees a slot in the details row for things that actually need explaining - customs on a cross-border run, for one.
+
+The route information link is now **Route Info** rather than "Read Operator Information".
+
+## 1.23.2
+
+- Flexible Ticket detail is now behind a small **Read More** link rather than the title. Its own control, so the thing you click to *read* is never next to the thing you click to *buy*. Closed by default; one line — "without it, this ticket cannot be cancelled or changed" — stays outside the collapse, because that is the material fact and hiding it would be a dark pattern rather than a tidy layout.
+- **Date strip: dropped the joining comma.** Above 1024px the day number carried a `::before` comma so the cell would read "Mon, 03 Aug" on one line. The cells are narrow enough that the two parts wrap anyway, so the comma led the second line and every desktop cell rendered as "Mon" over ", 03 Aug". Punctuation that only works when text happens not to wrap will keep breaking.
+
 ## 1.23.1
 
 **Flexible Ticket as a title, a price and an Add button, with the detail collapsed.**

package/Found/Dates/styles.ts

@@ -99,12 +99,20 @@ export const DayNumber = styled.span`
   display: block;
   line-height: 1.2;
 
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   *
+   * NO JOINING COMMA. This carried a ::before comma above 1024px, to read
+   * "Mon, 03 Aug" on one line. The cells are narrow enough
+   * that the weekday and the date wrap anyway, and the comma then led the
+   * second line - every desktop cell rendered as "Mon" over ", 03 Aug".
+   *
+   * Punctuation that only works when the text happens not to wrap is
+   * punctuation that will keep breaking; the two parts read perfectly well
+   * stacked without it.
+   */
   @media (min-width: 1024px) {
     display: inline;
-
-    &::before {
-      content: ', ';
-    }
   }
 `;
 

package/Found/Route/Route.tsx

@@ -5,7 +5,7 @@ import { BiHourglass } from 'react-icons/bi';
 import { RiBus2Line } from 'react-icons/ri';
 import { formatDuration, splitPrice } from '../refine';
 import { Button, RouteFeature, Information, Rating } from '@autobusal/common';
-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 { Container, ButtonDetails, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, LinkCompany, CodeCompany, Details, Detail, ButtonPolicy, TitleDetail, FeaturesItems, Leaves } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
 // neutral placeholder so a missing/broken operator logo doesn't render the
@@ -86,12 +86,29 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
                nothing when there is no rating yet, which is why a brand-new
                operator does not look like a badly rated one. */ }
           <Rating rating={ data.operator.rating } size="small" t={ t } />
+
+          { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+               The route code, moved up out of the collapsed details. It is an
+               identifier of the same kind as the logo above it, and moving it
+               here frees a slot in the details row for things that actually
+               need explaining - customs on a cross-border run, for one. */ }
+          <CodeCompany to={ bookOnUrl ?? data.link } target="_blank" rel="noopener noreferrer">{ data.code }</CodeCompany>
         </Company>
 
         <Location>
           <h2>
             { data.locations.from.city.name }
+            { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+                 REAL SPACES, and they are load-bearing. JSX drops the
+                 whitespace around a newline, so city, country and time were
+                 concatenated into one unbreakable token - "Thessaloniki(GRC)
+                 06:00" measured 215px inside a 165px column and painted 50px
+                 into the price beside it. Nothing about the widths could fix
+                 that on its own: with nowhere to wrap, text will always
+                 overflow eventually. */ }
+            { ' ' }
             <Iso>({ data.locations.from.city.country?.iso_code })</Iso>
+            { ' ' }
             { data.locations.from.departure }
           </h2>
 
@@ -111,7 +128,17 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
         <Location>
           <h2>
             { data.locations.to.city.name }
+            { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+                 REAL SPACES, and they are load-bearing. JSX drops the
+                 whitespace around a newline, so city, country and time were
+                 concatenated into one unbreakable token - "Thessaloniki(GRC)
+                 06:00" measured 215px inside a 165px column and painted 50px
+                 into the price beside it. Nothing about the widths could fix
+                 that on its own: with nowhere to wrap, text will always
+                 overflow eventually. */ }
+            { ' ' }
             <Iso>({ data.locations.to.city.country?.iso_code })</Iso>
+            { ' ' }
             { data.locations.to.arrival }
           </h2>
 
@@ -182,11 +209,6 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
           </Detail>
         ) }
 
-        <Detail>
-          <TitleDetail>{ t('routes_order.step2.route.name') }</TitleDetail>
-          <LinkRoute to={ bookOnUrl ?? data.link } target="_blank" rel="noopener noreferrer">{ data.code }</LinkRoute>
-        </Detail>
-
         { customs && (
           <Detail>
             <TitleDetail>{ t('routes_order.step2.route.customs') }</TitleDetail>

package/Found/Route/styles.ts

@@ -85,8 +85,15 @@ export const Trip = styled.div`
     gap: 15px;
   }
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * A tighter gap once every cell shares one row: four gaps at 15px spent
+   * 60px of the widest layout on whitespace, while the arrival column was
+   * overflowing by 50px.
+   */
   @media (min-width: 1024px) {
     flex-wrap: nowrap;
+    gap: 10px;
   }
 `;
 
@@ -104,8 +111,14 @@ export const Company = styled.div`
   gap: 6px;
   align-items: flex-start;
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * 185px down to 120px. The logo is an identifier, not the product - it
+   * only has to be recognisable - and the 65px it gives back goes to the two
+   * location columns, which were the cells actually running out of room.
+   */
   @media (min-width: 1024px) {
-    flex: 0 0 185px;
+    flex: 0 0 120px;
   }
 `;
 
@@ -164,9 +177,21 @@ export const Location = styled.div`
     overflow-wrap: anywhere;
   }
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * break-word, not normal. Real spaces now let the heading wrap between
+   * city, country and time, which covers almost every width - but at exactly
+   * 1024px, where the card first lays out in one row and the columns are at
+   * their narrowest, "Thessaloniki" on its own still exceeds its column and
+   * a heading that cannot break simply paints over the price.
+   *
+   * break-word only splits a word when it has a line to itself and still
+   * does not fit, so the ordinary case is untouched. The phone layout's
+   * anywhere would break words it did not have to.
+   */
   @media (min-width: 640px) {
     & > h2 {
-      overflow-wrap: normal;
+      overflow-wrap: break-word;
     }
   }
 `;
@@ -390,6 +415,33 @@ export const LinkCompany = styled(Link)`
 
     border-radius: 8px;
   }
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Smaller from the width where the card lays out in one row, since that is
+   * the only place the space was contested.
+   */
+  @media (min-width: 1024px) {
+    max-width: 120px;
+
+    & > img {
+      ${ logoBox('100%', '44px') }
+    }
+  }
+`;
+
+/**
+ * The route code, under the logo.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ * Moved out of the collapsed details and up beside the operator it belongs
+ * to. It is an identifier of the same kind as the logo, and putting it here
+ * frees a slot in the details row for things that genuinely need explaining.
+ */
+export const CodeCompany = styled(Link)`
+  font-size: ${ props => props.theme.size.xxs };
+  color: ${ props => props.theme.font.faded };
+  line-height: 1.2;
 `;
 
 /**
@@ -465,10 +517,6 @@ export const TitleDetail = styled.h6`
   font-size: ${ props => props.theme.size.xs };
 `;
 
-export const LinkRoute = styled(Link)`
-  font-weight: 700;
-`;
-
 export const ButtonPolicy = styled.button`
   display: flex;
   align-items: center;

package/Step5/Addons/Addons.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { RiWhatsappLine, RiTelegramLine, RiCalendarCheckLine, RiArrowUpSLine, RiArrowDownSLine } from 'react-icons/ri';
 import { FlexOffer } from '@autobusal/providers/types/routes';
 import { SubTitle } from '../../styles';
-import { Container, Option, Notice, Terms, Term, FlexHeader, FlexToggle, FlexPrice, FlexAdd, FlexDetails } from './styles';
+import { Container, Option, Notice, Terms, Term, FlexHeader, FlexTitle, FlexToggle, FlexPrice, FlexAdd, FlexDetails } from './styles';
 
 interface AddonsData {
   whatsapp: { available: boolean, price: number }
@@ -103,15 +103,13 @@ const Addons = ({ data, flexOffer, currency, whatsapp, whatsappNumber, telegram,
       { hasFlex && (
         <Option>
           <FlexHeader>
-            <FlexToggle type="button" aria-expanded={ open } onClick={ () => setOpen(!open) }>
+            <FlexTitle>
               <RiCalendarCheckLine />
 
               { t('routes_order.step5.flex.title') }
 
               <FlexPrice>{ flexOffer?.price_display }</FlexPrice>
-
-              { open ? <RiArrowUpSLine /> : <RiArrowDownSLine /> }
-            </FlexToggle>
+            </FlexTitle>
 
             <FlexAdd type="button" $added={ flex } onClick={ () => onChangeFlex(!flex) }>
               { flex ? t('routes_order.step5.flex.remove') : t('routes_order.step5.flex.add') }
@@ -128,6 +126,12 @@ const Addons = ({ data, flexOffer, currency, whatsapp, whatsappNumber, telegram,
             */}
           <Notice>{ t('routes_order.step5.flex.default') }</Notice>
 
+          <FlexToggle type="button" aria-expanded={ open } onClick={ () => setOpen(!open) }>
+            { open ? t('routes_order.step5.flex.less') : t('routes_order.step5.flex.more') }
+
+            { open ? <RiArrowUpSLine /> : <RiArrowDownSLine /> }
+          </FlexToggle>
+
           { open && (
             <FlexDetails>
               <Terms>

package/Step5/Addons/styles.ts

@@ -69,19 +69,34 @@ export const FlexHeader = styled.div`
   gap: 10px;
 `;
 
-export const FlexToggle = styled.button`
+export const FlexTitle = styled.span`
   display: flex;
   align-items: center;
   gap: 6px;
+  font-weight: 700;
+`;
+
+/**
+ * "Read More", small and quiet, under the one line that always shows.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ * Its own control rather than the title, so the thing you click to READ is
+ * never next to the thing you click to BUY.
+ */
+export const FlexToggle = styled.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-top: 4px;
+  margin-left: 22px;
   padding: 0;
   border: 0;
   background: none;
-  color: inherit;
+  color: ${ props => props.theme.primary.normal };
   font-family: inherit;
-  font-size: inherit;
-  font-weight: 700;
+  font-size: ${ props => props.theme.size.xs };
   cursor: pointer;
-  text-align: left;
+  text-decoration: underline;
 `;
 
 export const FlexPrice = styled.span`

package/package.json

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