Move search bar at the middle of the header

diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index f49f471c6f8a31644e7f3e29e79afba0ae6836ad..b5e9e3dd860d50ec900fe16afec5273396e534f2 100644 (file)
--- 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 8a4111c5a30048ae3adee1552bbbbb0f4bc0c039..cf6e96d07389c0289353a481777cf7d3351e5a9b 100644 (file)
--- 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 299efba2c34d76b8125831275ac409df1bf94c07..ae0f1547e661ee987a3879cf2553052423e31b1a 100644 (file)
--- 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;
     }
   }