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"] {