diff --git a/src/gui/src/UI/UITaskbar.js b/src/gui/src/UI/UITaskbar.js index 155712585..d0818e0e2 100644 --- a/src/gui/src/UI/UITaskbar.js +++ b/src/gui/src/UI/UITaskbar.js @@ -94,6 +94,7 @@ async function UITaskbar(options){ apps_str += ``; apps_str += ``; apps_str += ``; + // ------------------------------------------- // 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++) { diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css index 416287720..7c97d318d 100644 --- a/src/gui/src/css/style.css +++ b/src/gui/src/css/style.css @@ -2412,38 +2412,43 @@ label { } } -.device-phone .taskbar { - justify-content: center; - overflow: visible !important; - overflow-x: scroll !important; -} +@media screen and (max-width: 768px) { -.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 */ + .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 */ + } + } /*****************************************************