🏡 index : quine-global-labs/mirror-cockpit-project-cockpit.git

/* SPDX-License-Identifier: LGPL-2.1-or-later */
@use "global-variables" as *;

.ct-table {
  &-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    > :only-child {
      flex: auto;
    }
  }

  &-heading {
    // Push buttons to the right by stretching the heading
    flex: auto;
    // Add a bit of minimum margin to the right of the heading
    margin-inline-end: var(--pf-t--global--spacer--md);
    // Set a minimum height of 3rem, so when buttons wrap, there's spacing
    min-block-size: var(--pf-t--global--spacer--2xl);
    // Make sure textual content is aligned to the center
    display: flex;
    align-items: center;
  }

  &-actions {
    > * {
      margin-block: var(--pf-t--global--spacer--xs);
      margin-inline: var(--pf-t--global--spacer--sm) 0;
    }

    > :first-child {
      margin-inline-start: 0;
    }
  }

  // https://github.com/patternfly/patternfly-react/issues/5379
  &-empty {
    [data-label] {
      display: revert;
    }

    [data-label]::before {
      display: none;
    }
  }

  // Don't wrap labels
  [data-label]::before {
    white-space: nowrap;
  }

  // Fix toggle button alignment
  .pf-v6-c-table__toggle {
    // Workaround: Chrome sometimes oddly expands the table,
    // unless a width is set. (This affects panels the most, but not only.)
    // As the width is smaller than the contents, and this is a table,
    // the cell will stay at the correct width.
    inline-size: 1px;
  }

  // Properly align actions on the end
  > tbody > tr > td:last-child > .btn-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  // Use PF4 style headings
  > thead th {
    font-size: var(--pf-t--global--font--size--sm);
  }
}

// Special handling for rows with errors
.pf-v6-c-table tbody tr:first-child.error {
  &, tbody.pf-m-expanded > & {
    background-color: var(--ct-color-list-critical-bg) !important; /* keep red background when expanded */
    border-block-start: 1px solid var(--ct-color-list-critical-border);
    border-block-end: 1px solid var(--ct-color-list-critical-border);
  }
}