From 4808d4726f9d336dc60b2238b89230f75d5d943b Mon Sep 17 00:00:00 2001
From: Niek Nijland <ngnijland@gmail.com>
Date: Sun, 4 Oct 2026 18:11:37 +0300
Subject: [PATCH] Homepage: restyle the highlights gallery after Apple's

- Slides drop their border and use the surface grey of the other cards.
  The caption sits at the top of the card, on a blurred copy of the media
  that fills it, and the media fits below with rounded corners.
- The page indicator is a grey pill of dots; the current slide's dot
  stretches into a bar that fills while autoplay shows it.
- The previous and next arrows are gone. The play/pause button stays, as
  WCAG 2.2.2 requires, as a round grey button beside the dots.
- The current slide follows the scroll as soon as it passes halfway,
  rather than once the track settles. As slides scroll, their media dims,
  shrinks and lags behind, and the backdrop swells and drifts further.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 docs/src/components/home/MediaBackdrop.astro  |  10 +-
 .../home/presentations/AutoplayControl.astro  |   9 +-
 .../home/presentations/Gallery.astro          | 210 +++++++++---------
 .../components/home/presentations/Tabs.astro  |   2 +-
 docs/src/lib/utils/autoplay.ts                |   5 +-
 docs/src/lib/utils/presentationIndex.ts       |  29 ++-
 docs/tests/build-output.test.js               |   4 +-
 docs/tests/presentation-index.test.js         |  44 ++--
 8 files changed, 164 insertions(+), 149 deletions(-)

diff --git a/docs/src/components/home/MediaBackdrop.astro b/docs/src/components/home/MediaBackdrop.astro
index cb877e56..0d3e1525 100644
--- a/docs/src/components/home/MediaBackdrop.astro
+++ b/docs/src/components/home/MediaBackdrop.astro
@@ -5,9 +5,12 @@ import type { HomepageMedia } from "@/lib/homepageItems";
 
 interface Props {
   media: HomepageMedia;
+  // Fills the whole frame instead of matching the media's own shape, for
+  // frames that hold more than the media, such as a caption.
+  cover?: boolean;
 }
 
-const { media } = Astro.props;
+const { media, cover = false } = Astro.props;
 
 // A small copy is enough once it's blurred. Videos use their poster, which
 // the page loads anyway.
@@ -27,5 +30,8 @@ const src =
   aria-hidden="true"
   loading="lazy"
   decoding="async"
-  class="pointer-events-none absolute inset-0 size-full scale-110 object-contain opacity-40 blur-3xl"
+  class:list={[
+    "pointer-events-none absolute inset-0 size-full scale-110 opacity-40 blur-3xl",
+    cover ? "object-cover" : "object-contain",
+  ]}
 />
diff --git a/docs/src/components/home/presentations/AutoplayControl.astro b/docs/src/components/home/presentations/AutoplayControl.astro
index b86869d1..0a9750fd 100644
--- a/docs/src/components/home/presentations/AutoplayControl.astro
+++ b/docs/src/components/home/presentations/AutoplayControl.astro
@@ -2,10 +2,12 @@
 interface Props {
   // What the button plays, for its label: "Pause Network features".
   name: string;
+  // Round, borderless and grey, to sit beside the gallery's dot pill.
+  round?: boolean;
   class?: string;
 }
 
-const { name, class: className } = Astro.props;
+const { name, round = false, class: className } = Astro.props;
 ---
 
 <!-- Pauses, plays and replays the presentation's autoplay
@@ -18,7 +20,10 @@ const { name, class: className } = Astro.props;
   data-autoplay-status="playing"
   aria-label={`Pause ${name}`}
   class:list={[
-    "group grid size-9 flex-none cursor-pointer place-items-center rounded-lg border border-border bg-card text-text-dark transition-colors hover:border-primary hover:bg-primary/8",
+    "group grid size-9 flex-none cursor-pointer place-items-center text-text-dark transition-colors",
+    round
+      ? "rounded-full bg-surface hover:bg-surface-hover"
+      : "rounded-lg border border-border bg-card hover:border-primary hover:bg-primary/8",
     className,
   ]}
 >
