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

Adjust video card display and container width for better content visibility

Browse Source 
Updates the maximum width of the main content container and the width of individual video cards in the Netflix grid component to improve layout and display of multiple items.

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:25:58 +00:00
parent 7969211351
commit 1839100f6d
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -249,7 +249,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
ref={scrollRef}
className="flex gap-3 overflow-x-auto scrollbar-hide pb-0 pl-4 pr-4"
style={{
maxWidth: '1300px',
maxWidth: '1100px',
margin: '0 auto',
scrollbarWidth: 'none',
msOverflowStyle: 'none'
@ -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-[300px] md:w-[300px] lg:w-[300px] xl:w-[300px] relative group hover:z-30"
className="flex-shrink-0 w-[260px] md:w-[260px] lg:w-[260px] xl:w-[260px] relative group hover:z-30"
onMouseEnter={() => setClickedVideoId(video.id)}
>
{/* 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'}}>
{/* STICKY HEADER */}
<div className="header-sticky bg-transparent overflow-hidden">
<div className="max-w-[1200px] mx-auto pl-4 pr-4 py-4">
<div className="max-w-[1100px] mx-auto pl-4 pr-4 py-4">
<div className="flex items-center justify-between">
{/* Left side - Logo */}
<div className="flex items-center space-x-4">