From fbed5b8ac8913d7e050d571adfce5e665ad320eb Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 24 Sep 2019 00:50:25 -0700
Subject: [PATCH] fix: improve autosuggest styles on small screens (#1529)

---
 .../_components/compose/ComposeAutosuggest.html       | 11 +++++++++++
 .../compose/ComposeAutosuggestionList.html            | 11 ++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/routes/_components/compose/ComposeAutosuggest.html b/src/routes/_components/compose/ComposeAutosuggest.html
index cd3c7024..84836d61 100644
--- a/src/routes/_components/compose/ComposeAutosuggest.html
+++ b/src/routes/_components/compose/ComposeAutosuggest.html
@@ -46,6 +46,17 @@
     }
   }
 
+  @media (max-width: 240px) {
+    .compose-autosuggest {
+      width: calc(100vw - 10px);
+      transform: translateX(-29px); /* avatar size 24px + 5px padding */
+    }
+    .compose-autosuggest.is-dialog {
+      transform: translateX(-34px); /* avatar size 24px + 10px padding */
+      width: calc(100vw - 20px); /* extra padding when within the dialog */
+    }
+  }
+
 </style>
 <script>
   import { store } from '../../_store/store'
diff --git a/src/routes/_components/compose/ComposeAutosuggestionList.html b/src/routes/_components/compose/ComposeAutosuggestionList.html
index ff42a512..3748ed3d 100644
--- a/src/routes/_components/compose/ComposeAutosuggestionList.html
+++ b/src/routes/_components/compose/ComposeAutosuggestionList.html
@@ -15,7 +15,7 @@
         {#if type === 'account'}
         <div class="compose-autosuggest-list-item-avatar">
           <Avatar
-            size="small"
+            size="{$isVeryTinyMobileSize ? 'extra-small' : 'small'}"
             account={item}
           />
         </div>
@@ -100,6 +100,15 @@
   .compose-autosuggest-list-item:active {
     background: var(--compose-autosuggest-item-active);
   }
+
+  @media (max-width: 320px) {
+    .compose-autosuggest-list-item {
+      padding: 5px;
+    }
+    .compose-autosuggest-list-grid {
+      grid-column-gap: 5px;
+    }
+  }
 </style>
 <script>
   import Avatar from '../Avatar.html'