Merge branch 'j4k-card-style-no-video-tiles' of ssh://forgejo.lorentz.is:4201/matt/flotilla into j4k-card-style-no-video-tiles

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",

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;
 

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 {

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);
   }
 }