s. Where
the value element is the flex box above, every one of those is a flex item —
the
included, an empty item that spent one of the box's two lines on
nothing and pushed the secondary out of the box, unseen. A flex column
already stacks what it holds; the
has nothing left to say there.
Only there, though: nested inside .ag-cell-wrapper the value stays an
ordinary block with inline content, and in that shape the
*is* the line
break. Hence the child combinator — the compact block below hides it in both
shapes, because compact has no second line to break to. */
.qc-grid__grid .ag-cell.ag-cell-auto-height > .ag-cell-value > br { display: none; }
/* Same vertical centering the cell itself uses, one level down: the content
element is taller than a single line, so without it a short value would ride
the top. `safe` keeps the first line reachable once the content scrolls —
plain centering pushes it above the scroll origin, out of reach.
Horizontally the pieces sit where the cell's own alignment puts them, and
text-align carries the same choice into wrapped text. */
.qc-grid__grid .ag-cell.ag-cell-auto-height > .ag-cell-value {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
align-items: safe center;
justify-content: flex-start;
gap: .4em;
}
.qc-grid__grid .ag-cell.qc-al-end.ag-cell-auto-height > .ag-cell-value,
.qc-grid__grid .ag-cell.ag-right-aligned-cell.ag-cell-auto-height > .ag-cell-value {
justify-content: flex-end;
}
.qc-grid__grid .ag-cell.qc-al-center.ag-cell-auto-height > .ag-cell-value {
justify-content: center;
}
/* ---- Compact: one line, and everything the cell holds is on it ----
A compact cell is a single line, so nothing in it may wrap. Scoping that to
.ag-cell-wrap-text was not enough: the class only says what the column asked
for, and a value carries markup of its own — a
, a , whatever a
renderer or a summary built on the server put there — which the rule never
reached. What was meant to be one line came out as two, and the second was
cut by the box. Every element inside the cell, then, not just the two the
column happens to own. */
[data-qc-density="compact"] .qc-grid__grid .ag-cell,
[data-qc-density="compact"] .qc-grid__grid .ag-cell * {
white-space: nowrap;
}
[data-qc-density="compact"] .qc-grid__grid .ag-cell.ag-cell-wrap-text {
overflow: hidden;
}
/* The pieces lie along the line rather than stacking: the customer and the
address, the label and the code, the readings of a GPS cell. Wherever the
value sits — its own box, or nested in the wrapper the selection column adds
— it is the flex row here, so both shapes read as one line and the
between the pieces goes away in both.
Every cell, not only the auto-height ones. The rules above this block are
scoped to .ag-cell-auto-height because they exist to *measure* the row, and
only an auto-height cell is measured. That scope was carried down here by
habit, and it was wrong: a cell AG Grid sizes itself is still a cell showing
two facts, and on the works list it was the one showing them stacked with the
second sliced in half along its bottom edge. What a column asked for decides
who reports the row height; it does not decide whether a compact cell is one
line. The two exceptions are cells that are not lines at all: the phone card
and the action buttons, each of which lays itself out.
What a column expressed as align-items a row expresses as justify-content,
and there is nothing to say: the value box is only as wide as its content,
so the cell has already placed it left, right or centre. Vertical centring
becomes align-items, keeping the `safe` guard for the reason it had it
before. */
[data-qc-density="compact"] .qc-grid__grid .ag-cell:not(.qc-cardcell, .qc-actions-cell) .ag-cell-value,
[data-qc-density="compact"] .qc-grid__grid .ag-cell:not(.qc-cardcell, .qc-actions-cell) .ag-cell-value > * {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
align-items: safe center;
/* Restated, not inherited: the column form above says `safe center` on this
same property, and along a row that would centre the pieces horizontally —
and, once the value overflows, park the scroll at the middle of itself. */
justify-content: flex-start;
gap: .4em;
}
/* ---- One level down, because that is where the pieces are ----
A cellRenderer that returns a string does not have its markup put into
.ag-cell-value: AG Grid wraps it in a of its own first, so the real
shape is
.ag-cell-value > span > (,
, )
and every rule written against the value's own children was landing on that
one anonymous span. The value became a flex row of a single item, the item
stayed a block, and the two lines went on stacking inside it — visibly, on
every column that shows two facts, in every list in the app.
So the row is laid on the value *and* on whatever it holds, and the
is
hidden wherever it sits rather than only where it happened to be a child.
The gap does the separating either way: hidden, the pieces on both sides of
the
become adjacent flex items and the gap falls between them — which
also covers the renderers whose second piece is bare text with no element to
hang a margin on (a date over its hours). */
[data-qc-density="compact"] .qc-grid__grid .ag-cell:not(.qc-cardcell, .qc-actions-cell) .ag-cell-value br {
display: none;
}
/* ---- The second piece that does not come along ----
Laying the two lines side by side works while the second piece belongs to the
first — a code beside its label, an hour beside its date. Where it is only
context, though (the address under a customer's name), the line it makes is
twice as long as the fact anybody scans the column for, and the name is what
gets squeezed. Such a column says so itself: `compactHidesSecondary` on the
twoLine renderer marks its and the compact density drops it. The
element is still rendered, so the quick search matches it either way, and the
address has a column of its own for whoever wants to see it here.
The element selector is not decoration: the flex rules above land on every
child of the value with five classes of specificity, and this has to outrank
them wherever the piece sits — directly under the value, or inside the span
AG Grid wraps a string renderer's markup in. */
[data-qc-density="compact"] .qc-grid__grid .ag-cell .ag-cell-value small.qc-cell__aside {
display: none;
}
/* ---- A pill at the column's edge (twoLine's `stateAtEnd`) ----
The value box is as wide as its content, so the pill would sit wherever the
name happened to end. The cell spans its column first (`qc-cell--ends`, put
on the cell by the renderer), then the name and its line take what is left
and end in an ellipsis, and the pill keeps its width at the right edge — the
same column of marks down every row that has one. */
/* The value is either the cell itself (a cell with no wrapper) or a child of it,
and AG Grid puts a string renderer's markup in a of its own. */
.qc-grid__grid .ag-cell.qc-cell--ends > .ag-cell-value,
.qc-grid__grid .ag-cell.qc-cell--ends > span,
.qc-grid__grid .ag-cell.qc-cell--ends > .ag-cell-value > span { flex: 1 1 auto; width: 100%; min-width: 0; }
/* That fills the row's height; the name is centred inside it. */
.qc-grid__grid .ag-cell.qc-cell--ends > span,
.qc-grid__grid .ag-cell.qc-cell--ends > .ag-cell-value > span { display: flex; align-items: center; }
.qc-grid__grid .ag-cell.qc-cell--ends .qc-cell__ends {
display: flex;
flex: 1 1 auto;
align-items: center;
gap: .6rem;
width: 100%;
min-width: 0;
}
.qc-grid__grid .ag-cell.qc-cell--ends .qc-cell__ends-text {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
}
.qc-grid__grid .ag-cell.qc-cell--ends .qc-cell__ends-text > * {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* A name with no second line stays centred in the row. */
.qc-grid__grid .ag-cell.qc-cell--ends .qc-cell__ends-text > small:empty { display: none; }
.qc-grid__grid .ag-cell.qc-cell--ends .qc-cell__ends > .qc-stpill { flex: none; margin-left: auto; }
/* Compact lays the two lines side by side, as everywhere else. */
[data-qc-density="compact"] .qc-grid__grid .ag-cell.qc-cell--ends .qc-cell__ends-text { flex-direction: row; gap: .4em; }
/* The gap is the row's; the margins the utility classes bring (`.mt-1` on a GPS
line) were written for a stack and here only tilt the line off centre. */
[data-qc-density="compact"] .qc-grid__grid .ag-cell:not(.qc-cardcell, .qc-actions-cell) .ag-cell-value > * {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* A renderer that builds a little layout of its own stacks it, and the rule
above only reaches the pieces the value element holds directly. The notes
preview is the one that does: a column of preview text over a "show all"
button, both of which fell outside a one-line box. Its own rules live in a
page