From 9a3f72508cfac5264230bcb42492b10e714a1f2c Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 12 Aug 2022 10:36:28 +0200
Subject: [PATCH] Move search bar at the middle of the header

---
 client/src/app/header/header.component.html         |  2 +-
 client/src/app/header/header.component.scss         |  8 --------
 .../src/app/header/search-typeahead.component.scss  | 13 +++++++------
 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) {
+    input {
+      width: 200px;
+    }
   }
 
-  @media screen and (max-width: $small-view) {
-    flex: 1;
-
+  @media screen and (max-width: $mobile-view) {
     input {
-      width: 70px;
+      width: 150px;
     }
   }