From b69d9f3fa8f8c6a8897255d6ae09dc659ef919b4 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 10 Dec 2022 23:39:12 +0800
Subject: [PATCH] Manage to make the top carousel controls hide-able too

---
 src/app.css               | 11 ++++++++++-
 src/components/status.jsx | 20 ++++++++++----------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/app.css b/src/app.css
index 91e46547..56863b32 100644
--- a/src/app.css
+++ b/src/app.css
@@ -339,9 +339,11 @@ a.hashtag {
   gap: 8px;
   justify-content: space-between;
   text-align: center;
+  pointer-events: none;
 }
 
 button.carousel-button {
+  pointer-events: auto;
   font-weight: bold;
   color: var(--link-color);
 }
@@ -367,12 +369,19 @@ button.carousel-dot.active {
   pointer-events: none;
 }
 @media (hover: hover) {
+  .carousel-top-controls {
+    transform: translateY(-100%);
+    transition: transform 0.2s ease-in-out;
+  }
   .carousel-controls {
     transform: translateY(100%);
     transition: transform 0.2s ease-in-out;
   }
-  .carousel:hover + .carousel-controls,
+  .carousel:hover + .carousel-top-controls,
+  .carousel:hover + .carousel-top-controls + .carousel-controls,
+  .carousel-top-controls:hover,
   .carousel-controls:hover,
+  .carousel-top-controls:focus-within,
   .carousel-controls:focus-within {
     transform: translateY(0);
   }
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 7ef72a4e..7824f778 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -785,16 +785,6 @@ 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={(e) => {
@@ -818,6 +808,16 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
               </div>
             ))}
           </div>
+          <div class="carousel-top-controls">
+            <span />
+            <button
+              type="button"
+              class="carousel-button plain"
+              onClick={() => setShowMediaModal(false)}
+            >
+              <Icon icon="x" />
+            </button>
+          </div>
           {mediaAttachments?.length > 1 && (
             <div class="carousel-controls">
               <button