fix: keep marker previews above the icon row

.changeset/preview-above-icons.md

@@ -0,0 +1,5 @@
+---
+"@karnstack/kino": patch
+---
+
+When the track has icon markers, every hover preview now sits above the icon row, so it never covers the icons.

src/styles/kino.css

@@ -353,8 +353,10 @@
   pointer-events: none;
   z-index: 2;
 }
+/* With icon markers on the track, every preview sits above the icon row,
+   so a preview never covers the icons. */
 .kino .kino-preview.kino-preview-above-icon {
-  bottom: calc(100% + 11px);
+  bottom: calc(100% + 20px);
 }
 /* A marker's own preview content: full size, left-aligned, wraps at 300px
    (or the scrubber width, if that is smaller). */

src/ui/scrubber.test.tsx

@@ -217,6 +217,20 @@ test("the preview rises above an icon marker but not a dot marker", () => {
   ).toBe(false)
 })
 
+test("with any icon marker on the track, a dot marker's preview also rises", () => {
+  withMarkers([
+    { id: "r", time: 20, icon: "🔥" },
+    { id: "a", time: 50 },
+  ])
+  stubRect(screen.getByTestId("kino-track"))
+  hoverMarker(screen.getAllByTestId("kino-marker")[1]!)
+  expect(
+    document
+      .querySelector(".kino-preview")!
+      .classList.contains("kino-preview-above-icon"),
+  ).toBe(true)
+})
+
 test("hovering a marker shows the marker's own time", () => {
   withMarkers([{ id: "a", time: 50, label: "x" }])
   stubRect(screen.getByTestId("kino-track"))

src/ui/scrubber.tsx

@@ -105,7 +105,7 @@ export function Scrubber() {
   const previewClass = [
     "kino-preview kino-glass",
     rich != null && "kino-preview-rich",
-    hoverMarker?.icon && "kino-preview-above-icon",
+    shown.some((m) => m.icon) && "kino-preview-above-icon",
   ]
     .filter(Boolean)
     .join(" ")