style tweaks

routes/_components/search/AccountSearchResult.html

@@ -36,6 +36,11 @@
     text-overflow: ellipsis;
     color: var(--deemphasized-text-color);
   }
+  @media (max-width: 767px) {
+    .search-result-account {
+      grid-column-gap: 10px;
+    }
+  }
 </style>
 <script>
   import Avatar from '../status/Avatar.html'

routes/_components/search/SearchResult.html

@@ -16,6 +16,8 @@
     padding: 20px;
     flex: 1;
     background: var(--settings-list-item-bg);
+  }
+  .search-result-anchor, .search-result-anchor:visited {
     color: var(--body-text-color);
   }
   .search-result-anchor:hover {
@@ -25,4 +27,10 @@
   .search-result-anchor:active {
     background: var(--settings-list-item-bg-active);
   }
+
+  @media (max-width: 767px) {
+    .search-result-anchor {
+      padding: 15px 10px;
+    }
+  }
 </style>

routes/settings/instances/add.html

@@ -23,7 +23,7 @@
       {{/if}}
 
       <label for="instanceInput">Instance:</label>
-      <input class="new-instance-input" type="url" id="instanceInput"
+      <input class="new-instance-input" type="text" id="instanceInput"
              bind:value='$instanceNameInSearch' placeholder='' required
       >
       <button class="primary" type="submit" id="submitButton" disabled="{{!$instanceNameInSearch}}">Add instance</button>