matt/flotilla
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Drop tile shadow instead of switching to drop-shadow-sm

Browse source 
drop-shadow-sm (previous commit) didn't fix the corner artifact in
testing, so revert to the simplest option instead of chasing which
rasterization path is actually at fault: video tiles just don't get
an offset shadow. Border stays.

Reverts the --drop-shadow-* token additions in base.css/clay.css/
navy.css from the previous commit since nothing else used them.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Agent 2026-08-17 10:34:45 -04:00
parent 17cd72ee0d
commit 20d34209f8
4 changed files with 1 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/components/VideoCallContent.svelte
View file

@ -221,7 +221,7 @@
{@const media = $mediaStateByIdentity(tile.liveKitIdentity)}
<div
class={cx(
"relative isolate overflow-hidden rounded-2xl drop-shadow-sm border border-line",
"relative isolate overflow-hidden rounded-2xl 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",

13
src/lib/components/base.css
View file

@ -43,19 +43,6 @@
--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;

8
src/lib/components/clay.css
View file

@ -62,10 +62,6 @@
--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 */
@ -107,10 +103,6 @@
--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 {

8
src/lib/components/navy.css
View file

@ -41,10 +41,6 @@
--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"],
@ -85,9 +81,5 @@
--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);
}
}