ontime/apps/client/src/features/rundown/Rundown.module.scss

.rundownWrapper {
  height: calc(100% - 1.5rem);
  width: 100%;
}

.rundownContainer {
  padding-top: 1rem;
  flex: 1 1 auto;
  min-height: 0;

  :is([data-target='small-device']) & {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.list {
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  padding-inline: 1rem;

  :is([data-target='small-device']) & {
    padding-inline: 0;
    overflow-x: auto;
    min-width: max-content;
  }
}

.empty {
  opacity: 0.3;
  align-self: center;
}

.spacer {
  min-height: 50vh;
}

.entryWrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  background: color-mix(in srgb, transparent 90%, var(--user-bg, transparent) 10%);
}

.entryIndex {
  padding-block: 0.25rem;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;  
  justify-items: end;
  min-width: 2em;
  color: $label-gray;
  font-size: calc(1rem - 3px);
  height: 6.5rem;
}

.flag {
  grid-row: 1;
  color: $active-indicator;
  font-size: 1rem;
}

.index {
  grid-row: 2;
  align-content: center;
}

.entry {
  flex: 1;
}