more elegant fix for autosuggestion covering toolbar

routes/_components/compose/ComposeAutosuggest.html

@@ -1,4 +1,4 @@
-<div class="compose-autosuggest {{shown ? 'shown' : ''}}"
+<div class="compose-autosuggest {{shown ? 'shown' : ''}} {{realm === 'dialog' ? 'is-dialog' : ''}}"
        aria-hidden="true" >
   <ComposeAutosuggestionList
     items="{{searchResults}}"
@@ -9,21 +9,29 @@
 </div>
 <style>
   .compose-autosuggest {
-    opacity: 0;
+    position: absolute;
+    left: 5px;
+    top: 0;
     pointer-events: none;
+    opacity: 0;
     transition: opacity 0.1s linear;
     min-width: 400px;
     max-width: calc(100vw - 20px);
+    z-index: 7000;
+  }
+  .compose-autosuggest.is-dialog {
+    z-index: 11000;
   }
   .compose-autosuggest.shown {
     pointer-events: auto;
-    opacity: 1
+    opacity: 1;
   }
 
   @media (max-width: 479px) {
     .compose-autosuggest {
       /* hack: move this over to the left on mobile so it's easier to see */
       transform: translateX(-58px); /* avatar size 48px + 10px padding */
+      min-width: 0;
       width: calc(100vw - 20px);
     }
   }

routes/_components/compose/ComposeToolbar.html

@@ -30,10 +30,8 @@
          style="display: none;"
          type="file"
          accept=".jpg,.jpeg,.png,.gif,.webm,.mp4,.m4v,image/jpeg,image/png,image/gif,video/webm,video/mp4">
-  <div class="compose-autosuggest-wrapper">
   <ComposeAutosuggest :realm :text />
 </div>
-</div>
 <style>
   .compose-box-toolbar {
     grid-area: toolbar;
@@ -44,12 +42,6 @@
     display: flex;
     align-items: center;
   }
-  .compose-autosuggest-wrapper {
-    position: absolute;
-    left: 5px;
-    top: 0;
-    z-index: 7000;
-  }
 </style>
 <script>
   import IconButton from '../IconButton.html'