WindowList.module.css

.page {
  font-family: Inter, system-ui, sans-serif;
}

/* Sticky bar: the header carries its own padding and bottom border; this
   wrapper only pins it and paints the background while stuck. */
.stickyBar {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  height: var(--sticky-bar-height);
}

/* The bar covers the top of the scrollport, and for a window-scrolled list
   that scrollport is the document. `scroll-padding-top` is how the platform is
   told about it — `scrollIntoView` reads it, and so does the virtualizer's
   `scrollToItem`, so a row it jumps to lands below the bar rather than behind
   it. It has to sit on the scroll container itself, hence `:global` — scoped
   with `:has()` so it applies only while this demo is the one rendered, and
   not to the element-scrolling one that ships in the same bundle. */
:global(html):has(.stickyBar) {
  --sticky-bar-height: 67px;
  scroll-padding-top: var(--sticky-bar-height);
}