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
This commit is contained in:
parent
8501ea9b5b
commit
5c0fef6df7
@ -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) => (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user