From 5f4b43b189244d1a26555087c56626f28e6beaa5 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Fri, 9 Jun 2023 01:49:58 +0200
Subject: [PATCH] Adjust styles

---
 .../spa/src/app/src/Components/Shared/ImageGrid.css    |  2 +-
 .../spa/src/app/src/Components/Shared/ImageGrid.tsx    | 10 +++++-----
 VoidCat/spa/src/app/src/Pages/FilePreview.css          |  6 ++----
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/VoidCat/spa/src/app/src/Components/Shared/ImageGrid.css b/VoidCat/spa/src/app/src/Components/Shared/ImageGrid.css
index 3a50af1..3a10335 100644
--- a/VoidCat/spa/src/app/src/Components/Shared/ImageGrid.css
+++ b/VoidCat/spa/src/app/src/Components/Shared/ImageGrid.css
@@ -4,7 +4,7 @@
     flex-wrap: wrap;
 }
 
-.image-grid > div {
+.image-grid > a {
     cursor: pointer;
     display: flex;
     align-items: center;
diff --git a/VoidCat/spa/src/app/src/Components/Shared/ImageGrid.tsx b/VoidCat/spa/src/app/src/Components/Shared/ImageGrid.tsx
index 112b151..1debfb5 100644
--- a/VoidCat/spa/src/app/src/Components/Shared/ImageGrid.tsx
+++ b/VoidCat/spa/src/app/src/Components/Shared/ImageGrid.tsx
@@ -2,17 +2,17 @@ import "./ImageGrid.css";
 
 import {ApiError, PagedRequest, PagedResponse, PagedSortBy, PageSortOrder, VoidFileResponse} from "@void-cat/api";
 import {useEffect, useState} from "react";
+import {Link} from "react-router-dom";
 import {useDispatch} from "react-redux";
+
 import {logout} from "../../LoginState";
 import {PageSelector} from "./PageSelector";
-import {useNavigate} from "react-router-dom";
 
 interface ImageGridProps {
     loadPage: (req: PagedRequest) => Promise<PagedResponse<any>>
 }
 
 export default function ImageGrid(props: ImageGridProps) {
-    const navigate = useNavigate();
     const loadPage = props.loadPage;
     const dispatch = useDispatch();
     const [files, setFiles] = useState<PagedResponse<VoidFileResponse>>();
@@ -69,7 +69,7 @@ export default function ImageGrid(props: ImageGridProps) {
                 case "audio/midi":
                 case "audio/mpeg":
                 case "audio/ogg": {
-                    return <audio src={link} controls/>;
+                    return <audio src={link}/>;
                 }
                 case "video/x-msvideo":
                 case "video/mpeg":
@@ -95,9 +95,9 @@ export default function ImageGrid(props: ImageGridProps) {
 
     return <>
         <div className="image-grid">
-            {files?.results.map(v => <div key={v.id} onClick={() => navigate(`/${v.id}`)}>
+            {files?.results.map(v => <Link key={v.id} to={`/${v.id}`}>
                 {renderPreview(v)}
-            </div>)}
+            </Link>)}
         </div>
         <PageSelector onSelectPage={(x) => setPage(x)} page={page} total={files?.totalResults ?? 0}
                       pageSize={pageSize}/>
diff --git a/VoidCat/spa/src/app/src/Pages/FilePreview.css b/VoidCat/spa/src/app/src/Pages/FilePreview.css
index d0cf970..016c6f1 100644
--- a/VoidCat/spa/src/app/src/Pages/FilePreview.css
+++ b/VoidCat/spa/src/app/src/Pages/FilePreview.css
@@ -2,11 +2,9 @@
     margin-top: 2vh;
 }
 
-.preview img, .preview video, .preview object {
+.preview img, .preview video, .preview object, .preview audio {
     width: 100%;
-}
-.preview object {
-    height: 1018px;
+    max-height: 100vh;
 }
 
 .preview .file-stats {