diff --git a/src/static/css/pad/layout.css b/src/static/css/pad/layout.css
index 7b64936d7..e5b79c268 100644
--- a/src/static/css/pad/layout.css
+++ b/src/static/css/pad/layout.css
@@ -47,8 +47,6 @@ body {
   width: 0; /* hide when the container is empty */
 }
 
-@media only screen and (max-width: 800px) {
-  #editorcontainerbox {
-    margin-bottom: 39px; /* Leave space for the bottom toolbar on mobile */
-  }
+.mobile-layout #editorcontainerbox {
+  margin-bottom: 39px; /* Leave space for the bottom toolbar on mobile */
 }
diff --git a/src/static/css/pad/popup.css b/src/static/css/pad/popup.css
index 00fc8ca51..0eb000996 100644
--- a/src/static/css/pad/popup.css
+++ b/src/static/css/pad/popup.css
@@ -78,9 +78,11 @@
   .popup#users .popup-content {
     overflow: visible;
   }
-  /* Move popup to the bottom, except popup linked to left toolbar, like hyperklink popup */
-  .popup:not(.toolbar-popup) {
-    top: auto;
-    bottom: 1rem;
-  }
-}
\ No newline at end of file
+}
+/* Move popup to the bottom, except popup linked to left toolbar, like hyperklink popup */
+.mobile-layout .popup:not(.toolbar-popup) {
+  top: auto;
+  left: 1rem;
+  right: auto;
+  bottom: 1rem;
+}
diff --git a/src/static/css/pad/popup_users.css b/src/static/css/pad/popup_users.css
index 8b6ba82bc..ce4d14365 100644
--- a/src/static/css/pad/popup_users.css
+++ b/src/static/css/pad/popup_users.css
@@ -98,13 +98,15 @@ input#myusernameedit:not(.editable) {
   right: calc(100% + 15px);
   z-index: 101;
 }
-@media (max-width: 800px) {
-  #mycolorpicker.popup {
-    top: auto;
-    bottom: 0;
-    left: auto !important;
-    right: 0 !important;
-  }
+.mobile-layout #users.popup {
+  right: 1rem;
+  left: auto;
+}
+.mobile-layout #mycolorpicker.popup {
+  top: auto;
+  bottom: 0;
+  left: auto !important;
+  right: 0 !important;
 }
 #mycolorpicker.popup .btn-container {
   margin-top: 10px;
diff --git a/src/static/css/pad/toolbar.css b/src/static/css/pad/toolbar.css
index bc258510a..1a398b199 100644
--- a/src/static/css/pad/toolbar.css
+++ b/src/static/css/pad/toolbar.css
@@ -139,37 +139,40 @@
   .toolbar ul li.separator {
     width: 5px;
   }
-  /* menu_right act like a new toolbar on the bottom of the screen */
-  .toolbar .menu_right {
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    border-top: 1px solid #ccc;
-    background-color: #f4f4f4;
-    padding: 0 5px 5px 5px;
-  }
-  .toolbar ul.menu_right > li {
-    margin-right: 8px;
-  }
-  .toolbar ul.menu_right > li.separator {
-    display: none;
-  }
-  .toolbar ul.menu_right > li a {
-    border: none;
-    background-color: transparent;
-    margin-left: 5px;
-  }
-  .toolbar ul.menu_right > li[data-key="showusers"] {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    margin: 0;
-  }
-  .toolbar ul.menu_right > li[data-key="showusers"] a {
-    height: 100%;
-    width: 40px;
-    border-radius: 0;
-  }
-}
\ No newline at end of file
+}
+
+/* menu_right act like a new toolbar on the bottom of the screen */
+.mobile-layout .toolbar .menu_right {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  border-top: 1px solid #ccc;
+  background-color: #f4f4f4;
+  padding: 0 5px 5px 5px;
+}
+.mobile-layout .toolbar ul.menu_right > li {
+  margin-right: 8px;
+}
+.mobile-layout .toolbar ul.menu_right > li[data-key="showusers"] {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: 0;
+}
+.mobile-layout .toolbar ul.menu_right > li[data-key="showusers"] a {
+  height: 100%;
+  width: 40px;
+  border-radius: 0;
+}
+.mobile-layout .toolbar ul.menu_right > li.separator {
+  display: none;
+}
+.mobile-layout .toolbar ul.menu_right > li a {
+  border: none;
+  margin-left: 5px;
+}
+.mobile-layout .toolbar ul.menu_right > li a:not(.selected) {
+  background-color: transparent;
+}
diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js
index 30d223059..0e40bb990 100644
--- a/src/static/js/pad_editbar.js
+++ b/src/static/js/pad_editbar.js
@@ -317,12 +317,14 @@ var padeditbar = (function()
     {
       // reset style
       $('.toolbar').removeClass('cropped')
+      $('body').removeClass('mobile-layout');
       var menu_left = $('.toolbar .menu_left')[0];
 
-      // on mobile the menu_right get displayed at the bottom of the screen
-      var isMobileLayout = $('.toolbar .menu_right').css('position') === 'fixed';
-
-      if (menu_left && menu_left.scrollWidth > $('.toolbar').width() && isMobileLayout) {
+      var menuRightWidth = 280; // this is approximate, we cannot measure it because on mobileLayour it takes the full width on the bottom of the page
+      if (menu_left && menu_left.scrollWidth > $('.toolbar').width() - menuRightWidth || $('.toolbar').width() < 1000) {
+        $('body').addClass('mobile-layout');
+      }
+      if (menu_left && menu_left.scrollWidth > $('.toolbar').width()) {
         $('.toolbar').addClass('cropped');
       }
     }
diff --git a/src/static/skins/colibris/src/components/toolbar.css b/src/static/skins/colibris/src/components/toolbar.css
index 91e9991ed..7f3e71403 100644
--- a/src/static/skins/colibris/src/components/toolbar.css
+++ b/src/static/skins/colibris/src/components/toolbar.css
@@ -131,23 +131,24 @@
   }
 }
 
-@media (max-width: 800px) {
-
-  .toolbar ul li {
-    margin: 5px 2px;
-  }
-
-  .toolbar .menu_right {
-    border-top: 1px solid #d2d2d2;
-    border-top: var(--toolbar-border);
-    background-color: #ffffff;
-    background-color: var(--bg-color);
-    padding: 0;
-  }
-
-  .toolbar ul li a:hover { background-color: transparent; }
-
-  .toolbar ul li.separator { margin: 0; display: none; }
+.mobile-layout .toolbar ul li {
+  margin: 5px 2px;
+}
+.mobile-layout .toolbar ul li.separator {
+  margin: 0 5px;
+}
+@media (max-width: 800px) {
+  .mobile-layout .toolbar ul li.separator {
+    display: none;
+  }
+}
+.mobile-layout .toolbar .menu_right {
+  border-top: 1px solid #d2d2d2;
+  border-top: var(--toolbar-border);
+  background-color: #ffffff;
+  background-color: var(--bg-color);
+  padding: 0;
+}
+.mobile-layout .toolbar ul li a:hover {
+  /* background-color: transparent; */
 }
-
-
diff --git a/src/static/skins/colibris/src/layout.css b/src/static/skins/colibris/src/layout.css
index 6385cf140..1ec3886c8 100644
--- a/src/static/skins/colibris/src/layout.css
+++ b/src/static/skins/colibris/src/layout.css
@@ -46,10 +46,3 @@
     border-radius: 0;
   }
 }
-
-@media only screen and (max-width: 800px) {
-  #editorcontainerbox {
-    margin-bottom: 39px; /* margin for bottom toolbar */
-  }
-}
-