fix: fix slim size compose dialog (#979)

fixes #106

src/routes/_components/compose/ComposeBox.html

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

src/routes/_components/compose/ComposeFileDrop.html

@@ -1,4 +1,4 @@
-<file-drop class="file-drop" accept={mediaAccept} ref:fileDrop >
+<file-drop class="file-drop {size === 'slim' ? 'slim-size' : ''}" 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,6 +34,18 @@
     border-radius: 6px;
   }
 
+  .file-drop.slim-size {
+    max-height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .file-drop.slim-size::-webkit-scrollbar {
+    display: none;
+  }
+
   :global(.file-drop.drop-valid .file-drop-info, .file-drop.drop-invalid .file-drop-info) {
     display: flex;
     background: var(--file-drop-mask);

src/routes/_components/compose/ComposeInput.html

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

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} />
+      <ComposeMediaItem {realm} {mediaItem} {index} {media} {size} />
     {/each}
   </div>
 {/if}
@@ -28,4 +28,4 @@
       ComposeMediaItem
     }
   }
-</script>
+</script>

src/routes/_components/compose/ComposeMediaItem.html

@@ -1,4 +1,4 @@
-<div class="compose-media">
+<div class="compose-media {size === 'slim' ? 'slim-size' : ''}">
   <img src={mediaItem.data.preview_url} {alt} />
   <div class="compose-media-delete">
     <button class="compose-media-delete-button"
@@ -78,6 +78,16 @@
     width: 18px;
     height: 18px;
   }
+
+  .compose-media-realm.slim-size {
+    max-height: 20vh;
+  }
+
+  @media (max-width: 767px) {
+    .compose-media.slim-size {
+      max-height: 15vh;
+    }
+  }
 </style>
 <script>
   import { store } from '../../_store/store'