From c6ffc67fddf0563426cdb7df7c9f33d64a7a1ff1 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Tue, 23 Dec 2025 08:53:52 -0800
Subject: [PATCH] style: Apply consistent bento styling to video embeds on show
 pages

---
 frontend/app/shows/[id]/page.tsx | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/frontend/app/shows/[id]/page.tsx b/frontend/app/shows/[id]/page.tsx
index 026f8d9..18637f0 100644
--- a/frontend/app/shows/[id]/page.tsx
+++ b/frontend/app/shows/[id]/page.tsx
@@ -138,22 +138,23 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ id:
                 </div>
             )}
 
-            {show.youtube_link && (
-                <Card>
-                    <CardHeader>
-                        <CardTitle className="flex items-center gap-2">
-                            <Youtube className="h-5 w-5 text-red-500" />
-                            Video
-                        </CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <YouTubeEmbed url={show.youtube_link} title={`${show.date?.split('T')[0]} - ${show.venue?.name}`} />
-                    </CardContent>
-                </Card>
-            )}
-
             <div className="grid gap-6 md:grid-cols-[2fr_1fr]">
                 <div className="flex flex-col gap-6">
+                    {/* Full Show Video */}
+                    {show.youtube_link && (
+                        <Card className="border-2 border-red-500/20 bg-gradient-to-br from-red-500/5 to-transparent">
+                            <CardHeader className="pb-2">
+                                <CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+                                    <Youtube className="h-4 w-4 text-red-500" />
+                                    Full Show Video
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <YouTubeEmbed url={show.youtube_link} title={`${show.date?.split('T')[0]} - ${show.venue?.name}`} />
+                            </CardContent>
+                        </Card>
+                    )}
+
                     <Card>
                         <CardHeader>
                             <CardTitle>Setlist</CardTitle>