From 7eee36fc504857a274ad35238dcbdb944fee9865 Mon Sep 17 00:00:00 2001
From: kuekhaoyang <kuekhaoyang@Gmail.com>
Date: Wed, 19 Nov 2025 12:25:17 +0800
Subject: [PATCH] feat: Refactor Badge and VideoCard components for improved
 styling and layout consistency

---
 components/search/VideoGrid.tsx | 8 +++-----
 components/ui/Badge.tsx         | 4 ++--
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/components/search/VideoGrid.tsx b/components/search/VideoGrid.tsx
index 900c05f..e6673f7 100644
--- a/components/search/VideoGrid.tsx
+++ b/components/search/VideoGrid.tsx
@@ -102,19 +102,17 @@ const VideoCard = memo(({
             </div>
           
             {/* Badge Container - Top, spans full width with proper spacing */}
-            <div className="absolute top-2 left-2 right-2 z-10 flex items-start justify-between gap-1">
+            <div className="absolute top-2 left-2 right-2 z-10 flex items-center justify-between gap-1">
               {/* Source Badge - Left */}
               {video.sourceName && (
-                <Badge variant="primary" className="text-[10px] px-1.5 py-0.5 bg-[var(--accent-color)] flex-shrink-0 max-w-[50%] truncate">
+                <Badge variant="primary" className="bg-[var(--accent-color)] flex-shrink-0 max-w-[50%] truncate">
                   {video.sourceName}
                 </Badge>
               )}
               
               {/* Latency Badge - Right */}
               {video.latency !== undefined && (
-                <div className="flex-shrink-0">
-                  <LatencyBadge latency={video.latency} className="text-[10px] px-1.5 py-0.5" />
-                </div>
+                <LatencyBadge latency={video.latency} className="flex-shrink-0" />
               )}
             </div>
           
diff --git a/components/ui/Badge.tsx b/components/ui/Badge.tsx
index c198ee6..7f567d4 100644
--- a/components/ui/Badge.tsx
+++ b/components/ui/Badge.tsx
@@ -40,9 +40,9 @@ const BadgeComponent = memo(function Badge({
     <span 
       className={`
         inline-flex items-center justify-center
-        px-2 py-0.5 md:px-3 md:py-1
+        px-1.5 py-0.5
         rounded-[var(--radius-full)]
-        text-[10px] md:text-xs font-semibold
+        text-[10px] font-semibold
         ${variants[variant]}
         ${className}
       `}