Move search bar at the middle of the header

client/src/app/header/header.component.html

@@ -1,4 +1,4 @@
-<my-search-typeahead class="w-100 d-flex justify-content-end"></my-search-typeahead>
+<my-search-typeahead class="w-100 d-flex justify-content-center"></my-search-typeahead>
 
 <a class="publish-button" routerLink="/videos/upload">
   <my-global-icon iconName="upload" aria-hidden="true"></my-global-icon>

client/src/app/header/header.component.scss

@@ -1,14 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-my-search-typeahead {
-  @include margin-right(80px);
-
-  @media screen and (max-width: $small-view) {
-    @include margin-right(15px);
-  }
-}
-
 .publish-button {
   @include peertube-button-link;
   @include orange-button;

client/src/app/header/search-typeahead.component.scss

@@ -75,6 +75,7 @@ li.suggestion {
 
 #typeahead-container {
   font-size: 14px;
+  margin: 0 10px;
 
   input {
     border: 1px solid pvar(--mainBackgroundColor) !important;
@@ -83,15 +84,15 @@ li.suggestion {
     transition: box-shadow .3s ease, width .2s ease;
   }
 
-  @media screen and (min-width: $mobile-view) {
-    @include margin-left(10px);
-  }
-
   @media screen and (max-width: $small-view) {
-    flex: 1;
+    input {
+      width: 200px;
+    }
+  }
 
+  @media screen and (max-width: $mobile-view) {
     input {
-      width: 70px;
+      width: 150px;
     }
   }