Adjust some layout stuff in composer

src/components/compose.css

@@ -1,14 +1,18 @@
+#compose-container-outer {
+  width: 100%;
+  height: 100vh;
+  height: 100dvh;
+  overflow: auto;
+  align-self: flex-start;
+  padding: env(safe-area-inset-top) env(safe-area-inset-right)
+    env(safe-area-inset-bottom) env(safe-area-inset-left);
+}
 #compose-container {
+  margin: auto;
   width: var(--main-width);
   max-width: 100vw;
   align-self: stretch;
   animation: fade-in 0.2s ease-out;
-  max-height: 100vh;
-  overflow: auto;
-}
-#compose-container.standalone {
-  max-height: none;
-  margin: auto;
 }
 
 #compose-container .compose-top {
@@ -41,6 +45,7 @@
   #compose-container textarea {
     font-size: 150%;
     font-size: calc(100% + 50% / var(--text-weight));
+    max-height: 65vh;
   }
 }
 

src/components/compose.jsx

@@ -498,6 +498,7 @@ function Compose({
   }, [mediaAttachments]);
 
   return (
+    <div id="compose-container-outer">
       <div id="compose-container" class={standalone ? 'standalone' : ''}>
         <div class="compose-top">
           {currentAccountInfo?.avatarStatic && (
@@ -706,7 +707,9 @@ function Compose({
                 (media) => !media.description?.trim?.(),
               );
               if (hasNoDescriptions) {
-              const yes = confirm('Some media have no descriptions. Continue?');
+                const yes = confirm(
+                  'Some media have no descriptions. Continue?',
+                );
                 if (!yes) return;
               }
             }
@@ -776,17 +779,21 @@ function Compose({
                   sensitive,
                   poll,
                   // mediaIds: mediaAttachments.map((attachment) => attachment.id),
-                media_ids: mediaAttachments.map((attachment) => attachment.id),
+                  media_ids: mediaAttachments.map(
+                    (attachment) => attachment.id,
+                  ),
                 };
                 if (editStatus && supports('@mastodon/edit-media-attributes')) {
-                params.media_attributes = mediaAttachments.map((attachment) => {
+                  params.media_attributes = mediaAttachments.map(
+                    (attachment) => {
                       return {
                         id: attachment.id,
                         description: attachment.description,
                         // focus
                         // thumbnail
                       };
-                });
+                    },
+                  );
                 } else if (!editStatus) {
                   params.visibility = visibility;
                   // params.inReplyToId = replyToStatus?.id || undefined;
@@ -1062,12 +1069,17 @@ function Compose({
                   ))}
               </select>
             </label>{' '}
-          <button type="submit" class="large" disabled={uiState === 'loading'}>
+            <button
+              type="submit"
+              class="large"
+              disabled={uiState === 'loading'}
+            >
               {replyToStatus ? 'Reply' : editStatus ? 'Update' : 'Post'}
             </button>
           </div>
         </form>
       </div>
+    </div>
   );
 }