diff --git a/docs/src/components/home/presentations/Gallery.astro b/docs/src/components/home/presentations/Gallery.astro
index ac65d4b2..c5691c2e 100644
--- a/docs/src/components/home/presentations/Gallery.astro
+++ b/docs/src/components/home/presentations/Gallery.astro
@@ -14,8 +14,6 @@ interface Props {
 }
 
 const { id, chapterName, items } = Astro.props;
-const arrowButtonClass =
-  "grid size-9 flex-none cursor-pointer place-items-center rounded-lg border border-border bg-card text-caption text-text-dark transition-colors hover:border-primary hover:bg-primary/8 disabled:cursor-default disabled:border-border disabled:bg-card disabled:opacity-35";
 ---
 
 <!-- Full-bleed track; `--edge` lines the first slide up with the chapter text. -->
@@ -40,41 +38,55 @@ const arrowButtonClass =
           aria-roledescription="slide"
           aria-label={`${index + 1} of ${items.length}`}
           data-current={index === 0 ? "" : undefined}
-          class="group flex max-w-full shrink-0 basis-[min(880px,84vw)] snap-start flex-col overflow-hidden rounded-lg border border-border bg-card transition-colors duration-500 ease-smooth motion-reduce:transition-none data-current:border-[color-mix(in_srgb,var(--chapter)_45%,var(--color-border))]"
+          style={`--slide-offset: ${Math.min(index, 1)}; --slide-distance: ${Math.min(index, 1)}`}
+          class="group relative flex aspect-square max-w-full shrink-0 basis-[min(880px,84vw)] snap-start flex-col overflow-hidden rounded-lg bg-surface sm:aspect-[3/2]"
         >
-          {/* The frame has a fixed shape so every slide lines up, and the
-              media letterboxes inside it rather than cropping. 4:3 on phones
-              splits the difference between the landscape and square media;
-              16:9 from sm fits most of it exactly. Neighbouring slides dim
-              their media only, so their captions stay readable. */}
-          <div class="relative aspect-[4/3] overflow-hidden border-b border-border bg-surface opacity-50 transition-opacity duration-500 ease-smooth group-data-current:opacity-100 motion-reduce:transition-none sm:aspect-video">
-            <MediaBackdrop media={item.media} />
-            <Media
-              media={item.media}
-              sizes="(min-width: 1048px) 880px, 84vw"
-              class="absolute inset-0 size-full object-contain"
-            />
+          {/* The card has a fixed shape so every slide lines up. A blurred
+              copy of the media fills it, so the caption sits on the media's
+              own colours, and the media letterboxes under the caption rather
+              than cropping. As a slide scrolls away from its resting place
+              (`--slide-offset`, set by the script below), its media dims,
+              shrinks and lags behind, and the backdrop swells and drifts
+              further; the captions stay readable. */}
+          <div class="absolute inset-0 opacity-[calc(1_-_var(--slide-distance)*0.5)] motion-safe:translate-x-[calc(var(--slide-offset)*-10%)] motion-safe:scale-[calc(1_+_var(--slide-distance)*0.2)]">
+            <MediaBackdrop media={item.media} cover />
           </div>
-          <p class="px-4 pt-3.5 pb-4 text-small text-muted sm:px-[22px] sm:pt-[18px] sm:pb-5">
-            <b class="mb-0.5 block text-copy text-muted transition-colors duration-500 ease-smooth group-data-current:text-text-dark motion-reduce:transition-none">
-              {item.title}
-            </b>
+          <p class="relative max-w-[34ch] p-6 text-intro font-semibold text-muted sm:p-9 sm:text-title-4 md:text-title-3">
+            <span
+              data-gallery-title
+              class="text-muted transition-colors duration-300 ease-smooth group-data-current:text-text-dark motion-reduce:transition-none"
+            >
+              {item.title}.
+            </span>{" "}
             {item.description}
           </p>
+          {/* The media shrinks to fit rather than filling the space, so its
+              rounded corners sit on its own edges. A video has no size until
+              its poster loads, so it holds 16:9 until then. */}
+          <div class="relative min-h-0 flex-1 opacity-[calc(1_-_var(--slide-distance)*0.5)]">
+            <div class="absolute inset-0 flex items-center justify-center px-6 pb-6 sm:px-9 sm:pb-9">
+              <Media
+                media={item.media}
+                sizes="(min-width: 1048px) 880px, 84vw"
+                class="aspect-[auto_16/9] h-auto max-h-full w-auto max-w-full rounded-lg motion-safe:translate-x-[calc(var(--slide-offset)*-10%)] motion-safe:scale-[calc(1_-_var(--slide-distance)*0.1)]"
+              />
+            </div>
+          </div>
         </div>
       ))
     }
   </div>
 
