sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve video carousel display in pop-up windows

Browse Source 
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:
sebastjanartic 2025-08-29 18:01:21 +00:00
parent 8501ea9b5b
commit 5c0fef6df7
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/components/simple-carousel.tsx
View File

@ -96,12 +96,12 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
}, [category.videos.length]); }, [category.videos.length]);
return ( 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"> <h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">
{category.title} {category.title}
</h2> </h2>
<div className="relative"> <div className="relative overflow-visible">
{/* Left scroll button */} {/* Left scroll button */}
<button <button
onClick={() => scroll('left')} onClick={() => scroll('left')}
@ -125,13 +125,13 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
{/* Scroll container */} {/* Scroll container */}
<div <div
ref={scrollContainerRef} ref={scrollContainerRef}
className="overflow-x-auto" className="overflow-x-auto overflow-y-visible"
style={{ style={{
scrollbarWidth: 'none', scrollbarWidth: 'none',
msOverflowStyle: '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 */} {/* Create many copies for infinite feel */}
{Array.from({ length: 20 }).map((_, copyIndex) => {Array.from({ length: 20 }).map((_, copyIndex) =>
category.videos.map((video, videoIndex) => ( category.videos.map((video, videoIndex) => (