@autobusal/routes-order 1.23.2 → 1.23.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # 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.

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/package.json

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