From 12cc1ec29b58579a61f23bcc1a14539d4f085d5c Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Wed, 14 Feb 2024 16:51:00 -0800
Subject: [PATCH] finally fix mobile styling

---
 src/app/components/MobileMenu.tsx        | 22 ++++++++++++----------
 src/app/components/SearchBar.tsx         |  6 +++---
 src/app/components/mobileMenu.module.css |  9 ++++-----
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/app/components/MobileMenu.tsx b/src/app/components/MobileMenu.tsx
index 1f703b7..cce51f1 100644
--- a/src/app/components/MobileMenu.tsx
+++ b/src/app/components/MobileMenu.tsx
@@ -31,19 +31,21 @@ export default function MobileMenu() {
   }
 
   return (
-    <div className='w-20'>
-      <button
-        className='p-2 rounded-xl hover:bg-blue-400'
-        onClick={handleClick}
-      >
-        <RxHamburgerMenu size={40} />
-      </button>
+    <>
+      <div className='w-20'>
+        <button
+          className='p-2 rounded-xl hover:bg-blue-400'
+          onClick={handleClick}
+        >
+          <RxHamburgerMenu size={40} />
+        </button>
+      </div>
       <div
         className={`${isOpen ? '' : styles['menu-hidden']} ${styles.menu} shadow-md shadow-slate-300`}
       >
-        <span className={styles['search-bar']}>
+        <div className={styles['search-bar']}>
           <SearchBar onSubmit={handleSubmit} />
-        </span>
+        </div>
         <p className='text-slate-600 mx-4 my-4'>
           We gratefully acknowledge support from our volunteer peer reviewers,
           member institutions, and all{' '}
@@ -56,6 +58,6 @@ export default function MobileMenu() {
           .
         </p>
       </div>
-    </div>
+    </>
   )
 }
diff --git a/src/app/components/SearchBar.tsx b/src/app/components/SearchBar.tsx
index 20f7eec..a1dfee0 100644
--- a/src/app/components/SearchBar.tsx
+++ b/src/app/components/SearchBar.tsx
@@ -25,10 +25,10 @@ export default function SearchBar({
   }
 
   return (
-    <div className='w-full flex flex-nowrap'>
+    <div className='mx-2 flex flex-nowrap gap-2'>
       <input
         type='text'
-        className='py-3 px-5 rounded-xl text-slate-800 flex-grow'
+        className='py-3 px-5 rounded-xl text-slate-800 flex-grow flex-shrink min-w-0'
         name='q'
         placeholder='Search...'
         onChange={handleInputChange}
@@ -37,7 +37,7 @@ export default function SearchBar({
       />
       <button
         type='submit'
-        className='p-2.5 mx-4 border-2 rounded-xl hover:bg-blue-300 flex-shrink'
+        className='p-2.5 border-2 rounded-xl hover:bg-blue-300 flex-shrink'
         onClick={handleClick}
       >
         Search
diff --git a/src/app/components/mobileMenu.module.css b/src/app/components/mobileMenu.module.css
index fce92ec..ba6fdc9 100644
--- a/src/app/components/mobileMenu.module.css
+++ b/src/app/components/mobileMenu.module.css
@@ -1,14 +1,13 @@
 .menu {
-  @apply overflow-hidden left-[0] top-[235px] z-10 absolute bg-slate-200;
-  @apply duration-300;
-  height: calc(200px);
+  @apply overflow-hidden top-[235px] z-10 absolute bg-slate-200;
+  height: 180px;
   transition: height 0.2s ease-in-out;
   width: 100vw;
-  right: 0;
+  left: 0;
 }
 
 .search-bar {
-  @apply w-full flex justify-center z-10 px-4 py-2 bg-slate-300;
+  @apply z-10 mt-2 mx-[2px] sm:m-2;
 }
 
 .search-bar button {