From fb04c55216737016fe1cdfa21c7e196f8f2ff58e Mon Sep 17 00:00:00 2001
From: Tarun saini <151149190+tarunsaini04@users.noreply.github.com>
Date: Wed, 10 Sep 2025 07:28:04 +0530
Subject: [PATCH] feat(UI): Differentiate tablet UI based on pointer
 capabilities (#1482)

* feat: Differentiate tablets by pointer type

Reclassifies tablets with a mouse/trackpad to use the desktop UI.

This is detected by checking for `(hover: hover)` media query capabilities. This ensures that touch-only tablets retain their original, touch-friendly mobile UI while fixing the bug for users with pointer devices.

* Make sure `matchMedia` exists before using it

---------

Co-authored-by: Nariman Jelveh <nj@puter.com>
---
 src/gui/src/initgui.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/gui/src/initgui.js b/src/gui/src/initgui.js
index 3b400c422..e3e88c149 100644
--- a/src/gui/src/initgui.js
+++ b/src/gui/src/initgui.js
@@ -374,12 +374,21 @@ window.initgui = async function(options){
     // Checks the type of device the user is on (phone, tablet, or desktop).
     // Depending on the device type, it sets a class attribute on the body tag
     // to style or script the page differently for each device type.
-    if(isMobile.phone)
+    
+    if (isMobile.phone) {
         $('body').attr('class', 'device-phone');
-    else if(isMobile.tablet)
-        $('body').attr('class', 'device-tablet');
-    else
+    } else if (isMobile.tablet) {
+        // This is our new, smarter check for tablets
+        if (window.matchMedia && typeof window.matchMedia === 'function' && window.matchMedia('(hover: hover)').matches) {
+            // The user has a mouse/trackpad, so give them the desktop UI
+            $('body').attr('class', 'device-desktop');
+        } else {
+            // The user is on a touch-only tablet, so give them the mobile UI
+            $('body').attr('class', 'device-tablet');
+        }
+    } else {
         $('body').attr('class', 'device-desktop');
+    }
 
     // Appends a meta tag to the head of the document specifying the character encoding to be UTF-8.
     // This ensures that special characters and symbols display correctly across various platforms and browsers.