From 65552e126b25056cced0740cbcf5f833336038c1 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Mon, 16 Oct 2023 13:58:00 +0100
Subject: [PATCH] fix: spotlight bugs

---
 .../app/src/Element/Deck/SpotlightMedia.css   |  2 +-
 .../app/src/Element/Deck/SpotlightMedia.tsx   | 28 ++++++++++++++++---
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/Element/Deck/SpotlightMedia.css b/packages/app/src/Element/Deck/SpotlightMedia.css
index e24a159e..c5852398 100644
--- a/packages/app/src/Element/Deck/SpotlightMedia.css
+++ b/packages/app/src/Element/Deck/SpotlightMedia.css
@@ -15,7 +15,7 @@
   max-width: 100vw;
   max-height: 99vh;
   aspect-ratio: unset;
-  width: unset;
+  width: unset !important;
 }
 
 .spotlight .details {
diff --git a/packages/app/src/Element/Deck/SpotlightMedia.tsx b/packages/app/src/Element/Deck/SpotlightMedia.tsx
index e37463f0..4b5f1105 100644
--- a/packages/app/src/Element/Deck/SpotlightMedia.tsx
+++ b/packages/app/src/Element/Deck/SpotlightMedia.tsx
@@ -21,13 +21,17 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
     const handleKeyDown = (e: KeyboardEvent) => {
       switch (e.key) {
         case "ArrowLeft":
-        case "ArrowUp":
+        case "ArrowUp": {
+          e.preventDefault();
           dec();
           break;
+        }
         case "ArrowRight":
-        case "ArrowDown":
+        case "ArrowDown": {
+          e.preventDefault();
           inc();
           break;
+        }
       }
     };
 
@@ -64,8 +68,24 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
       </div>
       {props.images.length > 1 && (
         <>
-          <Icon className="left" name="arrowFront" size={24} onClick={() => dec()} />
-          <Icon className="right" name="arrowFront" size={24} onClick={() => inc()} />
+          <Icon
+            className="left"
+            name="arrowFront"
+            size={24}
+            onClick={e => {
+              e.stopPropagation();
+              dec();
+            }}
+          />
+          <Icon
+            className="right"
+            name="arrowFront"
+            size={24}
+            onClick={e => {
+              e.stopPropagation();
+              inc();
+            }}
+          />
         </>
       )}
     </div>