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

Adjust spacing and text size for improved readability on mobile devices

Browse Source 
Reduce vertical spacing in the Netflix grid component and adjust font sizes in VideoCard for mobile responsiveness to address user feedback on small text and excessive spacing.

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/4DOsXkx
This commit is contained in:
sebastjanartic 2025-09-02 16:18:55 +00:00
parent 4ee92b9c9e
commit 5c61884e9c
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -145,9 +145,9 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
return (
<>
<div className="space-y-8">
<div className="space-y-4">
{categories.map((category, categoryIndex) => (
<div key={categoryIndex} className={`${categoryIndex === 0 ? 'mt-2 mb-6' : 'mb-6'}`}>
<div key={categoryIndex} className={`${categoryIndex === 0 ? 'mt-2 mb-3' : 'mb-3'}`}>
<CategoryRow
category={category}
onVideoClick={handleVideoClick}

4
client/src/components/video-card.tsx
View File

@ -294,10 +294,10 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
{!showPreview && !hideOverlay && !(isMobile && isVideoPage) && (
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10 flex items-end p-4 group-hover:from-black/95 transition-all duration-300">
<div className="w-full">
<h3 className="text-white font-extrabold text-xl leading-tight drop-shadow-2xl tracking-wide transform group-hover:scale-105 transition-transform duration-300 mb-1" style={{fontFamily: 'Poppins, Inter, sans-serif', textShadow: '2px 2px 8px rgba(0,0,0,0.8)'}}>
<h3 className={`text-white font-extrabold leading-tight drop-shadow-2xl tracking-wide transform group-hover:scale-105 transition-transform duration-300 mb-1 ${isMobile ? 'text-lg' : 'text-base'}`} style={{fontFamily: 'Poppins, Inter, sans-serif', textShadow: '2px 2px 8px rgba(0,0,0,0.8)'}}>
{video.title.split(' - ')[0] || 'go4.video'}
</h3>
<p className="text-white/85 text-sm font-medium drop-shadow-xl transform group-hover:scale-105 transition-transform duration-300" style={{fontFamily: 'Inter, sans-serif', textShadow: '1px 1px 4px rgba(0,0,0,0.8)'}}>
<p className={`text-white/85 font-medium drop-shadow-xl transform group-hover:scale-105 transition-transform duration-300 ${isMobile ? 'text-sm' : 'text-xs'}`} style={{fontFamily: 'Inter, sans-serif', textShadow: '1px 1px 4px rgba(0,0,0,0.8)'}}>
{video.title.split(' - ')[1] || video.title}
</p>
</div>