From 9c5e8f4bd7ff2e98645b9950edef13cd4aaa0326 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Sun, 26 Oct 2025 11:25:35 +0200
Subject: [PATCH] Improve mobile/touch grid detection in EndScreenOverlay

Enhanced mobile and touch device detection logic for grid configuration, ensuring swiper is always used on mobile or touch devices. Increased grid gap for better spacing and updated conditions to prioritize user experience on small screens and touch devices.
---
 .../components/overlays/EndScreenOverlay.js   | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.js b/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.js
index 09c84576..523bd9b3 100644
--- a/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.js
+++ b/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.js
@@ -190,7 +190,7 @@ class EndScreenOverlay extends Component {
                 page.style.display = 'grid';
                 page.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
                 page.style.gridTemplateRows = `repeat(${gridRows}, 1fr)`;
-                page.style.gap = '8px';
+                page.style.gap = '12px'; // Increased gap for better spacing
                 page.style.scrollSnapAlign = 'start';
                 page.style.boxSizing = 'border-box';
                 page.style.alignContent = 'stretch';
@@ -252,11 +252,16 @@ class EndScreenOverlay extends Component {
         const isScreenLandscape = screenWidth > screenHeight;
 
         const isLandscape = playerWidth > playerHeight;
-        const isMobile = playerWidth < 700;
+
+        // Detect mobile/touch devices - should always show swiper
+        // Check both width and touch capability for better detection
+        const isTouchDevice = this.isTouchDevice;
+        const isSmallScreen = screenWidth < 700 || playerWidth < 700;
+        const isMobileOrTouch = isTouchDevice || isSmallScreen;
 
         // For mobile, prioritize screen orientation over player dimensions
         // Only consider it landscape if BOTH screen and player are in landscape
-        const isDefinitelyLandscape = isMobile ? isScreenLandscape && isLandscape : isLandscape;
+        const isDefinitelyLandscape = isMobileOrTouch ? isScreenLandscape && isLandscape : isLandscape;
 
         console.log('Grid Config:', {
             screenWidth,
@@ -268,16 +273,18 @@ class EndScreenOverlay extends Component {
             maxRows,
             isLandscape,
             isDefinitelyLandscape,
-            isMobile,
+            isTouchDevice,
+            isSmallScreen,
+            isMobileOrTouch,
         });
 
         // Enhanced grid configuration to fill all available space
-        // Check mobile conditions first to prevent being caught by desktop breakpoints
-        if (isMobile && isDefinitelyLandscape) {
-            // Mobile landscape: show 2x2 grid (4 items total) with swiper for pagination
+        // Check mobile/touch conditions first - swiper should ALWAYS be used on mobile/touch devices
+        if (isMobileOrTouch && isDefinitelyLandscape) {
+            // Mobile/Touch landscape: show 2x2 grid (4 items total) with swiper for pagination
             return { columns: 2, maxVideos: 12, useSwiper: true, itemsPerView: 4, gridRows: 2 };
-        } else if (isMobile) {
-            // Mobile portrait: show 2 items in single row swiper mode
+        } else if (isMobileOrTouch) {
+            // Mobile/Touch portrait: show 2 items in single row swiper mode
             return { columns: 2, maxVideos: 12, useSwiper: true, itemsPerView: 2, gridRows: 1 };
         } else if (playerWidth >= 1600) {
             const columns = 5;