4 files changed, 13 insertions, 15 deletions

diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index de483086b..8a4111c5a 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -2,7 +2,11 @@
 @use '_mixins' as *;
 
 my-search-typeahead {
-  @include margin-right(15px);
+  @include margin-right(80px);
+
+  @media screen and (max-width: $small-view) {
+    @include margin-right(15px);
+  }
 }
 
 .publish-button {
@@ -11,7 +15,7 @@ my-search-typeahead {
   @include button-with-icon(22px, 3px, -1px);
   @include margin-right(25px);
 
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: $mobile-view) {
     @include margin-right(10px);
 
     padding: 0 10px;
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html
index 7a9b6c51f..783b4b53b 100644
--- a/client/src/app/header/search-typeahead.component.html
+++ b/client/src/app/header/search-typeahead.component.html
@@ -25,8 +25,7 @@
       <div class="d-flex justify-content-between">
         <label class="small-title" i18n>GLOBAL SEARCH</label>
         <div class="advanced-search-status muted">
-          <span *ngIf="serverConfig" class="mr-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
-          <i class="glyphicon glyphicon-globe"></i>
+          <span *ngIf="serverConfig" class="me-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
         </div>
       </div>
       <div class="muted" i18n>Results will be augmented with those of a third-party index. Only data necessary to make the query will be sent.</div>
@@ -39,9 +38,8 @@
         <label class="small-title" i18n>ADVANCED SEARCH</label>
         <div class="advanced-search-status c-help">
           <span [ngClass]="canSearchAnyURI ? 'text-success' : 'muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows.">
-            <span *ngIf="canSearchAnyURI()" class="mr-1" i18n>any instance</span>
-            <span *ngIf="!canSearchAnyURI()" class="mr-1" i18n>only followed instances</span>
-            <i [ngClass]="canSearchAnyURI() ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i>
+            <span *ngIf="canSearchAnyURI()" class="me-1" i18n>any instance</span>
+            <span *ngIf="!canSearchAnyURI()" class="me-1" i18n>only followed instances</span>
           </span>
         </div>
       </div>
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index 5114ec3a7..e4c9c602c 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -129,10 +129,6 @@ li.suggestion {
   }
 }
 
-.glyphicon {
-  top: 3px;
-}
-
 .advanced-search-status {
   height: max-content;
   cursor: default;
diff --git a/client/src/app/header/suggestion.component.html b/client/src/app/header/suggestion.component.html
index 4ac9809e1..3f85ed6ae 100644
--- a/client/src/app/header/suggestion.component.html
+++ b/client/src/app/header/suggestion.component.html
@@ -1,16 +1,16 @@
 <a tabindex="-1" class="d-flex flex-auto flex-items-center p-2" [class.focus-visible]="active">
-  <div class="flex-shrink-0 mr-2 text-center">
+  <div class="flex-shrink-0 me-2 text-center">
     <my-global-icon iconName="search"></my-global-icon>
   </div>
 
-  <img class="avatar mr-2 flex-shrink-0 d-none" alt="" aria-label="Team" src="" width="28" height="28">
+  <img class="avatar me-2 flex-shrink-0 d-none" alt="" aria-label="Team" src="" width="28" height="28">
 
   <div
-    class="flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target"
+    class="flex-auto overflow-hidden text-start no-wrap css-truncate css-truncate-target"
     [attr.aria-label]="result.text" [innerHTML]="result.text | highlight : highlight"
   ></div>
 
-  <div class="border rounded flex-shrink-0 px-1 bg-gray text-gray-light ml-1 f6">
+  <div class="border rounded flex-shrink-0 px-1 bg-gray text-gray-light ms-1 f6">
     <span *ngIf="result.type === 'search-instance'" i18n>In this instance's network</span>
     <span *ngIf="result.type === 'search-index'" i18n>In the vidiverse</span>
   </div>