mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-29 10:40:58 +00:00
85 lines
2.5 KiB
CSS
85 lines
2.5 KiB
CSS
/*
|
||
* 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;
|
||
}
|