From 735fd1a6ead15604ea63ef187d4d7ee4b625569d Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Tue, 23 Dec 2025 00:37:34 -0800
Subject: [PATCH] style: Move video into bento grid left column for better
 layout flow

---
 frontend/app/performances/[id]/page.tsx | 36 ++++++++++++-------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/frontend/app/performances/[id]/page.tsx b/frontend/app/performances/[id]/page.tsx
index 4f0d10e..08c91bc 100644
--- a/frontend/app/performances/[id]/page.tsx
+++ b/frontend/app/performances/[id]/page.tsx
@@ -142,26 +142,26 @@ export default async function PerformanceDetailPage({ params }: { params: Promis
                 </div>
             </div>
 
-            {/* Video Section - Show when performance has a video */}
-            {performance.youtube_link && (
-                <Card className="border-2 border-red-500/20 bg-gradient-to-br from-red-500/5 to-transparent max-w-3xl">
-                    <CardHeader>
-                        <CardTitle className="flex items-center gap-2">
-                            <Youtube className="h-5 w-5 text-red-500" />
-                            Video
-                        </CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <YouTubeEmbed
-                            url={performance.youtube_link}
-                            title={`${performance.song.title} - ${formattedDate}`}
-                        />
-                    </CardContent>
-                </Card>
-            )}
-
             <div className="grid gap-6 md:grid-cols-[1fr_300px]">
                 <div className="flex flex-col gap-6">
+                    {/* Video Section - Show when performance has a video */}
+                    {performance.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" />
+                                    Video
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <YouTubeEmbed
+                                    url={performance.youtube_link}
+                                    title={`${performance.song.title} - ${formattedDate}`}
+                                />
+                            </CardContent>
+                        </Card>
+                    )}
+
                     {/* Version Navigation - Prominent */}
                     <Card className="border-2">
                         <CardHeader className="pb-2">