Improve styles for mobile

VoidCat/spa/public/manifest.json

@@ -1,16 +1,13 @@
 {
   "short_name": "void.cat",
   "name": "void.cat",
+  "id": "/",
+  "description": "Void.cat file hosting",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo.png",
+      "src": "voidcat_512.png",
       "type": "image/png",
-      "sizes": "64x64"
+      "sizes": "512x512"
     }
   ],
   "start_url": ".",

VoidCat/spa/src/App.css

@@ -1,12 +1,11 @@
 .page {
-    width: 720px;
+    width: 900px;
     margin-left: auto;
     margin-right: auto;
 }
 
-@media (max-width: 720px) {
+@media (max-width: 900px) {
     .page {
         width: 100vw;
-        white-space: nowrap;
     }
 }

VoidCat/spa/src/Components/FileEdit/FileEdit.css

@@ -1,8 +1,15 @@
 .file-edit {
     text-align: start;
+    margin: 0 10px;
 }
 
 .file-edit svg {
     vertical-align: middle;
     margin-left: 10px;
+}
+
+@media (max-width: 720px) {
+    .file-edit {
+        flex-direction: column;
+    }
 }

VoidCat/spa/src/Components/FileUpload/Dropzone.css

@@ -8,17 +8,11 @@
     text-align: center;
     user-select: none;
     cursor: pointer;
-    height: 200px;
+    height: 250px;
     font-size: x-large;
 }
 
 .drop small {
     display: block;
     font-size: x-small;
-}
-
-@media (max-width: 720px) {
-    .drop {
-        width: 100%;
-    }
 }

VoidCat/spa/src/Components/FileUpload/FileUpload.css

@@ -6,6 +6,12 @@
     margin-top: 10px;
 }
 
+@media (max-width: 720px) {
+    .upload {
+        flex-direction: column;
+    }
+}
+
 .upload .info {
     flex: 2;
 }

VoidCat/spa/src/Components/HomePage/GlobalStats.css

@@ -3,6 +3,7 @@
     grid-auto-flow: column;
     margin: 0 30px;
     line-height: 32px;
+    text-align: center;
 }
 
 .stats svg {
@@ -13,9 +14,9 @@
 .stats > div {
 }
 
-@media (max-width: 720px) {
+@media (max-width: 900px) {
     .stats {
-        margin: 0 10px;
+        margin: 0 5px;
         font-size: 14px;
     }
 

VoidCat/spa/src/Components/Shared/Header.css

@@ -9,4 +9,8 @@
     font-size: 30px;
     line-height: 2;
     flex-grow: 1;
+}
+
+.header img.logo {
+    height: 80px;
 }

VoidCat/spa/src/Components/Shared/Header.js

@@ -1,10 +1,13 @@
 import "./Header.css";
+import VoidCat from "../../image/voidcat.png";
+
+import {useEffect} from "react";
 import {Link} from "react-router-dom";
 import {useDispatch, useSelector} from "react-redux";
+
 import {InlineProfile} from "./InlineProfile";
 import {useApi} from "./Api";
 import {logout, setAuth, setProfile} from "../../LoginState";
-import {useEffect} from "react";
 import {setInfo} from "../../SiteInfoStore";
 
 export function Header() {
@@ -42,8 +45,12 @@ export function Header() {
 
     return (
         <div className="header page">
+
+            <img src={VoidCat} alt="logo" className="logo"/>
             <div className="title">
-                <Link to="/">{window.location.hostname}</Link>
+                <Link to="/">
+                    {window.location.hostname}
+                </Link>
             </div>
             {profile ?
                 <InlineProfile profile={profile} options={{