finally fix mobile styling

src/app/components/MobileMenu.tsx

@@ -31,6 +31,7 @@ export default function MobileMenu() {
   }
 
   return (
+    <>
       <div className='w-20'>
         <button
           className='p-2 rounded-xl hover:bg-blue-400'
@@ -38,12 +39,13 @@ export default function MobileMenu() {
         >
           <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>
+    </>
   )
 }

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

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 {