From 2dde64e740aeb4460a7d1afa1b374abffd3a523e Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 17 Apr 2023 14:41:40 +0800
Subject: [PATCH] Fix arrows gone missing in carousel

---
 src/app.css                    | 3 +++
 src/components/media-modal.jsx | 7 +++++++
 2 files changed, 10 insertions(+)

diff --git a/src/app.css b/src/app.css
index 39638365..a1ea5444 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1009,6 +1009,9 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 :is(.carousel-top-controls, .carousel-controls)[hidden] {
   opacity: 0;
 }
+.carousel-controls {
+  top: 45%;
+}
 
 :is(.button, button).carousel-button,
 button.carousel-dot {
diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx
index 77c5dfee..eeba6405 100644
--- a/src/components/media-modal.jsx
+++ b/src/components/media-modal.jsx
@@ -84,6 +84,13 @@ function MediaModal({
     };
   }, []);
 
+  useEffect(() => {
+    let timer = setTimeout(() => {
+      carouselRef.current?.focus?.();
+    }, 100);
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
     <div class="media-modal-container">
       <div