@autobusal/routes-order 1.37.0 → 1.37.1

package/Found/Route/Route.tsx

@@ -249,7 +249,7 @@ const Route = ({ data, type, date, passengers, t, onSave, children }: Props): JS
                per-person fare - so this says how many people it covers
                rather than the "per adult" line the competitors use, which
                would be wrong here for any multi-passenger search. */ }
-          <PriceNotice>
+          <PriceNotice className="price-notice">
             { t(
               passengers === 1
                 ? 'routes_order.step2.route.price_notice_single'
@@ -270,20 +270,36 @@ const Route = ({ data, type, date, passengers, t, onSave, children }: Props): JS
             }
             onClick={ () => (isExternalRedirect && bookOnUrl ? window.open(bookOnUrl, '_blank', 'noopener,noreferrer') : onSave(data)) }
           />
+
+          { /* Claude - 2026-08-31 (Ferjolt: "the 'Details' should be right
+               below 'Select route' button, in the same line as 'Taxes
+               included - total for 1 passenger'").
+
+               MOVED INTO the price block rather than positioned from outside
+               it. It used to be a sibling of the whole Trip, which put it in
+               a different container from the tax note it now shares a line
+               with - and two elements in different flex contexts cannot be
+               put on one row without pulling one of them out of flow, which
+               breaks the moment the note wraps to two lines in a longer
+               language.
+
+               Here they are simply the last two children of one flex row:
+               the note takes the space it needs on the left, this sits hard
+               right under the button, and a wrap moves both together. */ }
+          <ButtonDetails
+            className="details-toggle"
+            type="button"
+            aria-expanded={ details }
+            onClick={ () => setDetails(!details) }
+          >
+            { details ? <HiChevronUp /> : <HiChevronDown /> }
+            { t('routes_order.step2.route.details') }
+          </ButtonDetails>
         </Price>
       </Trip>
 
       { children }
 
-      <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.

package/Found/Route/styles.ts

@@ -485,6 +485,31 @@ export const Price = styled.div`
 
   & > *:nth-child(3) { order: 2; }
 
+  /*
+   * Claude - 2026-08-31: the note and the details toggle share the second
+   * row - note left, toggle hard right under the button.
+   *
+   * BY CLASS, not by nth-child, and that is the point of the change. The
+   * rules above count positions, and this block has a conditional first
+   * child: a route with a dynamic-price drop renders a struck-through
+   * <Standard> before the amount, which shifts every index by one. Adding
+   * two more positional rules on top of that would have been two more things
+   * to be silently wrong on exactly the cards carrying an offer.
+   *
+   * These come after the positional rules and match on the same specificity,
+   * so they win where they overlap and leave the rest alone.
+   */
+  & > .price-notice {
+    order: 3;
+    flex: 1 1 auto;
+    flex-basis: auto;
+  }
+
+  & > .details-toggle {
+    order: 4;
+    flex: 0 0 auto;
+  }
+
   @media (min-width: 768px) {
     flex: 0 0 165px;
     flex-direction: column;
@@ -497,6 +522,18 @@ export const Price = styled.div`
       order: initial;
       flex-basis: auto;
     }
+
+    /*
+     * The same reset for the two matched by class. This cell is a COLUMN
+     * above 768px, so both simply stack under the button in source order -
+     * which is where the details toggle has always sat on a wide screen,
+     * just now inside the price cell rather than under the whole card.
+     */
+    & > .price-notice,
+    & > .details-toggle {
+      order: initial;
+      flex-basis: auto;
+    }
   }
 `;
 
@@ -703,16 +740,15 @@ export const ButtonDetails = styled.button`
   color: ${ props => props.theme.font.faded };
 
   /*
-   * Claude - 2026-08-31 (Ferjolt: "'Details' should be displayed below
-   * 'Select route' button").
+   * Claude - 2026-08-31 (Ferjolt: "the 'Details' should be right below
+   * 'Select route' button, in the same line as 'Taxes included - total for 1
+   * passenger'").
    *
-   * On a phone the fare sits left and the button right, and this sat under
-   * the FARE - the far side of the card from the control it belongs with.
-   * Pushed to the right edge it lands directly beneath the button, which is
-   * where the thumb already is after reading the price.
+   * No self-alignment any more: it is a child of the price row now, and that
+   * row's own rules put it hard right on the second line, beside the tax
+   * note. Only the size is set here.
    */
   @media (max-width: 639px) {
-    align-self: flex-end;
     font-size: ${ props => props.theme.size.xs };
   }
 

package/package.json

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