From eace6c4d9bb7fc4f8c2664dccc5dba2cd2a2788b Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 5 Oct 2023 18:07:36 +0800
Subject: [PATCH] Slight adjustments to media alt edit sheet

---
 src/app.css                |  8 ++++++--
 src/components/compose.css | 30 ++++++++++++++++++++++++------
 src/components/compose.jsx | 17 ++++++++++++++++-
 3 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/src/app.css b/src/app.css
index 74b03835..0db147b8 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1335,12 +1335,16 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
   position: relative;
 }
 .sheet-max {
-  width: 90vw;
-  width: 90dvw;
   max-width: none;
   height: 90vh;
   height: 90dvh;
 }
+@media (min-width: 40em) {
+  .sheet {
+    width: 90vw;
+    width: 90dvw;
+  }
+}
 .sheet .sheet-close {
   position: absolute;
   border-radius: 0;
diff --git a/src/components/compose.css b/src/components/compose.css
index cd6d405d..8407966c 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -487,7 +487,28 @@
     padding-inline: 24px;
   }
 }
+#media-sheet {
+  .media-form {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 50vh;
 
+    textarea {
+      flex-grow: 1;
+      resize: none;
+      width: 100%;
+      /* height: 10em; */
+    }
+
+    footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+}
 #media-sheet main {
   padding-top: 8px;
   display: flex;
@@ -495,10 +516,6 @@
   flex: 1;
   gap: 8px;
 }
-#media-sheet textarea {
-  width: 100%;
-  height: 10em;
-}
 #media-sheet .media-preview {
   border: 2px solid var(--outline-color);
   border-radius: 8px;
@@ -515,6 +532,7 @@
     linear-gradient(-45deg, transparent 75%, var(--img-bg-color) 75%);
   background-size: 20px 20px;
   background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+  flex: 0.8;
 }
 #media-sheet .media-preview > * {
   width: 100%;
@@ -534,11 +552,11 @@
   #media-sheet .media-preview > * {
     max-height: none;
   }
-  #media-sheet textarea {
+  /* #media-sheet textarea {
     flex: 1;
     min-height: 100%;
     height: auto;
-  }
+  } */
 }
 
 #custom-emojis-sheet {
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index a92af771..2ab29f3e 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -1545,6 +1545,7 @@ function MediaAttachment({
       <div class="media-attachment">
         <div
           class="media-preview"
+          tabIndex="0"
           onClick={() => {
             setShowModal(true);
           }}
@@ -1571,6 +1572,7 @@ function MediaAttachment({
       </div>
       {showModal && (
         <Modal
+          class="light"
           onClick={(e) => {
             if (e.target === e.currentTarget) {
               setShowModal(false);
@@ -1608,7 +1610,20 @@ function MediaAttachment({
                   <audio src={url} controls />
                 ) : null}
               </div>
-              {descTextarea}
+              <div class="media-form">
+                {descTextarea}
+                <footer>
+                  <button
+                    type="button"
+                    class="light block"
+                    onClick={() => {
+                      setShowModal(false);
+                    }}
+                  >
+                    Done
+                  </button>
+                </footer>
+              </div>
             </main>
           </div>
         </Modal>