garbage mobile fix

src/app/components/MobileMenu.tsx

@@ -32,6 +32,11 @@ export default function MobileMenu() {
     }
   }
 
+  const handleSubmit = () => {
+    setIsOpen(false)
+    document.body.style.overflow = 'auto'
+  }
+
   return (
     <div className='w-20'>
       <button
@@ -42,7 +47,7 @@ export default function MobileMenu() {
       </button>
       <div className={`${isOpen ? '' : styles['menu-hidden']} ${styles.menu}`}>
         <span className={styles['search-bar']}>
-          <SearchBar />
+          <SearchBar onSubmit={handleSubmit} />
         </span>
         <p className='text-slate-600 mx-4 my-4'>
           We gratefully acknowledge support from our volunteer peer reviewers,

src/app/components/News.tsx

@@ -14,7 +14,7 @@ export default function News() {
       <ul className='text-slate-50 px-6 list-disc'>
         <li key={1}>
           eeXiv 2.0 has been released! The site should feel significantly more
-          responsive. Data cacheing has also been implemented so search results
+          responsive. Data caching has also been implemented so search results
           and documents will load instantly the second time.
         </li>
         <li key={2}>Mobile support is currently in beta.</li>

src/app/components/SearchBar.tsx

@@ -2,12 +2,15 @@
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 
-export default function SearchBar() {
+export default function SearchBar({
+  onSubmit,
+}: Readonly<{ onSubmit?: () => void }>) {
   const [searchInput, setSearchInput] = useState('')
   const router = useRouter()
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     router.push(`/search?q=${encodeURIComponent(searchInput)}`)
+    onSubmit && onSubmit()
   }
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {

src/app/components/mobileMenu.module.css

@@ -1,6 +1,10 @@
 .menu {
-  @apply w-[100vw] h-full overflow-x-hidden left-[0] top-[235px] z-10 absolute bg-slate-200;
+  @apply overflow-hidden left-[0] top-[235px] z-10 absolute bg-slate-200;
-  @apply transition-transform duration-300 ease-in-out;
+  @apply duration-300;
+  height: calc(200px);
+  transition: width 0.5s ease-in-out;
+  width: 100vw;
+  right: 0;
 }
 
 .search-bar {
@@ -12,5 +16,5 @@
 }
 
 .menu-hidden {
-  @apply translate-y-[100vh] invisible;
+  width: 0;
 }

src/app/container/container.module.css

@@ -1,3 +1,11 @@
-.container {
+/* @media only screen and (min-width: 48em) {
+  .container {
     min-height: calc(100vh - 400px);
+  }
 }
+
+@media only screen and (max-width: 48em) {
+  .container {
+    min-height: 400px;
+  }
+} */

src/app/layout.tsx

@@ -71,8 +71,11 @@ export default function RootLayout({
               </div>
             </div>
           </div>
+          <div className='flex min-h-[72vh] flex-col'>
+            <div className='flex-grow'>
               <Container>{children}</Container>
-          <footer>
+            </div>
+            <footer className='bottom-0'>
               <div className={styles.footerContent}>
                 <ul>
                   <li key='about'>
@@ -107,6 +110,7 @@ export default function RootLayout({
                 </ul>
               </div>
             </footer>
+          </div>
         </Providers>
       </body>
     </html>

src/app/search/page.tsx

@@ -1,12 +1,11 @@
 'use client'
-import { useSearchParams } from 'next/navigation'
+import { useSearchParams, useRouter } from 'next/navigation'
 import { Zilla_Slab } from 'next/font/google'
 import { Topics, Authors } from '@/app/components/DataDisplay'
 import { Status, ItemBadge } from '@/app/components/Badges'
 import { epoch2datestring } from '../utils/epoch2datestring'
 import searchDocs, { CustomSearchResult } from '@/app/utils/searchDocs'
 import { useSuspenseQuery } from '@tanstack/react-query'
-import { useRouter } from 'next/navigation'
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500', '700'] })