fix: improve autosuggest styles on small screens (#1529)

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'

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'