From e9172e83e68dd935f28957914c188574b68996a8 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 23:26:37 +0000
Subject: [PATCH] Improve video display with responsive grid layout

Refactors the SimpleCarousel component to use a flex-wrap container, removing horizontal scroll buttons and implementing responsive styling for video posters based on screen size. Adds CSS for the new layout and adjusts the "Top 10" number overlay positioning.

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 | 75 ++++++-----------------
 client/src/index.css                      | 24 ++++++++
 2 files changed, 44 insertions(+), 55 deletions(-)

diff --git a/client/src/components/simple-carousel.tsx b/client/src/components/simple-carousel.tsx
index 8c1a567..b93d165 100644
--- a/client/src/components/simple-carousel.tsx
+++ b/client/src/components/simple-carousel.tsx
@@ -101,62 +101,27 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
         {category.title}
       </h2>
       
-      <div className="relative">
-        {/* Left scroll button */}
-        <button
-          onClick={() => scroll('left')}
-          onMouseEnter={() => startAutoScroll('left')}
-          onMouseLeave={stopAutoScroll}
-          className="absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-[100] bg-black/80 hover:bg-black/95 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-80 hover:!opacity-100"
-        >
-          <ChevronLeft className="w-6 h-6 text-white" />
-        </button>
-
-        {/* Right scroll button */}
-        <button
-          onClick={() => scroll('right')}
-          onMouseEnter={() => startAutoScroll('right')}
-          onMouseLeave={stopAutoScroll}
-          className="absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-[100] bg-black/80 hover:bg-black/95 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-80 hover:!opacity-100"
-        >
-          <ChevronRight className="w-6 h-6 text-white" />
-        </button>
-
-        {/* Scroll container */}
-        <div 
-          ref={scrollContainerRef}
-          className="overflow-x-auto pb-8"
-          style={{ 
-            scrollbarWidth: 'none', 
-            msOverflowStyle: 'none'
-          }}
-        >
-          <div className="flex space-x-4 w-max">
-            {/* Create many copies for infinite feel */}
-            {Array.from({ length: 20 }).map((_, copyIndex) => 
-              category.videos.map((video, videoIndex) => (
-                <div key={`${video.id}-${copyIndex}-${videoIndex}`} className="flex-shrink-0 w-48 md:w-80 relative individual-video-hover">
-                  {/* Top 10 Number overlay for first category */}
-                  {category.title.includes("Top 10") && (
-                    <div className="absolute top-1 left-1 z-30 text-white font-black text-3xl md:text-5xl drop-shadow-2xl pointer-events-none individual-video-hover:opacity-0 transition-opacity duration-300"
-                         style={{ 
-                           textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
-                           WebkitTextStroke: '2px rgba(0,0,0,0.8)',
-                           transform: 'none'
-                         }}>
-                      {videoIndex + 1}
-                    </div>
-                  )}
-                  <VideoCard
-                    video={video}
-                    onClick={onVideoClick}
-                    className="w-full hover:scale-105 transition-all duration-300 hover:shadow-2xl rounded-md overflow-hidden relative"
-                  />
-                </div>
-              ))
-            ).flat()}
+      {/* Container z flex wrap */}
+      <div className="container flex flex-wrap justify-center gap-2.5 p-2.5 md:flex-row flex-col items-center">
+        {category.videos.map((video, videoIndex) => (
+          <div key={video.id} className="relative">
+            {/* Top 10 Number overlay for first category */}
+            {category.title.includes("Top 10") && (
+              <div className="absolute top-1 left-1 z-30 text-white font-black text-xl md:text-2xl drop-shadow-2xl pointer-events-none"
+                   style={{ 
+                     textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
+                     WebkitTextStroke: '1px rgba(0,0,0,0.8)',
+                   }}>
+                {videoIndex + 1}
+              </div>
+            )}
+            <VideoCard
+              video={video}
+              onClick={onVideoClick}
+              className="poster w-[150px] md:w-[150px] sm:w-[120px] h-auto hover:scale-105 transition-all duration-300 hover:shadow-2xl rounded-md overflow-hidden relative"
+            />
           </div>
-        </div>
+        ))}
       </div>
     </div>
   );
diff --git a/client/src/index.css b/client/src/index.css
index a689e01..44ad051 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -401,6 +401,30 @@ input[data-testid*="search"]::placeholder {
   font-display: swap;
 }
 
+/* Container flex wrap styles */
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px; /* Razmik med slikami */
+  padding: 10px;
+}
+
+.poster {
+  width: 150px; /* Velikost slike */
+  height: auto; /* Ohranja razmerje */
+}
+
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column; /* Slike ena pod drugo */
+    align-items: center;
+  }
+  .poster {
+    width: 120px; /* Manjša velikost za mobilne naprave */
+  }
+}
+
 /* Hide picture-in-picture button on all video elements */
 video::-webkit-media-controls-picture-in-picture-button {
   display: none !important;