@autobusal/routes-order 1.36.0 → 1.37.0

package/Found/Filters/Filters.tsx

@@ -1,7 +1,7 @@
 import { TFunction } from 'i18next';
 import { FaFilter } from 'react-icons/fa';
 import { AiOutlineCaretDown, AiOutlineCaretUp } from 'react-icons/ai';
-import { Container, Toggle, Count, Panel, Group, GroupTitle, Choice, ChoiceName, ChoiceMeta, ChoiceCount, ChoicePrice, Slider, Reset } from './styles';
+import { Container, Backdrop, Toggle, Count, Panel, Group, GroupTitle, Choice, ChoiceName, ChoiceMeta, ChoiceCount, ChoicePrice, Slider, Reset } from './styles';
 import { Refinement, Facets, FacetValue, BucketKey, EMPTY, isRefined } from '../refine';
 
 interface Props {
@@ -94,6 +94,12 @@ const Filters = ({ open, refinement, facets, range, currency, t, onToggle, onCha
 
   return (
     <Container>
+      { /* Claude - 2026-08-31: the dimmed layer behind the filter sheet, so
+           it reads as sitting OVER the results rather than as part of them -
+           and so a tap anywhere off the sheet closes it, which is what
+           everybody tries first. */ }
+      <Backdrop $open={ open } onClick={ onToggle } />
+
       <Toggle type="button" $open={ open } aria-expanded={ open } onClick={ onToggle }>
         <FaFilter />
         { t('routes_order.step2.filters.title') }

package/Found/Filters/styles.ts

@@ -18,28 +18,95 @@ export const Container = styled.div`
   }
 `;
 
+/**
+ * Claude - 2026-08-31 (Ferjolt: "the search results should have the filter
+ * button at the bottom of the page as a fixed floating button in contrast
+ * background color").
+ *
+ * FIXED TO THE VIEWPORT, not to the top of the list. Filtering is something
+ * people reach for AFTER scrolling - three cards down, having seen the
+ * prices, deciding they want only the direct ones. A button at the top of
+ * the page is a scroll back up at exactly the moment somebody has formed an
+ * opinion, and the further they read the further away it gets.
+ *
+ * In the brand's PRIMARY colour rather than the card surface, because a
+ * floating control has no container to belong to - it has to read as the one
+ * thing sitting above the page, and a bordered white pill floating over
+ * white cards reads as a rendering bug.
+ *
+ * Centred rather than in a corner: this is the only floating control on the
+ * screen, both thumbs reach the middle, and a corner would collide with the
+ * browser's own back/share affordances on the platforms that draw them.
+ */
 export const Toggle = styled.button<{ $open: boolean }>`
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 900;
+
+  /*
+   * Clear of the home indicator on a notched phone. env() resolves to 0 on
+   * everything that has no inset, so the fallback is simply the base value.
+   */
+  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
+
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  font-size: ${ props => props.theme.size.s };
+  gap: 6px;
+  padding: 9px 16px;
+  font-size: ${ props => props.theme.size.xs };
   font-weight: 700;
   border-radius: 100px;
-  border: 1px solid ${ props => props.theme.inputs.border };
-  background: ${ props => props.theme.background.normal };
-  color: ${ props => props.theme.font.normal };
+  border: none;
+  cursor: pointer;
+
+  /*
+   * Claude - 2026-08-31 (Ferjolt: "Make the filter button smaller and green
+   * color (our green color)").
+   *
+   * font.success - the brand's green - rather than primary, which is the
+   * gold the "Select Route" button already uses. Two prominent controls in
+   * the same colour compete: the gold one is the conversion, and a floating
+   * filter pill in that colour would be pulling at the same attention from
+   * the corner of every screen. Green reads as a tool, gold as the action.
+   */
+  background: ${ props => props.theme.font.success };
+  color: #ffffff;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
   transition: all 0.2s ease;
 
   &:hover {
-    border-color: ${ props => props.theme.primary.normal };
+    opacity: 0.92;
   }
 
   ${ props => props.$open && css`
-    border-color: ${ props => props.theme.primary.normal };
+    /* above its own sheet, so the same button closes it */
+    z-index: 1002;
   ` }
 
   // the sidebar is always open, so there is nothing left to toggle
+  @media (min-width: 1280px) {
+    position: static;
+    transform: none;
+    display: none;
+  }
+`;
+
+/**
+ * The dimmed backdrop behind the filter sheet.
+ *
+ * Rendered only while the sheet is open and only below the sidebar
+ * breakpoint. It is what makes the sheet read as a layer over the results
+ * rather than as part of them, and it gives a tap target for "close" that
+ * everybody already knows.
+ */
+export const Backdrop = styled.div<{ $open: boolean }>`
+  display: ${ props => props.$open ? 'block' : 'none' };
+  position: fixed;
+  inset: 0;
+  z-index: 899;
+  background: rgba(0, 0, 0, 0.45);
+
   @media (min-width: 1280px) {
     display: none;
   }
@@ -59,6 +126,36 @@ export const Panel = styled.div<{ $open: boolean }>`
   gap: 20px;
   margin-top: 12px;
   padding: 20px;
+
+  /*
+   * Claude - 2026-08-31: a BOTTOM SHEET on a phone, now that the control
+   * that opens it floats at the bottom of the viewport.
+   *
+   * A fixed button opening a panel inline - possibly hundreds of pixels up
+   * the page, wherever the list happens to be scrolled - would look like it
+   * had done nothing at all. The sheet opens where the thumb already is.
+   *
+   * Capped at 80vh and scrollable: this panel holds every operator, every
+   * stop at both ends and every amenity, which on a busy pair is far more
+   * than one screen. Room is left at the bottom for the toggle, which sits
+   * above the sheet and doubles as its close button.
+   */
+  @media (max-width: 1279px) {
+    ${ props => props.$open && css`
+      position: fixed;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1000;
+      max-height: 80vh;
+      overflow-y: auto;
+      margin-top: 0;
+      padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
+      border-radius: 16px 16px 0 0;
+      box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
+      background: ${ props.theme.background.normal };
+    ` }
+  }
   // minmax(0, 1fr) rather than 1fr: a grid track's implicit min-width is
   // auto, so a long stop name like "Terminali Lindor Interurban dhe
   // Nderkombetar i Autobusave (TEG)" pushed the whole panel wider than its

package/Found/Route/Route.tsx

@@ -168,7 +168,7 @@ const Route = ({ data, type, date, passengers, t, onSave, children }: Props): JS
           </CodeCompany>
         </Company>
 
-        <Location>
+        <Location $side="from">
           <h2>
             { data.locations.from.city.name }
             { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
@@ -200,7 +200,7 @@ const Route = ({ data, type, date, passengers, t, onSave, children }: Props): JS
           <span><BiHourglass />{ formatDuration(data.duration, t) }</span>
         </Time>
 
-        <Location>
+        <Location $side="to">
           <h2>
             { data.locations.to.city.name }
             { /* Edited: Ferjolt Ozuni - Date: 2026-08-03

package/Found/Route/styles.ts

@@ -73,12 +73,35 @@ export const FavoriteStop = styled.div`
  * to point down the column, and the price on one row instead of a centred
  * stack. Same information, roughly a third less height than before.
  */
+/*
+ * Claude - 2026-08-31 (Ferjolt: "the search results should be displayed in
+ * more compact cards; ... departure details and origin details should be in
+ * the same row, separated by distance/duration").
+ *
+ * A GRID on a phone, not a column. The card used to stack six blocks - logo,
+ * rating, code, origin, duration, destination - which came to ~390px before
+ * the price row, so barely one result fitted on a screen and comparing two
+ * meant scrolling between them. Comparison is the entire job of this page.
+ *
+ * The row that matters is origin | duration | destination, which is how
+ * everybody reads a journey and how every timetable ever printed has set it.
+ * Named areas rather than source order, because the operator block sits
+ * ABOVE that row in the DOM and would otherwise take the first column.
+ */
 export const Trip = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  grid-template-areas:
+    'company company company'
+    'from    time    to'
+    'price   price   price';
+  align-items: center;
+  gap: 4px 8px;
 
   @media (min-width: 640px) {
+    display: flex;
+    grid-template-columns: none;
+    grid-template-areas: none;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
@@ -98,6 +121,7 @@ export const Trip = styled.div`
 `;
 
 export const Company = styled.div`
+  grid-area: company;
   flex-basis: 100%;
 
   /**
@@ -120,6 +144,21 @@ export const Company = styled.div`
    */
   align-items: center;
 
+  /*
+   * Claude - 2026-08-31: ONE STRIP on a phone - logo, rating and route code
+   * side by side rather than stacked three deep. Stacked, the operator block
+   * alone was taller than the journey row it introduces, which is the wrong
+   * way round: the journey is what somebody is choosing between.
+   */
+  @media (max-width: 639px) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 4px;
+  }
+
   /**
    * Edited: Ferjolt Ozuni - Date: 2026-08-03
    *
@@ -144,7 +183,15 @@ export const Company = styled.div`
  * both. It also stops one long stop name stealing width from the other
  * side of the card.
  */
-export const Location = styled.div`
+/*
+ * Claude - 2026-08-31: `$side` places this in the phone grid.
+ *
+ * The component renders twice - once for each end of the journey - so it
+ * cannot carry a fixed grid-area. The prop is only read below 640px; above
+ * it the flex row puts them in source order and the areas are unset.
+ */
+export const Location = styled.div<{ $side?: 'from' | 'to' }>`
+  grid-area: ${ props => props.$side ?? 'auto' };
   flex: 1;
   min-width: 0;
   display: flex;
@@ -188,6 +235,42 @@ export const Location = styled.div`
     overflow-wrap: anywhere;
   }
 
+  /*
+   * Claude - 2026-08-31: sized to the phone grid's columns.
+   *
+   * The three-column journey row leaves each end about 135px of a 375px
+   * screen, and a heading at desktop scale does not fit in that - so
+   * "Thessaloniki" was being broken mid-word into "Thessalo / niki", which
+   * overflow-wrap:anywhere permits and which reads as a rendering fault
+   * rather than as a wrap.
+   *
+   * break-word rather than anywhere: it breaks a word only when the word
+   * genuinely cannot fit on a line of its own, so the heading wraps between
+   * "Thessaloniki (GRC)" and "06:00" as intended and stops slicing city
+   * names in half. The size step is what makes that possible - at this
+   * scale the longest city on the network fits its column unbroken.
+   */
+  /*
+   * Claude - 2026-08-31 (Ferjolt: "Make city names smaller font, and
+   * countries iso even smaller").
+   *
+   * MEASURED: the destination column was 96px and "Thessaloniki" at 16px
+   * wanted exactly 96px, so it broke mid-word into "Thessalonik / i" - which
+   * reads as a rendering fault rather than as a wrap. A step down in the
+   * heading and a smaller ISO give the longest city on the network room to
+   * sit on one line inside its column.
+   *
+   * break-word rather than anywhere: a word is only ever broken when it
+   * genuinely cannot fit a line of its own, so the heading wraps between the
+   * city and the time as intended instead of slicing names in half.
+   */
+  @media (max-width: 639px) {
+    & > h2 {
+      font-size: ${ props => props.theme.size.s };
+      overflow-wrap: break-word;
+    }
+  }
+
   /**
    * Edited: Ferjolt Ozuni - Date: 2026-08-03
    * break-word, not normal. Real spaces now let the heading wrap between
@@ -254,6 +337,17 @@ export const Iso = styled.span`
   // side of "(ALB)" is this margin's job, not whitespace's
   margin: 0 5px;
   font-size: ${ props => props.theme.size.xs };
+
+  /*
+   * Claude - 2026-08-31 (Ferjolt: "countries iso even smaller"). It is a
+   * qualifier on the city beside it, not information anybody scans for -
+   * every millimetre it gives back goes to the city name, which is what
+   * people actually read.
+   */
+  @media (max-width: 639px) {
+    margin: 0 3px;
+    font-size: calc(${ props => props.theme.size.xs } - 2px);
+  }
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .5px;
@@ -261,12 +355,45 @@ export const Iso = styled.span`
 `;
 
 export const Time = styled.div`
+  grid-area: time;
   display: flex;
   flex-direction: row;
   gap: 6px;
   align-items: center;
   font-weight: 700;
 
+  /*
+   * Claude - 2026-08-31: on a phone this is the separator BETWEEN the two
+   * ends rather than a row of its own, so the arrow and the duration stack
+   * into a narrow column that the grid sizes to its content.
+   */
+  /*
+   * Claude - 2026-08-31 (Ferjolt: "Make also the duration even smaller so it
+   * does not occupie to much space and freeup space for origin and
+   * destination").
+   *
+   * MEASURED: the pill was taking ~137px of a 345px row, which left the two
+   * ends 96px each - exactly the width "Thessaloniki" needs, so it broke
+   * mid-word. Stripped of its pill background and padding here it costs
+   * about half that, and both ends gain 20px.
+   */
+  @media (max-width: 639px) {
+    flex-direction: column;
+    gap: 0;
+    font-size: calc(${ props => props.theme.size.xs } - 1px);
+    white-space: nowrap;
+
+    & > span {
+      padding: 0;
+      background: none;
+      font-size: calc(${ props => props.theme.size.xs } - 1px);
+    }
+
+    & > span > svg {
+      display: none;
+    }
+  }
+
   @media (min-width: 640px) {
     flex-direction: column;
     gap: 8px;
@@ -322,6 +449,14 @@ export const Time = styled.div`
 `;
 
 export const Price = styled.div`
+  /*
+   * Claude - 2026-08-31: spans the phone grid.
+   *
+   * Trip is a grid below 640px and this is one of its children, so without
+   * an area of its own the fare and the button were placed into the first
+   * column - which is why they stacked instead of sharing a line.
+   */
+  grid-area: price;
   flex-basis: 100%;
   display: flex;
 
@@ -451,6 +586,24 @@ export const LinkCompany = styled(Link)`
     border-radius: 8px;
   }
 
+  /*
+   * Claude - 2026-08-31 (Ferjolt: "operator logo should be smaller").
+   *
+   * 165x60 was the largest thing on a phone card, and it is an IDENTIFIER -
+   * it only has to be recognisable, and it is recognised at a glance by
+   * people who already know the operator and not at all by people who do
+   * not. The 32px it gives back is a third of the height the journey row
+   * needs.
+   */
+  @media (max-width: 639px) {
+    max-width: 96px;
+    margin: 0;
+
+    & > img {
+      ${ logoBox('100%', '28px') }
+    }
+  }
+
   /**
    * Edited: Ferjolt Ozuni - Date: 2026-08-03
    * Smaller from the width where the card lays out in one row, since that is
@@ -549,6 +702,20 @@ export const ButtonDetails = styled.button`
   font-size: ${ props => props.theme.size.s };
   color: ${ props => props.theme.font.faded };
 
+  /*
+   * Claude - 2026-08-31 (Ferjolt: "'Details' should be displayed below
+   * 'Select route' button").
+   *
+   * 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.
+   */
+  @media (max-width: 639px) {
+    align-self: flex-end;
+    font-size: ${ props => props.theme.size.xs };
+  }
+
   &:hover {
     color: ${ props => props.theme.font.normal };
   }

package/Found/Sort/Sort.tsx

@@ -1,5 +1,5 @@
 import { TFunction } from 'i18next';
-import { Container, Label, Options, Option } from './styles';
+import { Container, Label, Options, Option, Dropdown } from './styles';
 import { SortKey, SORTS } from '../refine';
 
 interface Props {
@@ -21,6 +21,22 @@ const Sort = ({ value, t, onChange }: Props): JSX.Element => (
   <Container>
     <Label>{ t('routes_order.step2.sort.title') }</Label>
 
+    { /*
+        Claude - 2026-08-31 (Ferjolt: on a small screen "the 'sort by' should
+        be with dropdown option and displayed inline with 'trips found'").
+
+        TWO CONTROLS, ONE STATE, and only ever one of them on screen - which
+        is CSS, not a media-query hook, so there is no flash of the wrong one
+        while JavaScript works out how wide the window is.
+
+        The pills stay on a wide screen for the reason they were chosen:
+        somebody who never opens a dropdown still sees that "cheapest" is one
+        click away. On a phone that argument loses to arithmetic - five pills
+        squeezed to 2px of padding, "Recommended" truncated, and a whole row
+        of vertical space spent before the first result. A native select
+        costs one line, opens the platform's own picker, and is the control
+        people already know.
+     */ }
     <Options>
       { SORTS.map(sort => (
         <Option
@@ -34,6 +50,18 @@ const Sort = ({ value, t, onChange }: Props): JSX.Element => (
         </Option>
       )) }
     </Options>
+
+    <Dropdown
+      value={ value }
+      aria-label={ t('routes_order.step2.sort.title') }
+      onChange={ event => onChange(event.target.value as SortKey) }
+    >
+      { SORTS.map(sort => (
+        <option key={ sort } value={ sort }>
+          { t(`routes_order.step2.sort.${ sort }`) }
+        </option>
+      )) }
+    </Dropdown>
   </Container>
 );
 

package/Found/Sort/styles.ts

@@ -7,24 +7,59 @@ import styled, { css } from 'styled-components';
  * instead of losing a third of it to the "Sort by" label and wrapping onto
  * three lines.
  */
+/*
+ * Claude - 2026-08-31: a ROW on a phone too, because the control is now a
+ * single select rather than five pills - it sits beside the trip count
+ * instead of under it, which is what buys back the vertical space.
+ */
 export const Container = styled.div`
   display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 6px;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
 
   @media (min-width: 640px) {
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
     flex-wrap: wrap;
   }
 `;
 
+/**
+ * The "Sort by" caption. Hidden on a phone: the select shows the current
+ * choice in its own words ("Cheapest"), which says what it is without
+ * spending a third of the row saying so.
+ */
 export const Label = styled.span`
+  display: none;
   font-size: ${ props => props.theme.size.s };
   font-weight: 700;
   color: ${ props => props.theme.font.faded };
+
+  @media (min-width: 640px) {
+    display: inline;
+  }
+`;
+
+/**
+ * The phone control.
+ *
+ * A real <select>, so it opens the platform's own picker - the wheel on iOS,
+ * the sheet on Android - which is faster to use one-handed than anything
+ * rebuildable in a div, and accessible without any work.
+ */
+export const Dropdown = styled.select`
+  max-width: 150px;
+  padding: 6px 10px;
+  font-size: ${ props => props.theme.size.s };
+  font-weight: 700;
+  border-radius: ${ props => props.theme.borderRadius };
+  border: 1px solid ${ props => props.theme.inputs.border };
+  background: ${ props => props.theme.background.normal };
+  color: ${ props => props.theme.font.normal };
+
+  @media (min-width: 640px) {
+    display: none;
+  }
 `;
 
 /**
@@ -32,11 +67,10 @@ export const Label = styled.span`
  * height than the first result they were meant to reorder.
  */
 export const Options = styled.div`
-  display: flex;
-  gap: 3px;
-  flex-wrap: nowrap;
+  display: none;
 
   @media (min-width: 640px) {
+    display: flex;
     gap: 6px;
     flex-wrap: wrap;
   }

package/Found/Summary/styles.ts

@@ -8,21 +8,27 @@ import styled from 'styled-components';
  * same card background as everything else on the page rather than floating
  * loose on the page background.
  */
+/*
+ * Claude - 2026-08-31 (Ferjolt: the sort "should be displayed inline with
+ * 'trips found: {number} {price}', but in the far right of the row").
+ *
+ * One row at EVERY width now, not just from 1024px. It used to stack on a
+ * phone, which put the count on one line and five sort pills on the next -
+ * two rows of chrome above the first actual result. The sort is a single
+ * select on small screens (see Sort/styles), so the pair fits on one line
+ * with the count left and the control hard right.
+ */
 export const Container = styled.div`
   display: flex;
-  flex-direction: column;
-  gap: 12px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
   margin-bottom: 15px;
 
   &.box {
     padding: 12px 15px;
   }
-
-  @media (min-width: 1024px) {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
 `;
 
 export const Result = styled.div`
@@ -30,10 +36,16 @@ export const Result = styled.div`
   align-items: baseline;
   gap: 8px;
   flex-wrap: wrap;
+  min-width: 0;
 `;
 
 export const Total = styled.strong`
-  font-size: ${ props => props.theme.size.l };
+  font-size: ${ props => props.theme.size.m };
+  white-space: nowrap;
+
+  @media (min-width: 640px) {
+    font-size: ${ props => props.theme.size.l };
+  }
 `;
 
 export const Range = styled.span`

package/Schedule/styles.ts

@@ -15,6 +15,81 @@ export const Table = styled.table`
   border-collapse: collapse;
   min-width: 620px;
 
+  /*
+   * Claude - 2026-08-31 (Ferjolt: "the timetable on the small screen should
+   * not display columns for Duration and Stops, so it can fit the small
+   * screens without horizontal scroller").
+   *
+   * Six columns need 620px, and the phone this is read on has 375. The
+   * container scrolls sideways, which is the worst of both: the columns that
+   * matter most - when it leaves, what it costs - are the ones that fall off
+   * the right edge, and a sideways scroll inside a vertically scrolling page
+   * is a gesture people fight rather than use.
+   *
+   * Duration and Stops are the two that go, and they are the right two: both
+   * are DERIVED from the departure and arrival already on the row, so a
+   * reader loses arithmetic rather than facts. What stays is when it goes,
+   * when it lands, who runs it and what it costs - which is the whole of
+   * what a timetable is for.
+   *
+   * By position rather than by a class, because the cells carry no marker of
+   * their own and adding one to two <td>s in a six-column table to express
+   * "the third and fourth" is more indirection than the rule it replaces.
+   * The min-width goes with them, which is what actually removes the
+   * scroller.
+   */
+  @media (max-width: 767px) {
+    min-width: 0;
+
+    /*
+     * table-layout: fixed, so the table is the width of its container and
+     * the columns divide THAT, rather than the columns deciding a width the
+     * container then has to scroll.
+     *
+     * Measured without it: the four surviving columns came to 379px inside a
+     * 335px card, and the operator column alone claimed 144px for a name
+     * that needs seventy - auto layout sizes to the widest cell in the whole
+     * body, so one long operator name set the width for every row and no
+     * amount of wrapping on that cell brought it back.
+     */
+    table-layout: fixed;
+    width: 100%;
+
+    th:nth-child(3), td:nth-child(3),
+    th:nth-child(4), td:nth-child(4) {
+      display: none;
+    }
+
+    th, td {
+      padding: 8px 4px;
+      font-size: ${ props => props.theme.size.xs };
+    }
+
+    /*
+     * The operator is the one cell whose content has no natural width limit,
+     * so it is the one allowed to wrap. Measured: with the two derived
+     * columns gone the table still came to 379px against a 375px viewport -
+     * four pixels, entirely from nowrap on a long operator name, and four
+     * pixels is enough to leave the sideways scroll in place and undo the
+     * point of the exercise.
+     */
+    /* the two times and the fare need only what they show; the operator
+       takes the remainder and wraps inside it */
+    th:nth-child(1), td:nth-child(1),
+    th:nth-child(2), td:nth-child(2) {
+      width: 22%;
+    }
+
+    th:nth-child(6), td:nth-child(6) {
+      width: 26%;
+    }
+
+    th:nth-child(5), td:nth-child(5) {
+      white-space: normal;
+      word-break: break-word;
+    }
+  }
+
   th, td {
     padding: 10px 12px;
     text-align: left;

package/package.json

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