From a06249a37005370bacde96d9ae74582d9d1eae15 Mon Sep 17 00:00:00 2001
From: Nishant Dixit <nd221619@gmail.com>
Date: Wed, 23 Aug 2023 01:57:47 +0530
Subject: [PATCH] Fix Bug #2087 Improper button layout

---
 components/Hero.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Hero.js b/components/Hero.js
index 7a59ef6244b..2d058a8f190 100644
--- a/components/Hero.js
+++ b/components/Hero.js
@@ -32,13 +32,13 @@ export default function Hero({ className = '' }) {
             {t('main.body_pretext')}{" "}
             <strong>{t('main.body_boldtext')}</strong>{t('main.body_posttext')}
           </Heading>
-          <div className='flex flex-row items-center justify-center'>
+          <div className=' sm:flex flex-row items-center justify-center'>
             <Button className="block md:inline-block" text={t('main.docs_btn')} href="/docs" icon={<ArrowRight className="-mb-1 h-5 w-5" />}
               data-testid="Hero-Button" />
             {/* Wrap SearchButton with AlgoliaSearch component */}
             <AlgoliaSearch>
               <SearchButton
-                className="sm:flex items-center text-left space-x-3 px-4 py-3 ml-2 bg-white border-secondary-500 border text-secondary-500 hover:text-white shadow-md bg-secondary-100 hover:bg-secondary-500 transition-all duration-500 ease-in-out rounded-md"
+                className="flex items-center text-left mt-4 sm:mt-0  space-x-3 px-4 py-3 sm:ml-2  sm:w-auto w-full border-secondary-500 border text-secondary-500 hover:text-white shadow-md bg-secondary-100 hover:bg-secondary-500 transition-all duration-500 ease-in-out rounded-md"
               >
                 {({ actionKey }) => (
                   <>