Adjust styles

VoidCat/spa/src/Admin/Admin.css

@@ -0,0 +1,5 @@
+.admin {
+    width: 1024px;
+    margin-left: auto;
+    margin-right: auto;
+}

VoidCat/spa/src/Admin/Admin.js

@@ -1,9 +1,10 @@
-import {Fragment} from "react";
-import {useSelector} from "react-redux";
+import {useSelector} from "react-redux";
 import {Login} from "../Login";
 import {FileList} from "./FileList";
 import {UserList} from "./UserList";
 
+import "./Admin.css";
+
 export function Admin() {
     const auth = useSelector((state) => state.login.jwt);
 
@@ -11,7 +12,7 @@ export function Admin() {
         return <Login/>;
     } else {
         return (
-            <Fragment>
+            <div className="admin">
                 <h2>Admin</h2>
 
                 <h4>Users</h4>
@@ -19,7 +20,7 @@ export function Admin() {
 
                 <h4>Files</h4>
                 <FileList/>
-            </Fragment>
+            </div>
         );
     }
 }

VoidCat/spa/src/Admin/FileList.css

@@ -1,3 +1,6 @@
 table.file-list {
     width: 100%;
+    word-break: keep-all;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }

VoidCat/spa/src/App.css

@@ -1,15 +1,2 @@
 .app {
-    width: 720px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-    .app .drop {
-        border-radius: 20px;
-        border: 1px solid;
-        margin-top: 20vh;
-        text-align: center;
-        line-height: 300px;
-        user-select: none;
-        cursor: pointer;
-    }
+}

VoidCat/spa/src/Dropzone.css

@@ -0,0 +1,9 @@
+.drop {
+    border-radius: 20px;
+    border: 1px solid;
+    margin-top: 20vh;
+    text-align: center;
+    line-height: 300px;
+    user-select: none;
+    cursor: pointer;
+}

VoidCat/spa/src/Dropzone.js

@@ -1,6 +1,8 @@
 import {Fragment, useState} from "react";
 import {FileUpload} from "./FileUpload";
 
+import "./Dropzone.css";
+
 export function Dropzone(props) {
     let [files, setFiles] = useState([]);
 

VoidCat/spa/src/FilePreview.css

@@ -1,6 +1,9 @@
 .preview {
     text-align: center;
     margin-top: 2vh;
+    width: 720px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
     .preview > a {

VoidCat/spa/src/FilePreview.js

@@ -34,6 +34,8 @@ export function FilePreview() {
                 case "image/png": {
                     return <img src={link} alt={info.metadata.name}/>;
                 }
+                case "audio/mp3":
+                case "audio/ogg":
                 case "video/mp4":
                 case "video/matroksa":
                 case "video/x-matroska":
@@ -41,6 +43,7 @@ export function FilePreview() {
                 case "video/quicktime": {
                     return <video src={link} controls/>;
                 }
+                case "text/css":
                 case "text/plain": {
                     return <TextPreview link={link}/>;
                 }

VoidCat/spa/src/HomePage.css

@@ -0,0 +1,5 @@
+.home {
+    width: 720px;
+    margin-left: auto;
+    margin-right: auto;
+}

VoidCat/spa/src/HomePage.js

@@ -1,14 +1,15 @@
-import {Fragment} from "react";
-import {Dropzone} from "./Dropzone";
+import {Dropzone} from "./Dropzone";
 import {GlobalStats} from "./GlobalStats";
 import {FooterLinks} from "./FooterLinks";
 
-export function HomePage(props) {
+import "./HomePage.css";
+
+export function HomePage() {
     return (
-        <Fragment>
+        <div className="home">
             <Dropzone/>
             <GlobalStats/>
             <FooterLinks/>
-        </Fragment>
+        </div>
     );
 }