From 80b3432ccb217ccfad7f621a411958b32af9a2cb Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 10 Dec 2022 22:27:00 +0800
Subject: [PATCH] Carousel very buggy on mobile. Add close button.

---
 src/app.css               | 15 ++++++++++++---
 src/components/status.jsx | 19 +++++++++++++++++--
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/app.css b/src/app.css
index 3a364f96..91e46547 100644
--- a/src/app.css
+++ b/src/app.css
@@ -325,16 +325,22 @@ a.hashtag {
   max-height: 100vh;
 }
 
+.carousel-top-controls {
+  top: 0;
+}
 .carousel-controls {
+  bottom: 0;
+}
+:is(.carousel-top-controls, .carousel-controls) {
   position: fixed;
   width: 100%;
-  bottom: 0;
-  text-align: center;
-  padding: 32px;
+  padding: 16px;
   display: flex;
   gap: 8px;
   justify-content: space-between;
+  text-align: center;
 }
+
 button.carousel-button {
   font-weight: bold;
   color: var(--link-color);
@@ -460,4 +466,7 @@ button.carousel-dot.active {
   .box {
     padding: 32px;
   }
+  :is(.carousel-top-controls, .carousel-controls) {
+    padding: 32px;
+  }
 }
\ No newline at end of file
diff --git a/src/components/status.jsx b/src/components/status.jsx
index a454047d..7ef72a4e 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -785,10 +785,25 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
       </div>
       {showMediaModal !== false && (
         <Modal>
+          <div class="carousel-top-controls">
+            <span />
+            <button
+              type="button"
+              class="carousel-button plain"
+              onClick={() => setShowMediaModal(false)}
+            >
+              <Icon icon="x" />
+            </button>
+          </div>
           <div
             class="carousel"
-            onClick={() => {
-              setShowMediaModal(false);
+            onClick={(e) => {
+              if (
+                e.target.classList.contains('carousel-item') ||
+                e.target.classList.contains('media')
+              ) {
+                setShowMediaModal(false);
+              }
             }}
             tabindex="0"
           >