@autobusal/routes-order 1.37.0 → 1.37.2

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,12 +270,43 @@ 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"
+            $only="narrow"
+            type="button"
+            aria-expanded={ details }
+            onClick={ () => setDetails(!details) }
+          >
+            { details ? <HiChevronUp /> : <HiChevronDown /> }
+            { t('routes_order.step2.route.details') }
+          </ButtonDetails>
         </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. */ }
       <ButtonDetails
+        $only="wide"
         type="button"
         aria-expanded={ details }
         onClick={ () => setDetails(!details) }

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;
+    }
   }
 `;
 
@@ -693,7 +730,35 @@ export const Details = styled.div<{ $open: boolean }>`
  * 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`
+/**
+ * Claude - 2026-09-01
+ *
+ * TWO PLACES, ONE AT A TIME, and the reason is a layout constraint rather
+ * than a preference.
+ *
+ * On a phone Ferjolt asked for this to sit "right below 'Select route'
+ * button, in the same line as 'Taxes included'". Sharing a line with the tax
+ * note means being its SIBLING - two elements in different flex contexts
+ * cannot be put on one row without taking one of them out of flow, which
+ * comes apart the moment the note wraps to two lines in a longer language.
+ * So on a phone it has to live inside the price cell.
+ *
+ * On a wide screen it belongs where it was before any of the mobile work:
+ * bottom-left of the whole card, under the itinerary. That is a sibling of
+ * Trip. The price cell is a narrow right-hand column up there, and putting
+ * the toggle in it moved a card-level control into the fare - which was
+ * never asked for and was only ever a side effect of the phone change.
+ *
+ * The two positions are in different containers, so no single element can
+ * occupy both. Rendering it twice and letting the breakpoint choose is the
+ * boring answer, and `display: none` keeps the unused one out of the
+ * accessibility tree entirely rather than merely out of sight - there is
+ * never a second "Details" control for a screen reader to find.
+ *
+ * 768px, not 640px, because that is where Price stops being a row and
+ * becomes the right-hand column - see Price above.
+ */
+export const ButtonDetails = styled.button<{ $only?: 'narrow' | 'wide' }>`
   display: inline-flex;
   align-items: center;
   gap: 5px;
@@ -702,17 +767,24 @@ export const ButtonDetails = styled.button`
   font-size: ${ props => props.theme.size.s };
   color: ${ props => props.theme.font.faded };
 
+  @media (max-width: 767px) {
+    display: ${ props => (props.$only === 'wide' ? 'none' : 'inline-flex') };
+  }
+
+  @media (min-width: 768px) {
+    display: ${ props => (props.$only === 'narrow' ? 'none' : 'inline-flex') };
+  }
+
   /*
-   * 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 on the phone copy: it is a child of the price row
+   * there, 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.2",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts",