Make media modal sheet max

src/app.css

@@ -657,6 +657,13 @@ button.carousel-dot[disabled].active {
   animation: slide-up 0.3s var(--timing-function);
   border: 1px solid var(--outline-color);
 }
+.sheet-max {
+  width: 90vw;
+  width: 90dvw;
+  max-width: none;
+  height: 90vh;
+  height: 90dvh;
+}
 .sheet header {
   padding: 16px 16px 8px;
   padding-left: max(16px, env(safe-area-inset-left));

src/components/compose.css

@@ -413,11 +413,11 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  gap: 8px;
 }
 #media-sheet textarea {
   width: 100%;
   height: 10em;
-  margin-top: 8px;
 }
 #media-sheet .media-preview {
   border: 2px solid var(--outline-color);
@@ -443,3 +443,20 @@
   object-fit: contain;
   vertical-align: middle;
 }
+
+@media (min-width: 50em) {
+  #media-sheet main {
+    flex-direction: row;
+  }
+  #media-sheet .media-preview {
+    flex: 2;
+  }
+  #media-sheet .media-preview > * {
+    max-height: none;
+  }
+  #media-sheet textarea {
+    flex: 1;
+    min-height: 100%;
+    height: auto;
+  }
+}

src/components/compose.jsx

@@ -1263,7 +1263,7 @@ function MediaAttachment({
             }
           }}
         >
-          <div id="media-sheet" class="sheet">
+          <div id="media-sheet" class="sheet sheet-max">
             <header>
               <h2>
                 {