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

Adjust video card width for better mobile display

Browse Source 
Modify `netflix-grid.tsx` to adjust the width of video cards on mobile devices, specifically widening them by changing `w-[calc(100vw-1.5rem)]` to `w-[calc(100vw-4rem)]` and adding padding with `px-4`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 50f1ae50-8e22-495d-bb42-127d908a9bc5
Replit-Commit-Checkpoint-Type: full_checkpoint
This commit is contained in:
sebastjanartic 2025-09-04 20:39:50 +00:00
parent 44eae42e51
commit d777a26766
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

@ -410,7 +410,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-2 md:py-4 px-3 md:px-2" className="flex gap-2 md:gap-3 overflow-x-auto scrollbar-hide py-2 md:py-4 px-4 md:px-2"
style={{ style={{
scrollbarWidth: 'none', scrollbarWidth: 'none',
msOverflowStyle: 'none', msOverflowStyle: 'none',
@ -424,7 +424,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-[calc(100vw-1.5rem)] sm:w-[330px] relative hover:z-50" className="flex-shrink-0 w-[calc(100vw-4rem)] sm:w-[330px] relative hover:z-50"
style={{ style={{
scrollSnapAlign: window.innerWidth < 768 ? 'start' : 'none' scrollSnapAlign: window.innerWidth < 768 ? 'start' : 'none'
}} }}