From fe8ad175f219656dccf1faa04b1c2d863bdea0f6 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 5 Apr 2018 21:35:22 -0700
Subject: [PATCH] more elegant fix for autosuggestion covering toolbar

---
 .../_components/compose/ComposeAutosuggest.html  | 16 ++++++++++++----
 routes/_components/compose/ComposeToolbar.html   | 10 +---------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/routes/_components/compose/ComposeAutosuggest.html b/routes/_components/compose/ComposeAutosuggest.html
index 7d209b3..51e3e5c 100644
--- a/routes/_components/compose/ComposeAutosuggest.html
+++ b/routes/_components/compose/ComposeAutosuggest.html
@@ -1,5 +1,5 @@
-<div class="compose-autosuggest {{shown ? 'shown' : ''}}"
-     aria-hidden="true" >
+<div class="compose-autosuggest {{shown ? 'shown' : ''}} {{realm === 'dialog' ? 'is-dialog' : ''}}"
+       aria-hidden="true" >
   <ComposeAutosuggestionList
     items="{{searchResults}}"
     on:click="onClick(event)"
@@ -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);
     }
   }
diff --git a/routes/_components/compose/ComposeToolbar.html b/routes/_components/compose/ComposeToolbar.html
index 49af8a9..fcc0b13 100644
--- a/routes/_components/compose/ComposeToolbar.html
+++ b/routes/_components/compose/ComposeToolbar.html
@@ -30,9 +30,7 @@
          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>
+  <ComposeAutosuggest :realm :text />
 </div>
 <style>
   .compose-box-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'