-  <!-- The picker line draws itself and the buttons slide in as the controls
-       scroll in (src/styles/animations.css). -->
+  <!-- The picker dots draw themselves and the autoplay button slides in as
+       the controls scroll in (src/styles/animations.css). -->
   <div
     class="mt-[22px] flex items-center gap-2.5 px-(--edge)"
     data-draw-row
     style={`--draw-count: ${items.length}`}
   >
     <p class="sr-only" aria-live="polite" data-gallery-status></p>
-    <div class="mr-auto flex max-w-[420px] flex-1 items-center gap-1.5">
+    <!-- A pill of dots; the current slide's dot stretches into a bar. -->
+    <div class="flex h-9 items-center gap-3 rounded-full bg-surface px-4">
       {
         items.map((item, index) => (
           <button
@@ -85,62 +97,39 @@ const arrowButtonClass =
             aria-label={`Show highlight ${index + 1}: ${item.title}`}
             data-draw
             style={`--draw-index: ${index}`}
-            class="relative h-[3px] flex-1 cursor-pointer rounded-sm bg-border after:absolute after:inset-x-0 after:-inset-y-2.5 aria-[current=true]:bg-muted"
+            class="group/dot relative h-[8px] w-[8px] flex-none cursor-pointer rounded-full bg-muted transition-[width,background-color] duration-500 ease-smooth after:absolute after:-inset-x-1.5 after:-inset-y-3.5 hover:bg-text-soft aria-[current=true]:w-[48px] aria-[current=true]:cursor-default aria-[current=true]:bg-muted motion-reduce:transition-none"
           >
-            {/* Fills up while autoplay shows the slide. */}
-            <span
-              data-autoplay-fill
-              class="absolute inset-0 origin-left scale-x-0 rounded-[inherit] bg-primary"
-            />
+            {/* Fills up while autoplay shows the slide; it slides in rather
+                than stretching, so its leading edge stays round. */}
+            <span class="absolute inset-0 overflow-hidden rounded-[inherit]">
+              <span
+                data-autoplay-fill
+                class="absolute inset-0 translate-x-[calc(var(--autoplay-fill,0)*100%_-_100%)] rounded-[inherit] bg-text-dark opacity-0 group-aria-[current=true]/dot:opacity-100"
+              />
+            </span>
           </button>
         ))
       }
     </div>
-    <button
-      type="button"
-      data-gallery-prev
-      aria-controls={`${id}-track`}
-      aria-label="Previous highlight"
-      class={arrowButtonClass}
-      data-draw-control
-      disabled
-    >
-      ←
-    </button>
-    <AutoplayControl name={`${chapterName} highlights`} />
-    <button
-      type="button"
-      data-gallery-next
-      aria-controls={`${id}-track`}
-      aria-label="Next highlight"
-      class={arrowButtonClass}
-      data-draw-control
-    >
-      →
-    </button>
+    <AutoplayControl name={`${chapterName} highlights`} round />
   </div>
 </div>
 
 <script>
   import { createAutoplay } from "@/lib/utils/autoplay";
