From 378b7438669831d9aee50d1b883ba353b28114ef Mon Sep 17 00:00:00 2001
From: Bernt Christian Egeland <cbegelan@gmail.com>
Date: Mon, 23 Aug 2021 20:01:44 +0200
Subject: [PATCH] styling

---
 web/src/index.css        |  4 ---
 web/src/routes/Event.jsx | 68 +++++++++++++++++++---------------------
 2 files changed, 33 insertions(+), 39 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index 0ae4d1cd3..2278ef964 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -38,7 +38,3 @@ Could not find a proper tailwind css.
 .outer-max-width {
   max-width: 60%;
 }
-.aspect-ratio-box {
-  padding-top: calc(9 / 16 * 100%);
-  padding-bottom: 20%;
-}
diff --git a/web/src/routes/Event.jsx b/web/src/routes/Event.jsx
index cd7a50609..245bacbce 100644
--- a/web/src/routes/Event.jsx
+++ b/web/src/routes/Event.jsx
@@ -92,41 +92,39 @@ export default function Event({ eventId, close, scrollRef }) {
         ) : null}
       </div>
       <div className="outer-max-width m-auto">
-        <div className="aspect-ratio-box w-full relative">
-          <div className="absolute w-full top-10 left-0">
-            {data.has_clip ? (
-              <Fragment>
-                <Heading size="lg">Clip</Heading>
-                <VideoPlayer
-                  options={{
-                    sources: [
-                      {
-                        src: `${apiHost}/vod/event/${eventId}/index.m3u8`,
-                        type: 'application/vnd.apple.mpegurl',
-                      },
-                    ],
-                    poster: data.has_snapshot
-                      ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
-                      : `data:image/jpeg;base64,${data.thumbnail}`,
-                  }}
-                  seekOptions={{ forward: 10, back: 5 }}
-                  onReady={() => {}}
-                />
-              </Fragment>
-            ) : (
-              <Fragment>
-                <Heading size="sm">{data.has_snapshot ? 'Best Image' : 'Thumbnail'}</Heading>
-                <img
-                  src={
-                    data.has_snapshot
-                      ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
-                      : `data:image/jpeg;base64,${data.thumbnail}`
-                  }
-                  alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`}
-                />
-              </Fragment>
-            )}
-          </div>
+        <div className="w-full pt-5 relative pb-20">
+          {data.has_clip ? (
+            <Fragment>
+              <Heading size="lg">Clip</Heading>
+              <VideoPlayer
+                options={{
+                  sources: [
+                    {
+                      src: `${apiHost}/vod/event/${eventId}/index.m3u8`,
+                      type: 'application/vnd.apple.mpegurl',
+                    },
+                  ],
+                  poster: data.has_snapshot
+                    ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
+                    : `data:image/jpeg;base64,${data.thumbnail}`,
+                }}
+                seekOptions={{ forward: 10, back: 5 }}
+                onReady={() => {}}
+              />
+            </Fragment>
+          ) : (
+            <Fragment>
+              <Heading size="sm">{data.has_snapshot ? 'Best Image' : 'Thumbnail'}</Heading>
+              <img
+                src={
+                  data.has_snapshot
+                    ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
+                    : `data:image/jpeg;base64,${data.thumbnail}`
+                }
+                alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`}
+              />
+            </Fragment>
+          )}
         </div>
       </div>
     </div>