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 */
+ }
+
}
/*****************************************************