Adjust spacing on mobile for category titles and video rows

Update netflix-grid.tsx to modify margin-bottom for category titles on mobile devices and adjust padding for video rows to ensure consistent spacing on smaller screens.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/OdlP8Wj
This commit is contained in:
sebastjanartic 2025-09-03 08:56:46 +00:00
parent a057b27607
commit 2a3d3afbb8

View File

@ -357,7 +357,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
className="relative" className="relative"
onMouseLeave={() => setClickedVideoId(null)} onMouseLeave={() => setClickedVideoId(null)}
> >
<h2 className="text-lg font-medium text-bunny-light mb-1 mx-2 leading-tight uppercase"> <h2 className="text-lg font-medium text-bunny-light mb-2 md:mb-1 mx-2 leading-tight uppercase">
{category.title} {category.title}
</h2> </h2>
<div className="relative overflow-hidden"> <div className="relative overflow-hidden">
@ -390,7 +390,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{/* Scrollable video row - in container */} {/* Scrollable video row - in container */}
<div <div
ref={scrollRef} ref={scrollRef}
className="flex gap-0 md:gap-3 overflow-x-auto scrollbar-hide py-4 px-3 md:px-2" className="flex gap-0 md:gap-3 overflow-x-auto scrollbar-hide py-2 md:py-4 px-3 md:px-2"
style={{ style={{
scrollbarWidth: 'none', scrollbarWidth: 'none',
msOverflowStyle: 'none', msOverflowStyle: 'none',