from an HtmlColumn — is clamped to the cell width and
breaks unbreakable strings (emails, UUIDs) rather than forcing
the card wide. `min-width: 0` is needed on flex/inline children
so they can shrink below their intrinsic content width. */
.responsive-table td > * {
min-width: 0;
max-width: 100%;
overflow-wrap: break-word;
word-break: break-word;
}
/* Label column: a fixed-basis flex item that does NOT grow — it
takes exactly ~6.5rem and yields the rest of the row to the
value, so the value text uses the full remaining width instead
of shrink-wrapping and wrapping awkwardly after a word or two.
Top-aligned so a multi-line value doesn't drag the label down. */
.responsive-table td::before {
content: attr(data-label);
font-weight: 600;
font-size: 0.8125rem;
color: #6b7280;
flex: 0 0 6.5rem;
min-width: 0;
align-self: flex-start;
overflow-wrap: break-word;
word-break: break-word;
}
/* UserColumn cells render an avatar that is taller than a single
line of text. Centre the label (and the cell's flex items) so
the label lines up with the name rather than the avatar top. */
.responsive-table td.user-column-cell {
align-items: center;
}
.responsive-table td.user-column-cell::before {
align-self: center;
}
/* Action column docks to the bottom of the card as a full-width
footer row, separated by a hairline divider. Negative margin
breaks out of the card's `0.875rem 1rem` padding so the divider
and footer span edge-to-edge. The cell carries `.fit-content`
(width:1px) and `min-width:100px` from desktop — override both
so the footer can stretch full-width on mobile. */
.responsive-table td.table-actions-column,
.responsive-table td[data-label="Actions"] {
/* Do NOT set an explicit width. As a block-level flex element
inside the card, `width: auto` fills the card's content box
exactly; the `-1rem` side margins then extend it precisely
to the card border on each side. An explicit `calc(100% +
2rem)` would over-extend (100% is the content box, already
inside the padding) and push the divider past the edge.
`box-sizing: border-box` keeps the 1rem padding inside that
width so the pills wrap instead of bleeding off-screen. */
box-sizing: border-box;
width: auto !important;
/* The base `.responsive-table td` rule clamps every cell to
`max-width: 100%` (= the card content box). The action cell
must break OUT past that to the card border, so the clamp
has to be lifted here or the divider stops short on the
right. */
max-width: none !important;
min-width: 0 !important;
margin: 0.625rem -1rem -0.875rem;
padding: 0.625rem 1rem;
border-top: 1px solid #f3f4f6;
/* When the pills wrap, `flex-start` keeps the wrapped row left
aligned and the rows packed — a lone wrapped pill hanging
off the right edge (from `flex-end`) looks unbalanced. */
justify-content: flex-start;
flex-wrap: wrap;
gap: 0.375rem;
white-space: normal;
}
.responsive-table td.table-actions-column::before,
.responsive-table td[data-label="Actions"]::before {
display: none;
}
/* Promote each `