Merge branch 'dev' of https://github.com/Tria-plc/edr-platform into alpha

apps/edr-freight-web/backoffice/src/pages/bookings/booking-requests-table.css

@@ -0,0 +1,84 @@
+/*
+ * Scoped to .edr-booking-requests-table — the DataTable container div on the
+ * backoffice booking-requests list only; no other DataTable is affected.
+ * Mirrors the portal's /bookings table (bookings-table.css): horizontal
+ * scroll on the container, a sticky header row, and a sticky/shadowed
+ * action column — with a compact 40–60px column width band (content
+ * beyond that is clipped with an ellipsis) instead of the portal's
+ * content-sized columns.
+ */
+.edr-booking-requests-table {
+  overflow-x: auto;
+}
+
+/*
+ * width: max-content — the table is exactly as wide as its columns need,
+ * never squeezed to fit the viewport; the container scrolls instead.
+ * min-width: 100% keeps it filling the card when content is narrow.
+ */
+.edr-booking-requests-table table {
+  table-layout: auto;
+  width: max-content;
+  min-width: 100%;
+}
+
+/* Compact column band: 40px floor, 60px ceiling, ellipsis past that. */
+.edr-booking-requests-table th,
+.edr-booking-requests-table td:not([colspan]) {
+  min-width: 40px;
+  max-width: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * Full-width rows (loading skeleton / error / empty state) span every
+ * column via colspan — leave their sizing and wrapping alone.
+ */
+.edr-booking-requests-table td[colspan] {
+  max-width: none;
+  white-space: normal;
+}
+
+/* Sticky header row. */
+.edr-booking-requests-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+/*
+ * Fixed, sticky action column. Overrides the inline width DataTable stamps
+ * from tanstack's column size (`size: 140` on the actions column) — hence
+ * !important. `:not([colspan])` keeps the full-width error/empty rows out.
+ */
+.edr-booking-requests-table th:last-child,
+.edr-booking-requests-table td:last-child:not([colspan]) {
+  width: 60px !important;
+  min-width: 60px;
+  max-width: 60px;
+  position: sticky;
+  right: 0;
+  box-shadow: -12px 0 16px -6px rgba(16, 32, 47, 0.3);
+}
+
+/*
+ * Sticky cells sit above the scrolling ones, so they need their own opaque
+ * background or the columns underneath show through.
+ */
+.edr-booking-requests-table td:last-child:not([colspan]) {
+  background: #f5f8fb;
+  z-index: 2;
+}
+
+/* Row hover uses the tailwind `hover:bg-accent` class on the <tr>. */
+.edr-booking-requests-table tbody tr:hover td:last-child:not([colspan]) {
+  background: var(--accent, #f4fbf8);
+}
+
+/* Header cell is sticky on both axes — it must outrank the body's sticky column. */
+.edr-booking-requests-table th:last-child {
+  background: #f4f7fa;
+  z-index: 3;
+}

apps/edr-freight-web/portal/src/pages/bookings/bookings-table.css

@@ -4,7 +4,7 @@
  * content-sized columns with a 40px floor, horizontal scroll when the table
  * outgrows the card, and a sticky shadowed action column.
  */
-.edr-bookings-table {
+ .edr-bookings-table {
   overflow-x: auto;
 }