-  import { nearestIndex } from "@/lib/utils/presentationIndex";
-
-  // The pickers and arrows scroll the track to a slide. Swipes, trackpad
-  // scrolls and arrow keys on the focused track scroll it natively, and the
-  // current slide follows once the track settles. Autoplay moves through the
-  // slides and plays the current slide's video; neighbouring slides are on
-  // screen too, but their videos stay on their posters.
+  import { slidePosition } from "@/lib/utils/presentationIndex";
+
+  // The pickers scroll the track to a slide. Swipes, trackpad scrolls and
+  // arrow keys on the focused track scroll it natively, and the current slide
+  // follows as soon as the track passes halfway to the next one. Autoplay
+  // moves through the slides and plays the current slide's video;
+  // neighbouring slides are on screen too, but their videos stay on their
+  // posters.
   function initGalleries() {
     document
       .querySelectorAll<HTMLElement>('[data-presentation-root="gallery"]')
       .forEach((root) => {
         const track = root.querySelector<HTMLElement>("[data-gallery-track]");
-        const prev = root.querySelector<HTMLButtonElement>(
-          "[data-gallery-prev]",
-        );
-        const next = root.querySelector<HTMLButtonElement>(
-          "[data-gallery-next]",
-        );
         const control = root.querySelector<HTMLButtonElement>(
           "[data-autoplay-control]",
         );
@@ -153,18 +142,39 @@ const arrowButtonClass =
         const pickers = [
           ...root.querySelectorAll<HTMLButtonElement>("[data-gallery-picker]"),
         ];
-        if (!track || !prev || !next || !control || slides.length === 0) {
-          return;
-        }
+        if (!track || !control || slides.length === 0) return;
 
         let current = 0;
-        // Set while the track scrolls to a picked slide, so the scroll it
-        // causes doesn't pick another one.
+        // Set while the track scrolls to a picked slide, so the slides it
+        // passes on the way don't become current.
         let picked: number | undefined;
         let settle: number | undefined;
 
-        const starts = () =>
-          slides.map((slide) => slide.offsetLeft - slides[0].offsetLeft);
+        // Where the track rests for each slide; the last slides may stop
+        // short of their start.
+        const rests = () => {
+          const end = track.scrollWidth - track.clientWidth;
+          return slides.map((slide) =>
+            Math.min(slide.offsetLeft - slides[0].offsetLeft, end),
+          );
+        };
+        const position = () => slidePosition(rests(), track.scrollLeft);
+
+        // Tells each slide how far it is from its resting place, from -1
+        // (a slide to the left) to 1 (a slide to the right), for its scroll
+        // effects.
+        const follow = () => {
+          const at = position();
+          slides.forEach((slide, i) => {
+            const offset = Math.max(-1, Math.min(1, i - at));
+            slide.style.setProperty("--slide-offset", String(offset));
+            slide.style.setProperty(
+              "--slide-distance",
+              String(Math.abs(offset)),
+            );
+          });
+          return at;
+        };
 
         // Marks a slide current. Autoplay's own moves aren't announced, so a
         // screen reader isn't interrupted every few seconds.
@@ -177,21 +187,14 @@ const arrowButtonClass =
             picker.setAttribute("aria-current", String(i === index)),
           );
           if (status && announce) {
-            status.textContent = `Highlight ${index + 1} of ${slides.length}: ${slides[index].querySelector("b")?.textContent?.trim() ?? ""}`;
+            status.textContent = `Highlight ${index + 1} of ${slides.length}: ${slides[index].querySelector("[data-gallery-title]")?.textContent?.trim() ?? ""}`;
           }
-          prev.disabled = index === 0;
-          next.disabled = index === slides.length - 1;
         };
 
-        // Where the track scrolls to for a slide; the last slides may stop
-        // short of their start.
-        const scrollTarget = (index: number) =>
-          Math.min(starts()[index], track.scrollWidth - track.clientWidth);
-
         // Marks a slide current and scrolls the track to it.
         const goTo = (index: number, announce = true) => {
           mark(index, announce);
-          const left = scrollTarget(index);
+          const left = rests()[index];
           // Already there: no scroll follows to clear `picked`.
           if (Math.abs(track.scrollLeft - left) < 1) return;
           picked = index;
@@ -209,51 +212,42 @@ const arrowButtonClass =
           control,
           show: (index) => goTo(index, false),
         });
