From 928456649e8c46647a93c2c6e109b14b78b6a053 Mon Sep 17 00:00:00 2001
From: Agent <agent@lorentz.is>
Date: Thu, 13 Aug 2026 12:53:12 -0400
Subject: [PATCH] PR-C0: card-style no-video tiles with border and backdrop
 label

- Add border (border-line) to no-video tile outer div for card contrast
  against bg-surface panel (video-on tiles unchanged)
- Use bg-backdrop/80 for name label on no-video tiles for legibility
  (video-on tiles keep bg-surface/80)

Part of flotilla-j4k / coracle/flotilla#343
---
 src/app/components/VideoCallContent.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/components/VideoCallContent.svelte b/src/app/components/VideoCallContent.svelte
index c5db244b..f7761992 100644
--- a/src/app/components/VideoCallContent.svelte
+++ b/src/app/components/VideoCallContent.svelte
@@ -222,6 +222,7 @@
   <div
     class={cx(
       "relative isolate overflow-hidden rounded-2xl shadow-sm",
+      !tile.track && "border border-line border-solid",
       layout === "spotlight" && "min-h-0 flex-1",
       layout === "default" && "aspect-video w-full min-h-0",
       layout === "strip" && "aspect-video w-44 shrink-0",
@@ -248,7 +249,9 @@
       </div>
     {/if}
     <span
-      class="pointer-events-none absolute bottom-1 left-1 max-w-[calc(100%-0.5rem)] truncate rounded bg-surface/80 px-1.5 py-0.5 text-xs">
+      class="pointer-events-none absolute bottom-1 left-1 max-w-[calc(100%-0.5rem)] truncate rounded px-1.5 py-0.5 text-xs {tile.track
+        ? 'bg-surface/80'
+        : 'bg-backdrop/80'}">
       {labelFor(tile.liveKitIdentity, tile.source)}{tile.isLocal ? " (you)" : ""}
     </span>
     {#if videoTiles.length > 1}