@autobusal/routes-order 1.37.1 → 1.37.2

package/Found/Route/Route.tsx

@@ -288,6 +288,7 @@ const Route = ({ data, type, date, passengers, t, onSave, children }: Props): JS
                right under the button, and a wrap moves both together. */ }
           <ButtonDetails
             className="details-toggle"
+            $only="narrow"
             type="button"
             aria-expanded={ details }
             onClick={ () => setDetails(!details) }
@@ -300,6 +301,20 @@ const Route = ({ data, type, date, passengers, t, onSave, children }: Props): JS
 
       { 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) }
+      >
+        { 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

@@ -730,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;
@@ -739,14 +767,22 @@ 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: "the 'Details' should be right below
    * 'Select route' button, in the same line as 'Taxes included - total for 1
    * passenger'").
    *
-   * 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.
+   * 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) {
     font-size: ${ props => props.theme.size.xs };

package/package.json

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