fix: mobile-friendly taskbar

src/gui/src/UI/UIDesktop.js

@@ -1708,6 +1708,8 @@ window.remove_taskbar_item = function(item){
     $(item).animate({width: 0}, 200, function(){
         $(item).remove();
     })
+
+    window.recalibrate_taskbar_item_positions();
 }
 
 window.enter_fullpage_mode = (el_window)=>{

src/gui/src/UI/UITaskbar.js

@@ -237,6 +237,7 @@ async function UITaskbar(options){
         }
     })
 
+    window.recalibrate_taskbar_item_positions();
     window.make_taskbar_sortable();
 }
 
@@ -303,4 +304,27 @@ 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){
+        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');
+            // set left position for each taskbar item
+            let left = 0;
+            for (let index = 0; index < taskbar_items.length; index++) {
+                const taskbar_item = taskbar_items[index];
+                $(taskbar_item).css('left', left);
+                left += 60;
+            }
+        }else{
+            $('.taskbar-item').css('position', 'unset');
+            $('.taskbar').css('justify-content', 'center');
+        }
+    }
+}
 export default UITaskbar;

src/gui/src/UI/UITaskbarItem.js

@@ -376,6 +376,10 @@ function UITaskbarItem(options){
         }
     });
 
+    if(options.append_to_taskbar){
+        window.recalibrate_taskbar_item_positions();
+    }
+
     return el_taskbar_item;
 }
 

src/gui/src/css/style.css

@@ -2412,6 +2412,44 @@ 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;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.device-phone .taskbar {
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+}
+
+/*****************************************************
+ * Tooltip
+ *****************************************************/
+
 .ui-tooltip, .arrow:after {
     background-color: rgba(231, 238, 245, .92);
     box-shadow: none;