`, and why the class has
no declarations here rather than an empty rule: there is nothing it should ever set. */
/* ============================================================
── A list is not a table on a phone (TM-139) ────────────────
docs/08-design-system-v2.md §5.4
THE DEFECT. At 375px /employees showed nine full-width rows of
column NAMES before the first employee. That is Fomantic's
`.ui.table:not(.unstackable)` block at max-width 767.98px: it
puts `display: block` on every thead/tbody/tr/td, so a header
row becomes one row per column. The behaviour is intentional in
Fomantic and cannot be overridden — those declarations carry
`!important` at (0,8,3).
THE FIX IS NOT A NARROWER TABLE. A table is a grid for comparing
rows against each other, and 375px has room for one column. So
below the breakpoint the list stops being a table and becomes a
list of cards:
┌───────────────────────────────┐
│ Jan Novák [Detail][⋮]│
│ jan.novak@example.com Active │
└───────────────────────────────┘
WHY CSS AND NOT A SECOND COMPONENT. A card list rendered beside
the table would need its own copy of the page's data — SemDataTable
owns the loading, the paging and the sorting — and would duplicate
every `data-testid`, every `RowActions` menu and every `
`
in the row. Two DOMs for one list is how the Detail control stopped
being a real link the first time (TM-155). Reshaping the one DOM
keeps a single set of hooks: the `⋮` menu's items are the same
`RowActionItem` anchors, the row is still `tr.tm-row-linked` so
js/row-link.js still makes the whole card clickable, and
UiConsistencyTests keeps passing on the markup it already pins.
`unstackable` IS REQUIRED IN THE MARKUP. Fomantic's stacking block
is `!important`, so it has to be switched off at the source rather
than overridden — `Class="unstackable tm-list-table"` on the
SemDataTable. `tm-list-table` is then the opt-in for everything
below: the twelve SemDataTable lists and the hand-written Settings
table carry it, and nothing else does. That precision is the point.
The tables on detail pages — a session's participants, a group's
members, the two qualification matrices — are one section of a
document rather than the page's whole subject, and turning those
into cards would leave a detail page reading as a stack of
unrelated fragments.
SPECIFICITY, READ BEFORE EDITING. The cell rules further up this
file score up to (0,7,4): the `:not(:has(…))` ellipsis guard
contributes two classes on its own and `.tm-col-narrow` adds a
third. A short selector here loses to them silently, and the cards
then render with 46px-tall clipped cells. Every selector below
therefore repeats the same `:not(.tm-attendance-matrix)
:not(.tm-checklist-table)` guard that the rules it must beat carry
— which both ties the arithmetic and says that this is the same set
of cells seen at a different width. It wins on cascade order, this
block being last in the file. Do not shorten them.
============================================================ */
@media only screen and (max-width: 768px) {
/* The frame moves from the table to the individual cards, so the table itself stops
being a surface: no border, no background, nothing to see. */
.ui.table.unstackable.tm-list-table {
display: block;
width: 100%;
border: none;
background: transparent;
}
/* The nine header rows the bug is about. There is nothing to label at this width —
each card shows the two values it shows — and a stack of column names in front of
the data is the defect itself. Sorting stays reachable from the same list at any
wider viewport. */
.ui.table.unstackable.tm-list-table thead {
display: none;
}
/* The card stack. `gap` rather than a margin on the row, so the first and last card
sit flush inside the padding rather than doubling it. */
.ui.table.unstackable.tm-list-table tbody {
display: flex;
flex-direction: column;
gap: var(--tm-space-2);
padding: var(--tm-space-2);
}
/* One card.
Flex with `order`, not grid, and that is what makes one rule work across thirteen
lists with thirteen different column orders: the identifying value is the third
column on /sessions and the second on /administration/users, and `order` puts it
first on the card without any page reordering its columns for the phone.
`flex-wrap` then lets the supporting values fall to a second line by themselves,
which is the only line-breaking decision that has to be right at an unknown
width. */
.ui.table.unstackable.tm-list-table tbody tr {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--tm-space-3);
row-gap: var(--tm-space-1);
padding: var(--tm-space-3);
border: 1px solid var(--tm-border);
border-radius: var(--tm-radius-md);
background: var(--tm-surface);
transition: background var(--tm-transition-fast);
}
/* Every cell drops the table treatment: the fixed 46px row height (a card is as tall
as what is in it), the 14rem cap and the ellipsis (there is a whole line to use, so
a long email wraps and is read in full instead of hovered for), the cell padding,
and the hairline between rows (the card's own border is the separator now).
The three selectors share one block because they set the same thing; they are three
because each has to out-score a different cell rule above — the plain cell beats the
ellipsis guard at (0,6,3), `.tm-col-narrow` beats (0,7,3), and the row-link cell
beats (0,6,4). See the specificity note above the media query. */
.ui.table.unstackable.tm-list-table:not(.tm-attendance-matrix):not(.tm-checklist-table) tbody tr td,
.ui.table.unstackable.tm-list-table:not(.tm-attendance-matrix):not(.tm-checklist-table) tbody tr td.tm-col-narrow,
.ui.table.unstackable.tm-list-table:not(.tm-attendance-matrix):not(.tm-checklist-table) tbody tr td:has(> a.tm-row-link:only-child) {
display: block;
height: auto;
max-width: 100%;
min-width: 0;
padding: 0;
border-top: none;
background: transparent;
box-shadow: none;
white-space: normal;
overflow: visible;
text-overflow: clip;
overflow-wrap: anywhere;
}
/* Nothing to do for the `.tm-cell-text` spans TM-151 puts inside cells: the clipping
lives on the cell, the cell has just released it, and the span carries no style of
its own. Their `title` is simply inert here — nothing is truncated on a card — and it
stays in the markup because the same markup has to serve the viewport above. */
/* WHAT THE CARD SHOWS — the one decision each list makes for itself, in its own
`ItemClass`:
tm-card-title the value that names the row — a person, a requirement, a date
(no marker) a supporting value, on the line under the title
tm-card-hide not on the card at all
tm-card-actions the row's controls, kept on the title's line
A column with no marker shows, deliberately. A list that has not been through this
pass then renders every value stacked, which is plain but complete; the failure
mode of the opposite default is a card with nothing on it. */
.ui.table.unstackable.tm-list-table:not(.tm-attendance-matrix):not(.tm-checklist-table) tbody tr td.tm-card-hide {
display: none;
}
.ui.table.unstackable.tm-list-table:not(.tm-attendance-matrix):not(.tm-checklist-table) tbody tr td.tm-card-title {
order: 0;
flex: 1 1 auto;
font-size: var(--tm-text-md);
line-height: var(--tm-leading-md);
font-weight: var(--tm-weight-semibold);
color: var(--tm-text);
}
/* The controls keep the title's line and the far end of it. `margin-left: auto` and
not `justify-content: space-between`, because the title is a variable-length run
and the actions have to stay on the right whatever it does. */
.ui.table.unstackable.tm-list-table:not(.tm-attendance-matrix):not(.tm-checklist-table) tbody tr td.tm-card-actions {
order: 1;
flex: 0 0 auto;
margin-left: auto;
white-space: nowrap;
}
/* The supporting values, on their own line below. --tm-text-secondary on --tm-surface
measures 7.31:1 (tokens.css), so they are quieter than the title without becoming
hard to read. */
.ui.table.unstackable.tm-list-table:not(.tm-attendance-matrix):not(.tm-checklist-table) tbody tr td:not(.tm-card-title):not(.tm-card-actions):not(.tm-card-hide) {
order: 2;
flex: 0 1 auto;
font-size: var(--tm-text-base);
line-height: var(--tm-leading-base);
color: var(--tm-text-secondary);
}
/* Hover and focus move from the cells to the card. On a table they are painted on the
`td`, because a cell background paints above a row background whatever the cascade
says; a card is one box, so it is painted once — on the box the reader is looking at.
The focus ring also stops being inset here. §5.2 draws it inside on a table because
the neighbouring cells and the panel's `overflow: hidden` clip an outer ring on three
sides; a card is separated from its neighbours by a real gap, so a ring around it has
the room it needs. */
.ui.table.unstackable.tm-list-table tbody tr:hover {
background: var(--tm-surface-2);
}
.ui.table.unstackable.tm-list-table:not(.tm-attendance-matrix):not(.tm-checklist-table) tbody tr:hover td {
background: transparent;
}
.ui.table.unstackable.tm-list-table tbody tr.tm-row-linked:has(a.tm-row-link:focus-visible) {
background: var(--tm-surface-2);
box-shadow: 0 0 0 2px var(--tm-primary);
}
.ui.table.unstackable.tm-list-table:not(.tm-attendance-matrix):not(.tm-checklist-table) tbody tr.tm-row-linked:has(a.tm-row-link:focus-visible) td {
background: transparent;
box-shadow: none;
}
/* The row link IS the card's title, so it should read as the title and not as a second
blue thing inside it. It stays a real `` — see RowLink.razor — so nothing
about how it is reached changes. */
.ui.table.unstackable.tm-list-table tbody tr td.tm-card-title a.tm-row-link {
color: inherit;
font: inherit;
}
}