From bfad562f74aca1dfe2db713fefc089debc31cf35 Mon Sep 17 00:00:00 2001
From: Vitaly Raicheu <vitaly.raichev@epicmax.co>
Date: Fri, 28 Apr 2023 13:38:46 +0300
Subject: [PATCH] fix(#3380): styling AlgoliaSearch component

---
 packages/docs/components/AlgoliaSearch.vue | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/docs/components/AlgoliaSearch.vue b/packages/docs/components/AlgoliaSearch.vue
index 643e2ab541..edd36dc487 100644
--- a/packages/docs/components/AlgoliaSearch.vue
+++ b/packages/docs/components/AlgoliaSearch.vue
@@ -8,7 +8,7 @@
 <script lang="ts" setup>
 import docsearch from '@docsearch/js'
 import { useI18n } from 'vue-i18n'
-import { onMounted, unref as _unref } from 'vue'
+import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
 const { locale } = useI18n()
@@ -120,10 +120,12 @@ onMounted(() => {
   flex-grow: 1;
   display: flex;
 
+  @include xs(flex-grow, 0);
+
   .DocSearch-Button {
     margin-left: 0;
     flex-grow: 1;
-    max-width: 320px;
+    max-width: 20rem;
     border-radius: var(--va-input-border-radius);
     background-color: var(--va-background-element);
 
@@ -136,11 +138,10 @@ onMounted(() => {
   }
 
   .DocSearch-Button-Placeholder {
+    color: v-bind(placeholderColor);
+
     @include md(display, block);
     @include xs(display, none);
-
-    // TODO: This Vbind breaks build !
-    color: v-bind(placeholderColor);
   }
 
   .DocSearch-Button-Keys {
@@ -153,10 +154,6 @@ onMounted(() => {
       @include sm(color, var(--va-primary));
     }
   }
-
-  @media screen and (max-width: $break_xs) {
-    flex-grow: 0;
-  }
 }
 
 .DocSearch-Modal {