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

Adjust video card sizes and improve scrolling behavior

Browse Source 
Updates video card widths from 220px to 200px, adjusts scroll calculations accordingly, and modifies the hover scale effect for video cards in NetflixGrid.

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
This commit is contained in:
sebastjanartic 2025-09-01 16:16:59 +00:00
parent e9214a398c
commit 0b6ca2c22f
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/netflix-grid.tsx
View File

@ -188,8 +188,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
const scroll = (direction: 'left' | 'right') => {
if (scrollRef.current) {
// Scroll exactly 4 cards (220px + 16px gap = 236px per card)
const cardWidth = 220 + 16; // card width + gap
// Scroll exactly 4 cards (200px + 16px gap = 216px per card)
const cardWidth = 200 + 16; // card width + gap
const scrollAmount = cardWidth * 4; // 4 cards at once
const currentScroll = scrollRef.current.scrollLeft;
@ -258,7 +258,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{category.videos.map((video, index) => (
<div
key={video.id}
className="flex-shrink-0 w-[220px] md:w-[220px] lg:w-[220px] xl:w-[220px] relative group hover:z-50"
className="flex-shrink-0 w-[200px] md:w-[200px] lg:w-[200px] xl:w-[200px] relative group hover:z-50"
onMouseEnter={() => setClickedVideoId(video.id)}
>
{/* Top 10 Number overlay for first category */}

2
client/src/index.css
View File

@ -226,7 +226,7 @@ input[data-testid*="search"]::placeholder {
/* Video card hover effects with gradients */
.video-card:hover {
transform: translateY(-2px) scale(1.05);
transform: translateY(-2px) scale(1.02);
transition: all 0.3s ease;
z-index: 1000;
position: relative;