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/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;
   }