ui: apply mobile layout if screen width < 800px instead of < 720px

Some mobile get large screen now, and also if using a small window on desktop better adapt the visual using mobile layout

src/static/css/admin.css

@@ -222,7 +222,7 @@ pre {
   word-wrap: break-word;
 }
 
-@media (max-width: 720px) {
+@media (max-width: 800px) {
   div.innerwrapper {
     padding: 0 15px 15px 15px;
   }

src/static/css/iframe_editor.css

@@ -114,7 +114,7 @@ body.doesWrap:not(.noprewrap) > div {
   font-size: 12px; /* overridden by lineMetricsDiv.style */
   font-family: monospace; /* overridden by lineMetricsDiv.style */
 }
-@media (max-width: 720px) {
+@media (max-width: 800px) {
   #sidediv {
     /* Do not use display: none to hide the sidediv, otherwise the parent container does not
        get its height properly calculated by flexboxes */

src/static/css/pad/chat.css

@@ -152,7 +152,7 @@
   display: none;
 }
 
-@media only screen and (max-width: 720px) {
+@media only screen and (max-width: 800px) {
   #chatbox {
     right: 0;
     bottom: 0;

src/static/css/pad/gritter.css

@@ -40,7 +40,7 @@
   background-color: #eed3d4;
 }
 
-@media (max-width: 720px) {
+@media (max-width: 800px) {
   #gritter-container {
     left: 1rem;
     right: 1rem;

src/static/css/pad/layout.css

@@ -47,7 +47,7 @@ body {
   width: 0; /* hide when the container is empty */
 }
 
-@media only screen and (max-width: 720px) {
+@media only screen and (max-width: 800px) {
   #editorcontainerbox {
     margin-bottom: 39px; /* Leave space for the bottom toolbar on mobile */
   }

src/static/css/pad/popup.css

@@ -62,7 +62,7 @@
 }
 
 /* Mobile devices */
-@media only screen and (max-width: 720px) {
+@media only screen and (max-width: 800px) {
   .popup {
     border-radius: 0;
     top: 1rem;

src/static/css/pad/popup_users.css

@@ -98,7 +98,7 @@ input#myusernameedit:not(.editable) {
   right: calc(100% + 15px);
   z-index: 101;
 }
-@media (max-width: 720px) {
+@media (max-width: 800px) {
   #mycolorpicker.popup {
     top: auto;
     bottom: 0;

src/static/css/pad/toolbar.css

@@ -135,7 +135,7 @@
   overflow: visible;
 }
 
-@media only screen and (max-width: 720px) {
+@media only screen and (max-width: 800px) {
   .toolbar ul li.separator {
     width: 5px;
   }

src/static/css/timeslider.css

@@ -131,7 +131,7 @@
   height: 100%;
 }
 
-@media (max-width: 720px) {
+@media (max-width: 800px) {
   #timeslider-slider #timer { display: none; }
 
   .editbarright [data-key="timeslider_returnToPad"] {

src/static/skins/colibris/src/components/chat.css

@@ -75,7 +75,7 @@
   background-color: var(--bg-color);
 }
 
-@media (max-width: 720px) {
+@media (max-width: 800px) {
   #chaticon {
     right: 0;
   }

src/static/skins/colibris/src/components/popup.css

@@ -41,7 +41,7 @@
   min-width: 180px;
 }
 
-@media (max-width: 720px) {
+@media (max-width: 800px) {
   .popup-content {
     padding: 1rem;
     box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), -1px 1px 16px 3px rgba(27, 39, 51, 0.12);

src/static/skins/colibris/src/components/toolbar.css

@@ -131,7 +131,7 @@
   }
 }
 
-@media (max-width: 720px) {
+@media (max-width: 800px) {
 
   .toolbar ul li {
     margin: 5px 2px;

src/static/skins/colibris/src/layout.css

@@ -71,7 +71,7 @@
   #outerdocbody.plugin-ep_author_neat #sidediv { padding-right: 0 !important; }
 }
 
-@media only screen and (max-width: 720px) {
+@media only screen and (max-width: 800px) {
   #editorcontainerbox {
     margin-bottom: 39px; /* margin for bottom toolbar */
   }

src/static/skins/colibris/timeslider.css

@@ -82,7 +82,7 @@
   font-size: .9em;
 }
 
-@media (max-width: 720px) {
+@media (max-width: 800px) {
 
   #slider-btn-container {
     margin-top: 0;

src/templates/index.html

@@ -138,7 +138,7 @@
               width: 45px;
               height: 38px;
             }
-            @media only screen and (min-device-width: 320px) and (max-device-width: 720px) {
+            @media only screen and (min-device-width: 320px) and (max-device-width: 800px) {
               body {
                 background: #bbb;
                 background: -webkit-linear-gradient(#aaa,#eee 60%) center fixed;