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

Adjust video card width for better display on smaller screens

Browse Source 
Update `netflix-grid.tsx` to set the `cardWidth` to 280px for non-mobile views and adjust the `className` for video elements to use `w-[280px]` for non-mobile breakpoints, ensuring consistent rendering.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 70557b10-8a46-4f62-9cec-2397b6c48e73
Replit-Commit-Checkpoint-Type: full_checkpoint
This commit is contained in:
sebastjanartic 2025-09-06 19:36:14 +00:00
parent 92e74abb6d
commit cedb7b45d8
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -230,7 +230,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
// Calculate card width with gap for precise scrolling
const containerWidth = scrollRef.current.clientWidth;
const isMobile = window.innerWidth < 768;
const cardWidth = isMobile ? containerWidth - 24 : 330; // 24px for mobile margins (3rem - 1.5rem each side)
const cardWidth = isMobile ? containerWidth - 24 : 280; // 24px for mobile margins
const gap = 12; // 3 * 0.25rem = 12px gap
const scrollAmount = cardWidth + gap;
@ -424,7 +424,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{category.videos.map((video, index) => (
<div
key={video.id}
className="flex-shrink-0 w-[calc(100vw-2.5rem)] sm:w-[330px] relative hover:z-50"
className="flex-shrink-0 w-[calc(100vw-1.5rem)] sm:w-[280px] relative hover:z-50"
style={{
scrollSnapAlign: window.innerWidth < 768 ? 'start' : 'none'
}}