From 021c0aafbcba62fbf1f34abea5b81e5eb2988aeb Mon Sep 17 00:00:00 2001
From: Karn <karn@customer.io>
Date: Thu, 8 Oct 2026 01:47:10 +0530
Subject: [PATCH] fix: keep marker previews above the icon row

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/preview-above-icons.md |  5 +++++
 src/styles/kino.css               |  4 +++-
 src/ui/scrubber.test.tsx          | 14 ++++++++++++++
 src/ui/scrubber.tsx               |  2 +-
 4 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/preview-above-icons.md

diff --git a/.changeset/preview-above-icons.md b/.changeset/preview-above-icons.md
new file mode 100644
index 0000000..7b5915d
--- /dev/null
+++ b/.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.
diff --git a/src/styles/kino.css b/src/styles/kino.css
index a436fae..26d521b 100644
--- a/src/styles/kino.css
+++ b/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). */
diff --git a/src/ui/scrubber.test.tsx b/src/ui/scrubber.test.tsx
index d78f93a..80db00b 100644
--- a/src/ui/scrubber.test.tsx
+++ b/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"))
diff --git a/src/ui/scrubber.tsx b/src/ui/scrubber.tsx
index f96859f..b2755c4 100644
--- a/src/ui/scrubber.tsx
+++ b/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(" ")