mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-26 18:42:49 +00:00
95 lines
2.8 KiB
CSS
95 lines
2.8 KiB
CSS
/*
|
|
* Scoped to .edr-clearance-table — the DataTable container div on the
|
|
* Document Clearance hubs (GL Ethiopia + GL Djibouti). Mirrors the portal's /bookings table
|
|
* (bookings-table.css): content-sized columns with a 100px floor, no
|
|
* truncation, horizontal scroll when the table outgrows the card, sticky
|
|
* header row and a sticky shadowed action column.
|
|
*/
|
|
.edr-clearance-table {
|
|
overflow-x: auto;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
/*
|
|
* width: max-content — the table is exactly as wide as its columns' content
|
|
* needs, never squeezed to fit the viewport; the container scrolls instead.
|
|
* min-width: 100% keeps it filling the card when content is narrow.
|
|
*/
|
|
.edr-clearance-table table {
|
|
table-layout: auto;
|
|
width: max-content;
|
|
min-width: 100%;
|
|
}
|
|
|
|
/* 100px floor, no ceiling: cells grow to fit their text, nothing is clipped. */
|
|
.edr-clearance-table th,
|
|
.edr-clearance-table td:not([colspan]) {
|
|
min-width: 100px;
|
|
max-width: none;
|
|
overflow: visible;
|
|
text-overflow: clip;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/*
|
|
* Mantine Badge caps itself at max-width: 100%; inside an auto-layout table
|
|
* cell that resolves against min-content and clips the label. Let badges size
|
|
* to their text so the column grows to fit them.
|
|
*/
|
|
.edr-clearance-table .mantine-Badge-root {
|
|
max-width: none;
|
|
}
|
|
|
|
/*
|
|
* Mantine Group's preventGrowOverflow caps every child at 100%/N of the cell.
|
|
* In an auto-width table cell that resolves against min-content and collapses
|
|
* the badges/text in the Type, Route and Status columns to nothing. Let group
|
|
* children size to their content; the column grows and the container scrolls.
|
|
*/
|
|
.edr-clearance-table .mantine-Group-root > * {
|
|
max-width: none;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Sticky header row. */
|
|
.edr-clearance-table thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
/*
|
|
* Sticky action column, shrunk to its content. The width overrides the inline
|
|
* width DataTable stamps from tanstack's column size — hence !important.
|
|
* `:not([colspan])` keeps the full-width error/empty rows out.
|
|
*/
|
|
.edr-clearance-table th:last-child,
|
|
.edr-clearance-table td:last-child:not([colspan]) {
|
|
width: 1% !important;
|
|
min-width: 0;
|
|
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-clearance-table td:last-child:not([colspan]) {
|
|
background: #f5f8fb;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Row hover uses the tailwind `hover:bg-accent` class on the <tr>. */
|
|
.edr-clearance-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-clearance-table th:last-child {
|
|
background: #f4f7fa;
|
|
z-index: 3;
|
|
}
|