fix: mobile detection

Author: jelveh

src/gui/src/UI/UITaskbar.js

@@ -94,6 +94,7 @@ async function UITaskbar(options){
                 apps_str += `<input style="background-image:url('${window.icons['magnifier-outline.svg']}');" class="launch-search">`;
                 apps_str += `<img class="launch-search-clear" src="${window.icons['close.svg']}">`;
             apps_str += `</div>`;
+
             // -------------------------------------------
             // Recent apps
             // -------------------------------------------
@@ -307,13 +308,14 @@ window.make_taskbar_sortable = function(){
 window.recalibrate_taskbar_item_positions = function(){
     // if this is mobile rearrange taskbar item positions based on absolute position
     // taskbar items must be centered unless there is overflow. If there is overflow, the taskbar items must be left aligned
-    if(isMobile.phone){
+    if(isMobile.phone || window.desktop_width < 800){
         let taskbar_items = $('.taskbar-item');
         let taskbar_width = taskbar_items.length * 60;
 
         if(taskbar_width > window.desktop_width){
             // set taskbar items to absolute position
             $('.taskbar-item').css('position', 'absolute');
+            $('.taskbar').css('display', 'block');
             // set left position for each taskbar item
             let left = 0;
             for (let index = 0; index < taskbar_items.length; index++) {

src/gui/src/css/style.css

@@ -2412,38 +2412,43 @@ label {
     }
 }
 
-.device-phone .taskbar {
-    justify-content: center;
-    overflow: visible !important;
-    overflow-x: scroll !important;
-}
-
-.device-phone .taskbar .taskbar-item, .device-phone .taskbar .taskbar-item-sortable-placeholder {
-    width: 40px !important;
-    height: 40px !important;
-    margin-right: 5px;
-    overflow: visible !important;
-    padding: 5px 5px 10px 5px;
-    position: absolute;
-}
-
-.device-phone .taskbar-icon {
-    height: 40px;
-    width: 40px;
-}
-
-/* Hide scrollbar for Chrome, Safari and Opera */
-.device-phone .taskbar ::-webkit-scrollbar {
-    width: 0 !important;
-    display: none;
-}
+@media screen and (max-width: 768px) {
 
-/* Hide scrollbar for IE, Edge and Firefox */
-.device-phone .taskbar {
-    -ms-overflow-style: none;
-    /* IE and Edge */
-    scrollbar-width: none;
-    /* Firefox */
+    .taskbar {
+        justify-content: center;
+        overflow: visible !important;
+        overflow-x: scroll !important;
+        overflow-y: hidden !important;
+    }
+    
+    .taskbar .taskbar-item, .taskbar .taskbar-item-sortable-placeholder {
+        width: 40px !important;
+        height: 40px !important;
+        margin-right: 5px;
+        overflow: visible !important;
+        padding: 5px 5px 10px 5px;
+        position: absolute;
+    }
+    
+    .taskbar-icon {
+        height: 40px;
+        width: 40px;
+    }
+    
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    .taskbar ::-webkit-scrollbar {
+        width: 0 !important;
+        display: none;
+    }
+    
+    /* Hide scrollbar for IE, Edge and Firefox */
+    .taskbar {
+        -ms-overflow-style: none;
+        /* IE and Edge */
+        scrollbar-width: none;
+        /* Firefox */
+    }    
+    
 }
 
 /*****************************************************