diff --git a/apps/edr-freight-web/backoffice/src/pages/bookings/booking-requests-table.css b/apps/edr-freight-web/backoffice/src/pages/bookings/booking-requests-table.css new file mode 100644 index 000000000..d5bb8df5d --- /dev/null +++ b/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 . */ +.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; +} diff --git a/apps/edr-freight-web/portal/src/pages/bookings/bookings-table.css b/apps/edr-freight-web/portal/src/pages/bookings/bookings-table.css index 043bc58fc..0ecc73e03 100644 --- a/apps/edr-freight-web/portal/src/pages/bookings/bookings-table.css +++ b/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; }