From 2c65dbda27c30b93306286b2b76292e02c1d2ebd Mon Sep 17 00:00:00 2001
From: Bernt Christian Egeland <cbegelan@gmail.com>
Date: Fri, 20 Aug 2021 07:58:37 +0200
Subject: [PATCH] center buttons small devices

---
 web/src/routes/Event.jsx | 34 +++++++++++++---------------------
 1 file changed, 13 insertions(+), 21 deletions(-)

diff --git a/web/src/routes/Event.jsx b/web/src/routes/Event.jsx
index 516582837..85c8ecbac 100644
--- a/web/src/routes/Event.jsx
+++ b/web/src/routes/Event.jsx
@@ -55,17 +55,19 @@ export default function Event({ eventId }) {
 
   return (
     <div className="space-y-4">
-      <div className="flex flex-wrap space-x-4">
+      <div className="flex flex-wrap justify-center">
         <Heading className="flex-grow">
           {data.camera} {data.label} <span className="text-sm">{startime.toLocaleString()}</span>
         </Heading>
-        <Button className="self-start" onClick={() => setShowDetails(!showDetails)} color="gray">
-          <ArrowDown className="w-6" />
-          {`${showDetails ? 'Hide event Details' : 'View event Details'}`}
-        </Button>
-        <Button className="self-start" color="red" onClick={handleClickDelete}>
-          <Delete className="w-6" /> Delete event
-        </Button>
+        <div className="space-x-4">
+          <Button className="self-start" onClick={() => setShowDetails(!showDetails)} color="gray">
+            <ArrowDown className="w-6" />
+            {`${showDetails ? 'Hide event Details' : 'View event Details'}`}
+          </Button>
+          <Button className="self-start" color="red" onClick={handleClickDelete}>
+            <Delete className="w-6" /> Delete event
+          </Button>
+        </div>
         {showDialog ? (
           <Dialog
             onDismiss={handleDismissDeleteDialog}
@@ -136,21 +138,11 @@ export default function Event({ eventId }) {
               onReady={(player) => {}}
             />
           </div>
-          <div className="text-center">
-            <Button
-              className="mx-2"
-              color="blue"
-              href={`${apiHost}/api/events/${eventId}/clip.mp4?download=true`}
-              download
-            >
+          <div className="flex space-x-4 justify-center">
+            <Button color="blue" href={`${apiHost}/api/events/${eventId}/clip.mp4?download=true`} download>
               <Clip className="w-6" /> Download Clip
             </Button>
-            <Button
-              className="mx-2"
-              color="blue"
-              href={`${apiHost}/api/events/${eventId}/snapshot.jpg?download=true`}
-              download
-            >
+            <Button color="blue" href={`${apiHost}/api/events/${eventId}/snapshot.jpg?download=true`} download>
               <Snapshot className="w-6" /> Download Snapshot
             </Button>
           </div>