From aaa9d0145e954572f176be26aaee93563e25de65 Mon Sep 17 00:00:00 2001
From: Mattias Tall <mattias.tall@ucr.uu.se>
Date: Tue, 26 May 2026 12:03:56 +0200
Subject: [PATCH] Fix description text clipping in video cards

Card wrapper overflow-hidden was clipping description text at the card
boundary. Move overflow-hidden + rounding to the thumbnail only so the
card body text has room to render fully.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/VideoCard.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/VideoCard.jsx b/frontend/src/components/VideoCard.jsx
index 4e3f268..e1b394b 100644
--- a/frontend/src/components/VideoCard.jsx
+++ b/frontend/src/components/VideoCard.jsx
@@ -321,7 +321,7 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
     <div
       onClick={() => navigate(`/watch/${video.youtube_video_id}`)}
       className={clsx(
-        "group relative flex flex-col cursor-pointer rounded-2xl overflow-hidden",
+        "group relative flex flex-col cursor-pointer rounded-2xl",
         "bg-zinc-900 hover:bg-zinc-800/80 transition-colors duration-150",
         size === "sm" && "text-xs",
       )}
@@ -332,7 +332,7 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
         duration={duration}
         calmMode={calmMode}
         onDismiss={() => dismissMut.mutate()}
-        className="aspect-video"
+        className="aspect-video rounded-t-2xl overflow-hidden"
       />
 
       <div className="flex gap-2.5 p-3 flex-1">