/*
 * Lets a wide table scroll sideways inside the page instead of widening it.
 * Cells keep to one line, so a narrow screen scrolls the table rather than
 * breaking dates and names apart. The first column stays put, so the row is
 * never lost.
 */
@layer components {
  .table-scroll {
    overflow-x: auto;

    & :is(th, td) {
      white-space: nowrap;
    }

    & :is(th, td):first-child {
      position: sticky;
      inset-inline-start: 0;
    }
  }
}