fix: fix autosuggest width on mobile (#1186)

fixes #1185

src/routes/_components/compose/ComposeAutosuggest.html

@@ -14,14 +14,13 @@
 </div>
 <style>
   .compose-autosuggest {
+    grid-area: autosuggest;
     position: absolute;
     left: 5px;
     top: 0;
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.1s linear;
-    min-width: 400px;
-    max-width: calc(100% - 20px);
     z-index: 7000;
   }
   .compose-autosuggest.is-dialog {
@@ -32,13 +31,22 @@
     opacity: 1;
   }
 
+  @media (min-width: 480px) {
+    .compose-autosuggest {
+      min-width: 400px;
+      max-width: calc(100% - 20px);
+    }
+  }
+
   @media (max-width: 479px) {
     .compose-autosuggest {
-      /* hack: move this over to the left on mobile so it's easier to see */
+      /* on mobile, move it to the left and make it fill the viewport width */
       transform: translateX(-58px); /* avatar size 48px + 10px padding */
-      min-width: 0;
       width: calc(100vw - 20px);
     }
+    .compose-autosuggest.is-dialog {
+      width: calc(100vw - 40px); /* extra padding when within the dialog */
+    }
   }
 
 </style>

src/routes/_components/compose/ComposeBox.html

@@ -12,6 +12,7 @@
     {/if}
     <ComposeInput {realm} {text} {autoFocus} on:postAction="doPostStatus()" />
     <ComposeLengthGauge {length} {overLimit} />
+    <ComposeAutosuggest {realm} {text} />
     <ComposeToolbar {realm} {postPrivacy} {media} {contentWarningShown} {text} />
     <ComposeLengthIndicator {length} {overLimit} />
     <ComposeMedia {realm} {media} />
@@ -32,13 +33,15 @@
     display: grid;
     align-items: flex-start;
     grid-template-areas:
-      "avatar name       handle    handle"
+      "avatar name        handle      handle"
-      "avatar cw         cw        cw"
+      "avatar cw          cw          cw"
-      "avatar input      input     input"
+      "avatar input       input       input"
-      "avatar gauge      gauge     gauge"
+      "avatar gauge       gauge       gauge"
-      "avatar toolbar    toolbar   length"
+      "avatar autosuggest autosuggest autosuggest"
-      "avatar media      media     media";
+      "avatar toolbar     toolbar     length"
+      "avatar media       media       media";
     grid-template-columns: min-content minmax(0, max-content) 1fr 1fr;
+    position: relative;
   }
 
   .compose-box.direct-reply {
@@ -79,6 +82,7 @@
   import ComposeMedia from './ComposeMedia.html'
   import ComposeContentWarning from './ComposeContentWarning.html'
   import ComposeFileDrop from './ComposeFileDrop.html'
+  import ComposeAutosuggest from './ComposeAutosuggest.html'
   import { measureText } from '../../_utils/measureText'
   import { POST_PRIVACY_OPTIONS } from '../../_static/statuses'
   import { store } from '../../_store/store'
@@ -113,7 +117,8 @@
       ComposeStickyButton,
       ComposeMedia,
       ComposeContentWarning,
-      ComposeFileDrop
+      ComposeFileDrop,
+      ComposeAutosuggest
     },
     data: () => ({
       size: void 0,

src/routes/_components/compose/ComposeToolbar.html

@@ -30,12 +30,10 @@
          style="display: none;"
          type="file"
          accept={mediaAccept} >
-  <ComposeAutosuggest {realm} {text} />
 </div>
 <style>
   .compose-box-toolbar {
     grid-area: toolbar;
-    position: relative;
     align-self: center;
   }
   .compose-box-toolbar-items {
@@ -49,13 +47,11 @@
   import { importShowEmojiDialog, importShowPostPrivacyDialog } from '../dialog/asyncDialogs'
   import { doMediaUpload } from '../../_actions/media'
   import { toggleContentWarningShown } from '../../_actions/contentWarnings'
-  import ComposeAutosuggest from './ComposeAutosuggest.html'
   import { mediaAccept } from '../../_static/media'
 
   export default {
     components: {
-      IconButton,
+      IconButton
-      ComposeAutosuggest
     },
     data: () => ({
       mediaAccept