From 480ce14aa82177d2929d341b2d5a3ea53bb38422 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 1 Sep 2025 15:48:25 +0000
Subject: [PATCH] Improve grid layout to prevent content overlap and ensure
 visibility

Adjust margins and overflow properties in the Netflix grid component to resolve issues where video cards partially hide under screen edges when selected.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 8e9f2b36-ec9c-4acc-b19b-5304fa9790c5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/8e9f2b36-ec9c-4acc-b19b-5304fa9790c5/fyyFszO
---
 client/src/components/netflix-grid.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index d8a7432..58a64fb 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -236,18 +236,18 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
 
   return (
     <div 
-      className="relative group"
+      className="relative group mb-8"
       onMouseLeave={() => setClickedVideoId(null)}
     >
       <h2 className="text-lg font-medium text-bunny-light mb-1 mx-2 leading-tight uppercase relative z-10">
         {category.title}
       </h2>
-      <div className="relative overflow-hidden">
+      <div className="relative overflow-visible py-4">
 
         {/* Scrollable video row - true edge to edge */}
         <div
           ref={scrollRef}
-          className="flex gap-4 overflow-x-auto scrollbar-hide pb-0 pl-4 pr-4"
+          className="flex gap-4 overflow-x-auto scrollbar-hide pb-4 pl-4 pr-4"
           style={{ 
             maxWidth: '960px', 
             margin: '0 auto',