Move search bar at the middle of the header

3 files changed, 8 insertions, 15 deletions

diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index f49f471c6..b5e9e3dd8 100644
--- a/client/src/app/header/header.component.html
+++ b/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>
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index 8a4111c5a..cf6e96d07 100644
--- a/client/src/app/header/header.component.scss
+++ b/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;
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index 299efba2c..ae0f1547e 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/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;
     }
   }