From 4b46ac1b64e558714704e63023c7c8836c5a4018 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 21:45:42 +0000
Subject: [PATCH] Adjust spacing for recommended videos to reduce visual
 clutter

Update the 'space-y' utility class from 'space-y-3' to 'space-y-2' and adjust padding from 'p-3' to 'p-2' in the VideoPage component to decrease the vertical spacing between recommended video items.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 051a65da-1176-4478-a61c-c662f2a15536
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/051a65da-1176-4478-a61c-c662f2a15536/9NQBiz8
---
 client/src/pages/VideoPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 9bbaf90..07ee55b 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -489,12 +489,12 @@ export default function VideoPage() {
           <div className="w-full lg:w-96">
             <h2 className="text-lg font-semibold text-bunny-light mb-4">Recommended Videos</h2>
             
-            <div className="space-y-3">
+            <div className="space-y-2">
               {recommendedVideos.slice(0, 10).map((video) => (
                 <div
                   key={video.id}
                   onClick={() => window.location.href = `/video/${video.id}`}
-                  className="flex gap-3 p-3 bg-bunny-gray/30 hover:bg-bunny-gray/50 rounded-lg cursor-pointer transition-colors"
+                  className="flex gap-3 p-2 bg-bunny-gray/30 hover:bg-bunny-gray/50 rounded-lg cursor-pointer transition-colors"
                 >
                   <div className="relative w-24 h-16 bg-gray-700 rounded overflow-hidden flex-shrink-0">
                     <img