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

Adjust video card widths and container sizes for better display

Browse Source 
Update card width from 240px to 220px and max container width from 980px to 920px in netflix-grid.tsx and home.tsx to address overly wide and long cards.

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 15:42:51 +00:00
parent 273a721d65
commit 41aeda1539
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -188,8 +188,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
const scroll = (direction: 'left' | 'right') => { const scroll = (direction: 'left' | 'right') => {
if (scrollRef.current) { if (scrollRef.current) {
// Scroll exactly 4 cards (240px + 16px gap = 256px per card) // Scroll exactly 4 cards (220px + 16px gap = 236px per card)
const cardWidth = 240 + 16; // card width + gap const cardWidth = 220 + 16; // card width + gap
const scrollAmount = cardWidth * 4; // 4 cards at once const scrollAmount = cardWidth * 4; // 4 cards at once
const currentScroll = scrollRef.current.scrollLeft; const currentScroll = scrollRef.current.scrollLeft;
@ -249,7 +249,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
ref={scrollRef} ref={scrollRef}
className="flex gap-4 overflow-x-auto scrollbar-hide pb-0 pl-4 pr-4" className="flex gap-4 overflow-x-auto scrollbar-hide pb-0 pl-4 pr-4"
style={{ style={{
maxWidth: '980px', maxWidth: '920px',
margin: '0 auto', margin: '0 auto',
scrollbarWidth: 'none', scrollbarWidth: 'none',
msOverflowStyle: 'none' msOverflowStyle: 'none'
@ -258,7 +258,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{category.videos.map((video, index) => ( {category.videos.map((video, index) => (
<div <div
key={video.id} key={video.id}
className="flex-shrink-0 w-[240px] md:w-[240px] lg:w-[240px] xl:w-[240px] relative group hover:z-30" className="flex-shrink-0 w-[220px] md:w-[220px] lg:w-[220px] xl:w-[220px] relative group hover:z-30"
onMouseEnter={() => setClickedVideoId(video.id)} onMouseEnter={() => setClickedVideoId(video.id)}
> >
{/* Top 10 Number overlay for first category */} {/* Top 10 Number overlay for first category */}

2
client/src/pages/home.tsx
View File

@ -77,7 +77,7 @@ export default function Home() {
<div className="has-fixed-header" style={{minHeight: '100vh', background: 'linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%)', color: 'white'}}> <div className="has-fixed-header" style={{minHeight: '100vh', background: 'linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%)', color: 'white'}}>
{/* STICKY HEADER */} {/* STICKY HEADER */}
<div className="header-sticky bg-transparent overflow-hidden"> <div className="header-sticky bg-transparent overflow-hidden">
<div className="max-w-[980px] mx-auto pl-4 pr-4 py-4"> <div className="max-w-[920px] mx-auto pl-4 pr-4 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{/* Left side - Logo */} {/* Left side - Logo */}
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">