fix: fix style of compose box in reply (#983)

Fixes #982

src/routes/_components/compose/ComposeBox.html

@@ -1,7 +1,7 @@
 {#if realm === 'home'}
   <h1 class="sr-only">Compose status</h1>
 {/if}
-<ComposeFileDrop {realm} {size} >
+<ComposeFileDrop {realm} >
   <div class="{computedClassName} {hideAndFadeIn}">
     <ComposeAuthor />
     {#if contentWarningShown}
@@ -10,11 +10,11 @@
         <ComposeContentWarning {realm} {contentWarning} />
       </div>
     {/if}
-    <ComposeInput {realm} {text} {autoFocus} {size} on:postAction="doPostStatus()" />
+    <ComposeInput {realm} {text} {autoFocus} on:postAction="doPostStatus()" />
     <ComposeLengthGauge {length} {overLimit} />
     <ComposeToolbar {realm} {postPrivacy} {media} {contentWarningShown} {text} />
     <ComposeLengthIndicator {length} {overLimit} />
-    <ComposeMedia {realm} {media} {size} />
+    <ComposeMedia {realm} {media} />
   </div>
 </ComposeFileDrop>
 <ComposeStickyButton {showSticky}
@@ -76,6 +76,9 @@
     .compose-box.slim-size {
       width: 560px;
       max-width: calc(100vw - 40px);
+    }
+
+    .compose-box-realm-dialog {
       overflow-x: hidden;
     }
   }
@@ -137,6 +140,7 @@
     computed: {
       computedClassName: ({ overLimit, realm, size, postPrivacyKey, isReply }) => (classname(
         'compose-box',
+        `compose-box-realm-${realm}`,
         overLimit && 'over-char-limit',
         size === 'slim' && 'slim-size',
         isReply && postPrivacyKey === 'direct' && 'direct-reply'

src/routes/_components/compose/ComposeFileDrop.html

@@ -1,4 +1,4 @@
-<file-drop class="file-drop {size === 'slim' ? 'slim-size' : ''}" accept={mediaAccept} ref:fileDrop >
+<file-drop class="file-drop file-drop-realm-{realm}" accept={mediaAccept} ref:fileDrop >
   <div class="file-drop-info">
     <div class="file-drop-info-text">
       <span class="file-drop-info-text-valid">Drop to upload</span>
@@ -34,7 +34,7 @@
     border-radius: 6px;
   }
 
-  .file-drop.slim-size {
+  .file-drop-realm-dialog {
     max-height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
@@ -42,7 +42,7 @@
     -ms-overflow-style: none;
   }
 
-  .file-drop.slim-size::-webkit-scrollbar {
+  .file-drop-realm-dialog::-webkit-scrollbar {
     display: none;
   }
 

src/routes/_components/compose/ComposeInput.html

@@ -1,6 +1,6 @@
 <textarea
   id="the-compose-box-input-{realm}"
-  class="compose-box-input { size ==='slim' ? 'slim-size' : ''}"
+  class="compose-box-input compose-box-input-realm-{realm}"
   placeholder="What's on your mind?"
   ref:textarea
   bind:value=rawText
@@ -30,19 +30,19 @@
     width: calc(100% - 5px);
   }
 
-  .compose-box-input.slim-size {
+  .compose-box-input-realm-dialog {
     max-height: 40vh;
     overflow-y: auto;
   }
 
   @media (max-width: 767px) {
-    .compose-box-input.slim-size {
+    .compose-box-input-realm-dialog {
       max-height: 30vh;
     }
   }
 
   @media (max-width: 479px) {
-    .compose-box-input.slim-size {
+    .compose-box-input-realm-dialog {
       max-height: 20vh;
     }
   }

src/routes/_components/compose/ComposeMedia.html

@@ -1,7 +1,7 @@
 {#if media.length}
   <div class="compose-media-container" style="grid-template-columns: repeat({media.length}, 1fr);">
     {#each media as mediaItem, index}
-      <ComposeMediaItem {realm} {mediaItem} {index} {media} {size} />
+      <ComposeMediaItem {realm} {mediaItem} {index} {media} />
     {/each}
   </div>
 {/if}

src/routes/_components/compose/ComposeMediaItem.html

@@ -1,4 +1,4 @@
-<div class="compose-media {size === 'slim' ? 'slim-size' : ''}">
+<div class="compose-media compose-media-realm-{realm}">
   <img src={mediaItem.data.preview_url} {alt} />
   <div class="compose-media-delete">
     <button class="compose-media-delete-button"
@@ -79,12 +79,12 @@
     height: 18px;
   }
 
-  .compose-media-realm.slim-size {
+  .compose-media-realm-dialog {
     max-height: 20vh;
   }
 
   @media (max-width: 767px) {
-    .compose-media.slim-size {
+    .compose-media-realm-dialog {
       max-height: 15vh;
     }
   }