-        // The visitor picked a slide with a picker or an arrow.
-        const pickSlide = (index: number) => {
-          goTo(index);
+
+        // The visitor brought another slide in by scrolling.
+        const scrolledTo = (index: number) => {
+          if (index === current) return;
+          mark(index);
           autoplay.pick(index);
         };
 
         pickers.forEach((picker, index) =>
-          picker.addEventListener("click", () => pickSlide(index)),
-        );
-        prev.addEventListener("click", () =>
-          pickSlide(Math.max(0, current - 1)),
-        );
-        next.addEventListener("click", () =>
-          pickSlide(Math.min(slides.length - 1, current + 1)),
+          picker.addEventListener("click", () => {
+            goTo(index);
+            autoplay.pick(index);
+          }),
         );
 
         track.addEventListener(
           "scroll",
           () => {
+            // Scroll events come at most once a frame, so the effects can
+            // follow every one.
+            const at = follow();
+            if (picked === undefined) scrolledTo(Math.round(at));
+            // A swipe that interrupted the scroll to a picked slide picks by
+            // position once the track settles.
             window.clearTimeout(settle);
             settle = window.setTimeout(() => {
-              // A picked slide the track reached stays current, even if
-              // another slide's start is nearer. A swipe that interrupted the
-              // scroll to it picks by position instead.
-              const target =
-                picked === undefined ? undefined : scrollTarget(picked);
+              if (picked === undefined) return;
+              const reached = Math.abs(track.scrollLeft - rests()[picked]) < 2;
               picked = undefined;
-              if (
-                target !== undefined &&
-                Math.abs(track.scrollLeft - target) < 2
-              )
-                return;
-              const index = nearestIndex(
-                starts(),
-                track.scrollLeft,
-                track.scrollWidth - track.clientWidth,
-              );
-              if (index !== current) {
-                mark(index);
-                autoplay.pick(index);
-              }
+              if (!reached) scrolledTo(Math.round(position()));
             }, 120);
           },
           { passive: true },
         );
+
+        follow();
       });
   }
 
diff --git a/docs/src/components/home/presentations/Tabs.astro b/docs/src/components/home/presentations/Tabs.astro
index b2302d51..9f39ebf8 100644
--- a/docs/src/components/home/presentations/Tabs.astro
+++ b/docs/src/components/home/presentations/Tabs.astro
@@ -104,7 +104,7 @@ const { id, chapterName, items, aside } = Astro.props;
               >
                 <span
                   data-autoplay-fill
-                  class="absolute inset-0 origin-left scale-x-0 bg-primary"
+                  class="absolute inset-0 origin-left scale-x-[var(--autoplay-fill,0)] bg-primary"
                 />
               </span>
               <span
diff --git a/docs/src/lib/utils/autoplay.ts b/docs/src/lib/utils/autoplay.ts
index 4faed1a3..e3f73150 100644
--- a/docs/src/lib/utils/autoplay.ts
+++ b/docs/src/lib/utils/autoplay.ts
@@ -17,7 +17,8 @@ const IMAGE_MS = 5000;
 const MAX_FRAME_MS = 100;
 
 interface AutoplayItem {
-  // The fill of the item's progress bar.
+  // The fill of the item's progress bar. Autoplay sets its `--autoplay-fill`,
+  // from 0 to 1, and the presentation draws the fill from that.
   fill: HTMLElement | null;
   video: HTMLVideoElement | null;
 }
