diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 74e5a60..0d083e5 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -220,7 +220,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
setIsLeftButtonHovered(false);
stopAutoScroll();
}}
- className={`${isLeftButtonHovered ? 'flex' : 'hidden md:group-hover:flex'} absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg`}
+ className="flex absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-0 group-hover:opacity-100 hover:!opacity-100"
data-testid="button-scroll-left"
>
@@ -243,7 +243,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
setIsRightButtonHovered(false);
stopAutoScroll();
}}
- className={`${isRightButtonHovered ? 'flex' : 'hidden md:group-hover:flex'} absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg`}
+ className="flex absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-0 group-hover:opacity-100 hover:!opacity-100"
data-testid="button-scroll-right"
>
@@ -256,6 +256,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
e.stopPropagation();
scroll('left');
}}
+ onTouchStart={(e) => {
+ e.stopPropagation();
+ startAutoScroll('left');
+ }}
+ onTouchEnd={(e) => {
+ e.stopPropagation();
+ stopAutoScroll();
+ }}
className="md:hidden absolute left-1 top-[45%] -translate-y-1/2 w-10 h-10 z-40 bg-black/80 rounded-full flex items-center justify-center border border-white/30 shadow-lg"
data-testid="button-mobile-scroll-left"
>
@@ -267,6 +275,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
e.stopPropagation();
scroll('right');
}}
+ onTouchStart={(e) => {
+ e.stopPropagation();
+ startAutoScroll('right');
+ }}
+ onTouchEnd={(e) => {
+ e.stopPropagation();
+ stopAutoScroll();
+ }}
className="md:hidden absolute right-1 top-[45%] -translate-y-1/2 w-10 h-10 z-40 bg-black/80 rounded-full flex items-center justify-center border border-white/30 shadow-lg"
data-testid="button-mobile-scroll-right"
>
diff --git a/client/src/components/vast-player.tsx b/client/src/components/vast-player.tsx
index 7c37307..9370428 100644
--- a/client/src/components/vast-player.tsx
+++ b/client/src/components/vast-player.tsx
@@ -270,7 +270,7 @@ export default function VASTPlayer({ video, onClose, vastTagUrl, enableAds = tru
};
return (
-
+
{/* Close button */}