.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; }