@@ -69,7 +70,7 @@ export function createAutoplay({
   const render = () => {
     progressFills(state, progress()).forEach((fill, index) => {
       const bar = items[index].fill;
-      if (bar) bar.style.scale = `${fill} 1`;
+      bar?.style.setProperty("--autoplay-fill", String(fill));
     });
   };
 
diff --git a/docs/src/lib/utils/presentationIndex.ts b/docs/src/lib/utils/presentationIndex.ts
index eb6c5f6f..dc5f8ec2 100644
--- a/docs/src/lib/utils/presentationIndex.ts
+++ b/docs/src/lib/utils/presentationIndex.ts
@@ -22,22 +22,19 @@ export function indexForKey(
   return step === undefined ? undefined : (current + step + count) % count;
 }
 
-// The slide whose start is closest to `position`, the track's scroll offset.
-// A track scrolled to `end` (its largest offset) settles on the last slide,
-// which on wide screens cannot scroll all the way to its start.
-export function nearestIndex(
-  starts: readonly number[],
-  position: number,
-  end = Infinity,
-) {
-  if (position >= end - 1) return starts.length - 1;
-  let nearest = 0;
-  starts.forEach((start, index) => {
-    if (Math.abs(start - position) < Math.abs(starts[nearest] - position)) {
-      nearest = index;
-    }
-  });
-  return nearest;
+// How many slides along a track is at `position`, its scroll offset: 2 when
+// it rests on the third slide, 2.5 halfway to the fourth. `rests` are the
+// offsets the track rests at for each slide, in order; on wide screens the
+// last slides rest at the track's end, short of their start. Round it for the
+// nearest slide.
+export function slidePosition(rests: readonly number[], position: number) {
+  if (position <= rests[0]) return 0;
+  for (let index = 0; index < rests.length - 1; index++) {
+    const from = rests[index];
+    const to = rests[index + 1];
+    if (position < to) return index + (position - from) / (to - from);
+  }
+  return rests.length - 1;
 }
 
 interface ScrollRow {
diff --git a/docs/tests/build-output.test.js b/docs/tests/build-output.test.js
index e9d0c0bc..89632a08 100644
--- a/docs/tests/build-output.test.js
+++ b/docs/tests/build-output.test.js
@@ -380,10 +380,8 @@ test("homepage galleries follow the ARIA carousel pattern", () => {
       slides.map((_, index) => index === 0),
       `${id}: first slide current`,
     );
-    // The visual counter is aria-hidden; slide changes are announced here.
+    // Slide changes are announced here.
     assert.match(body, /<[^>]*aria-live="polite"[^>]*data-gallery-status/, id);
-    assert.match(body, /<button[^>]*aria-label="Previous highlight"/);
-    assert.match(body, /<button[^>]*aria-label="Next highlight"/);
   }
 });
 
diff --git a/docs/tests/presentation-index.test.js b/docs/tests/presentation-index.test.js
index 7736f9a6..f1da71b0 100644
--- a/docs/tests/presentation-index.test.js
+++ b/docs/tests/presentation-index.test.js
@@ -3,8 +3,8 @@ import assert from "node:assert/strict";
 
 import {
   indexForKey,
-  nearestIndex,
   scrollToReveal,
+  slidePosition,
 } from "../src/lib/utils/presentationIndex.ts";
 
 test("arrow keys along the orientation move to the neighbouring item", () => {
@@ -31,22 +31,36 @@ test("keys across the orientation, and other keys, do nothing", () => {
   assert.equal(indexForKey("Enter", 1, 4, "horizontal"), undefined);
 });
 
-test("a swipe settles on the slide whose start is closest to the scroll position", () => {
-  // Slide starts of a track with 900px slides and a 20px gap.
-  const starts = [0, 920, 1840, 2760];
-  assert.equal(nearestIndex(starts, 0), 0);
-  assert.equal(nearestIndex(starts, 400), 0);
-  assert.equal(nearestIndex(starts, 500), 1);
-  assert.equal(nearestIndex(starts, 1900), 2);
-  // Scrolled past the last start, as the end of a track can be.
-  assert.equal(nearestIndex(starts, 3200), 3);
+test("the track's position counts slides, with fractions between them", () => {
+  // Where the track rests for each slide: 900px slides and a 20px gap.
+  const rests = [0, 920, 1840, 2760];
+  assert.equal(slidePosition(rests, 0), 0);
+  assert.equal(slidePosition(rests, 460), 0.5);
+  assert.equal(slidePosition(rests, 920), 1);
+  assert.equal(slidePosition(rests, 2070), 2.25);
+  assert.equal(slidePosition(rests, 2760), 3);
 });
 
-test("a track scrolled all the way to its end settles on the last slide", () => {
-  // On wide screens the last slides cannot scroll to their start.
-  const starts = [0, 920, 1840, 2760];
-  assert.equal(nearestIndex(starts, 2300, 2300), 3);
-  assert.equal(nearestIndex(starts, 1900, 2300), 2);
+test("the position stays within the first and last slide", () => {
+  // Overscroll past either end, as a trackpad bounce can report.
+  const rests = [0, 920, 1840, 2760];
+  assert.equal(slidePosition(rests, -40), 0);
+  assert.equal(slidePosition(rests, 3200), 3);
+});
+
+test("slides that rest short of their start still count as whole slides", () => {
+  // On wide screens the last slide cannot scroll to its start, so it rests at
+  // the end of the track, 2300 instead of 2760.
+  const rests = [0, 920, 1840, 2300];
+  assert.equal(slidePosition(rests, 2070), 2.5);
+  assert.equal(slidePosition(rests, 2300), 3);
+});
+
+test("a swipe settles on the nearest slide", () => {
+  const rests = [0, 920, 1840, 2760];
+  assert.equal(Math.round(slidePosition(rests, 400)), 0);
+  assert.equal(Math.round(slidePosition(rests, 500)), 1);
+  assert.equal(Math.round(slidePosition(rests, 1900)), 2);
 });
 
 test("a tab already inside the scrolling row needs no scroll", () => {