From 5c0fef6df7f276895d60235e1ab4471b0ef55d16 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 18:01:21 +0000
Subject: [PATCH] Improve video carousel display in pop-up windows

Update SimpleCarousel component to ensure videos are fully visible when in pop-up views, addressing z-index and overflow issues by setting overflow-visible on relevant containers and using overflow-y-visible on the scroll container.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/kdQ95gE
---
 client/src/components/simple-carousel.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/simple-carousel.tsx b/client/src/components/simple-carousel.tsx
index 928104c..b6662ff 100644
--- a/client/src/components/simple-carousel.tsx
+++ b/client/src/components/simple-carousel.tsx
@@ -96,12 +96,12 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
   }, [category.videos.length]);
 
   return (
-    <div className="relative group mb-8">
+    <div className="relative group mb-8 overflow-visible">
       <h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">
         {category.title}
       </h2>
       
-      <div className="relative">
+      <div className="relative overflow-visible">
         {/* Left scroll button */}
         <button
           onClick={() => scroll('left')}
@@ -125,13 +125,13 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
         {/* Scroll container */}
         <div 
           ref={scrollContainerRef}
-          className="overflow-x-auto"
+          className="overflow-x-auto overflow-y-visible"
           style={{ 
             scrollbarWidth: 'none', 
             msOverflowStyle: 'none'
           }}
         >
-          <div className="flex space-x-4 pb-4 w-max">
+          <div className="flex space-x-4 pb-4 w-max overflow-visible">
             {/* Create many copies for infinite feel */}
             {Array.from({ length: 20 }).map((_, copyIndex) => 
               category.videos.map((video, videoIndex) => (