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

Improve navigation button appearance and touch responsiveness on mobile devices

Browse Source 
Adjusted styling and sizing for previous/next video navigation buttons in VideoPage.tsx to enhance touch targets and ensure proper rendering on smaller screens, addressing reported mobile usability issues.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 344ec1e0-1186-4058-bbff-2e9619a7b1e0
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/344ec1e0-1186-4058-bbff-2e9619a7b1e0/FgaI1Sc
This commit is contained in:
sebastjanartic 2025-08-30 22:44:03 +00:00
parent 293bb47baf
commit c58677ab47
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756593798096.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

8
client/src/pages/VideoPage.tsx
View File

@ -383,19 +383,19 @@ export default function VideoPage() {
<>
<Button
onClick={() => navigateToVideo('prev')}
className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/60 hover:bg-black/80 text-white border-none p-2 rounded-full z-20"
className="absolute left-1 top-1/2 transform -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white border-none p-4 md:p-3 rounded-full z-20 shadow-lg touch-manipulation min-h-[48px] min-w-[48px] flex items-center justify-center"
size="sm"
data-testid="button-prev-video"
>
<ChevronLeft className="w-6 h-6" />
<ChevronLeft className="w-6 h-6 md:w-5 md:h-5" />
</Button>
<Button
onClick={() => navigateToVideo('next')}
className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/60 hover:bg-black/80 text-white border-none p-2 rounded-full z-20"
className="absolute right-1 top-1/2 transform -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white border-none p-4 md:p-3 rounded-full z-20 shadow-lg touch-manipulation min-h-[48px] min-w-[48px] flex items-center justify-center"
size="sm"
data-testid="button-next-video"
>
<ChevronRight className="w-6 h-6" />
<ChevronRight className="w-6 h-6 md:w-5 md:h-5" />
</Button>
</>
)}