.pds-logs-table {
container-type: inline-size;
}
/* max-height (and, once decided, min-height) are set via the Table
component's own `maxHeight`/`minHeight` props instead of CSS here — see
the LogsTableDemo render below. */
.pds-logs-table .pds-table-wrapper__table-area {
overscroll-behavior: contain;
}
/* Selected/inspected status rows now keep their status color and get an
outline instead of the selected-blue background — that's built into
table.css on Table itself (`.pds-table__row--inspected`), so no pattern-
level override is needed here. See dashboard PR #6060. */
.pds-logs-table__footer {
align-items: center;
border-block-start: var(--pds-border-width-default) solid
var(--pds-color-border-default);
box-sizing: border-box;
color: var(--pds-color-foreground-default-secondary);
display: flex;
font-size: var(--pds-typography-size-s);
height: var(--table-footer-height);
justify-content: space-between;
padding-inline: var(--pds-spacing-m);
}
/* Table adds a box-shadow border to pds-table-wrapper__footer in panel context; suppress the duplicate */
.pds-table-wrapper--in-panel .pds-logs-table__footer {
border-block-start: none;
}
.pds-logs-table__footer-controls {
align-items: center;
display: flex;
gap: var(--pds-spacing-2xs);
}
/* Detail panel content layout */
.pds-logs-detail__section {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
}
.pds-logs-detail__section + hr {
border: none;
border-block-start: var(--pds-border-width-default) solid
var(--pds-color-border-default);
margin-block: var(--pds-spacing-m);
}
.pds-logs-detail__section + hr + .pds-logs-detail__section {
margin-block-start: 0;
}
.pds-logs-detail__label {
color: var(--pds-color-foreground-default);
font-size: var(--pds-typography-size-xs);
font-weight: var(--pds-typography-fw-semibold);
margin: 0;
margin-block-start: var(--pds-spacing-xl);
}
.pds-logs-detail__label:first-child {
margin-block-start: 0;
}
.pds-logs-detail__value {
font-size: var(--pds-typography-size-s);
margin: 0;
margin-block-start: var(--pds-spacing-3xs);
}
.pds-logs-detail__value--critical {
color: var(--pds-color-status-critical-foreground);
}
.pds-logs-detail__value--warning {
color: var(--pds-color-status-warning-foreground);
}
.pds-logs-detail__badge {
background-color: var(--pds-color-badge-critical-muted-background);
border-radius: var(--pds-border-radius-input);
color: var(--pds-color-badge-critical-muted-foreground);
display: inline-block;
font-size: var(--pds-typography-size-xs);
font-weight: var(--pds-typography-fw-medium);
padding: var(--pds-spacing-4xs) var(--pds-spacing-xs);
}
Logs table with divider
A recipe: the PDS Logs Table pattern (Table with hasPanel, status-colored rows and the inline detail panel) with a LabeledDivider as a row.
Extends a PDS componentOpen in Storybook