From e3a312afc9aee6996af7057febc3ab9f1374ac34 Mon Sep 17 00:00:00 2001
From: Agent <agent@lorentz.is>
Date: Mon, 17 Aug 2026 10:23:39 -0400
Subject: [PATCH] Fix rounded-corner shadow artifact on video tiles in a
 scroller

With exactly 2 video tiles, the layout branch flex-shrinks tiles to
exactly fill the scroll container (fractional heights, bottom tile
flush against the scroller's clip edge). In that configuration
Chromium's rounded-rect box-shadow fast path misrenders at fractional
pixel offsets: the corner shows a straight diagonal wedge instead of
a rounded crescent, and the bottom tile's bottom shadow band is
clipped entirely by the scroller's overflow. With 3+ tiles the grid
branch uses natural (non-fractional) 16:9 heights, so it doesn't hit
this.

filter: drop-shadow() renders the same offset shadow through a
different rasterization path that isn't susceptible to this, and
(as a side benefit) isn't clipped by scrollable overflow the way
box-shadow's ink overflow is.

- VideoCallContent.svelte: shadow-sm -> drop-shadow-sm on video tiles.
- base.css: add --drop-shadow/-sm/-lg tokens mirroring the --shadow-*
  scale, consumed by Tailwind's drop-shadow-* utilities.
- clay.css, navy.css: matching --drop-shadow-* overrides in both
  light and dark. flat.css needs no changes; it inherits base.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/app/components/VideoCallContent.svelte |  2 +-
 src/lib/components/base.css                | 13 +++++++++++++
 src/lib/components/clay.css                |  8 ++++++++
 src/lib/components/navy.css                |  8 ++++++++
 4 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte
index 40d46b5b..1321a36d 100644
--- a/src/app/components/VideoCallContent.svelte
+++ b/src/app/components/VideoCallContent.svelte
@@ -221,7 +221,7 @@
   {@const media = $mediaStateByIdentity(tile.liveKitIdentity)}
   <div
     class={cx(
-      "relative isolate overflow-hidden rounded-2xl shadow-sm border border-line",
+      "relative isolate overflow-hidden rounded-2xl drop-shadow-sm border border-line",
       layout === "spotlight" && "min-h-0 flex-1",
       layout === "default" && "aspect-video w-full min-h-0",
       layout === "strip" && "aspect-video w-44 shrink-0",
diff --git a/src/lib/components/base.css b/src/lib/components/base.css
index b5601321..6be4a4c5 100644
--- a/src/lib/components/base.css
+++ b/src/lib/components/base.css
@@ -43,6 +43,19 @@
   --shadow-inset: inset 0 -4px 0 rgba(0, 0, 0, 0.05);
   --shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
 
+  /* drop-shadow-* mirror of the shadow-* scale above, same raw values. Use
+     these (filter: drop-shadow, via the drop-shadow-* utilities) instead of
+     shadow-* on any element inside a scroll container (overflow-y/x: auto|
+     scroll): Chromium's box-shadow fast path misrenders rounded corners at
+     fractional pixel offsets there, producing a diagonal wedge instead of a
+     crescent. filter effects don't hit that path and also extend scrollable
+     overflow instead of being clipped by it. Tailwind v4 wraps this token
+     as drop-shadow(<value>) itself, so keep these as raw shadow lists, not
+     already wrapped in drop-shadow(). */
+  --drop-shadow: 6px 6px 0 color-mix(in srgb, var(--primary) 12%, transparent);
+  --drop-shadow-sm: 4px 4px 0 color-mix(in srgb, var(--primary) 10%, transparent);
+  --drop-shadow-lg: 8px 8px 0 color-mix(in srgb, var(--primary) 15%, transparent);
+
   --border-thin: 1px;
   --border-thick: 1px;
 
diff --git a/src/lib/components/clay.css b/src/lib/components/clay.css
index 6aad650e..0770be28 100644
--- a/src/lib/components/clay.css
+++ b/src/lib/components/clay.css
@@ -62,6 +62,10 @@
     --shadow-lg: 8px 8px 0 rgba(var(--shadow-color), 0.15);
     --shadow-inset: inset 0 -4px 0 rgba(0, 0, 0, 0.05);
     --shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
+
+    --drop-shadow-sm: 4px 4px 0 rgba(var(--shadow-color), 0.1);
+    --drop-shadow: 6px 6px 0 rgba(var(--shadow-color), 0.12);
+    --drop-shadow-lg: 8px 8px 0 rgba(var(--shadow-color), 0.15);
   }
 
   /* `.primary-nav` opts the primary nav into this dark palette unconditionally */
@@ -103,6 +107,10 @@
     --shadow-lg: 8px 8px 0 rgba(var(--shadow-color), 0.4);
     --shadow-inset: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
     --shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
+
+    --drop-shadow-sm: 4px 4px 0 rgba(var(--shadow-color), 0.3);
+    --drop-shadow: 6px 6px 0 rgba(var(--shadow-color), 0.35);
+    --drop-shadow-lg: 8px 8px 0 rgba(var(--shadow-color), 0.4);
   }
 
   .chat-editor .tiptap {
diff --git a/src/lib/components/navy.css b/src/lib/components/navy.css
index 380a83d1..94c7cd43 100644
--- a/src/lib/components/navy.css
+++ b/src/lib/components/navy.css
@@ -41,6 +41,10 @@
     --shadow-lg: 0 10px 30px rgba(var(--shadow-color), 0.12);
     --shadow-inset: inset 0 -4px 0 rgba(0, 0, 0, 0.05);
     --shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
+
+    --drop-shadow-sm: 0 1px 3px rgba(var(--shadow-color), 0.1);
+    --drop-shadow: 0 4px 12px rgba(var(--shadow-color), 0.1);
+    --drop-shadow-lg: 0 10px 30px rgba(var(--shadow-color), 0.12);
   }
 
   &[data-theme="dark"],
@@ -81,5 +85,9 @@
     --shadow-lg: 0 10px 30px rgba(var(--shadow-color), 0.5);
     --shadow-inset: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
     --shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
+
+    --drop-shadow-sm: 0 1px 3px rgba(var(--shadow-color), 0.35);
+    --drop-shadow: 0 4px 12px rgba(var(--shadow-color), 0.4);
+    --drop-shadow-lg: 0 10px 30px rgba(var(--shadow-color), 0.5);
   }
 }