From 8d642c478563cf6d0c1111361d49a1371fb805ce Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Mon, 12 Feb 2024 23:02:25 -0800
Subject: [PATCH] garbage mobile fix

---
 src/app/components/MobileMenu.tsx        |  7 ++-
 src/app/components/News.tsx              |  2 +-
 src/app/components/SearchBar.tsx         |  5 +-
 src/app/components/mobileMenu.module.css | 10 +++-
 src/app/container/container.module.css   | 12 +++-
 src/app/layout.tsx                       | 74 +++++++++++++-----------
 src/app/search/page.tsx                  |  3 +-
 7 files changed, 68 insertions(+), 45 deletions(-)

diff --git a/src/app/components/MobileMenu.tsx b/src/app/components/MobileMenu.tsx
index 443fa61..da47680 100644
--- a/src/app/components/MobileMenu.tsx
+++ b/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,
diff --git a/src/app/components/News.tsx b/src/app/components/News.tsx
index 93e0683..b36dfd0 100644
--- a/src/app/components/News.tsx
+++ b/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>
diff --git a/src/app/components/SearchBar.tsx b/src/app/components/SearchBar.tsx
index 628e7bc..6f6b562 100644
--- a/src/app/components/SearchBar.tsx
+++ b/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>) => {
diff --git a/src/app/components/mobileMenu.module.css b/src/app/components/mobileMenu.module.css
index c0eaf24..18806f6 100644
--- a/src/app/components/mobileMenu.module.css
+++ b/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 transition-transform duration-300 ease-in-out;
+  @apply overflow-hidden left-[0] top-[235px] z-10 absolute bg-slate-200;
+  @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;
 }
diff --git a/src/app/container/container.module.css b/src/app/container/container.module.css
index e12e5b9..cc9ea11 100644
--- a/src/app/container/container.module.css
+++ b/src/app/container/container.module.css
@@ -1,3 +1,11 @@
-.container {
-  min-height: calc(100vh - 400px);
+/* @media only screen and (min-width: 48em) {
+  .container {
+    min-height: calc(100vh - 400px);
+  }
 }
+
+@media only screen and (max-width: 48em) {
+  .container {
+    min-height: 400px;
+  }
+} */
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2ff9b1e..490a118 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -71,42 +71,46 @@ export default function RootLayout({
               </div>
             </div>
           </div>
-          <Container>{children}</Container>
-          <footer>
-            <div className={styles.footerContent}>
-              <ul>
-                <li key='about'>
-                  <Link href='/about'>About</Link>
-                </li>
-                <li key='help'>
-                  <Link href='/help'>Help</Link>
-                </li>
-                <li key='contact'>
-                  <Link href='/contact'>Contact</Link>
-                </li>
-                <li key='subscribe'>
-                  <Link href='/subscribe'>Subscribe</Link>
-                </li>
-                <li key='copyright'>
-                  <Link href='/legal/copyright'>Copyright</Link>
-                </li>
-                <li key='privacy'>
-                  <Link href='/legal/privacy'>Privacy Policy</Link>
-                </li>
-                <li key='accessibility'>
-                  <Link href='/help/accessibility'>Accessibility</Link>
-                </li>
-                <li key='status'>
-                  <Link href='/status'>eeXiv status</Link>
-                </li>
-                <li key='notifications'>
-                  <Link href='/status/notifications'>
-                    Get status notifications
-                  </Link>
-                </li>
-              </ul>
+          <div className='flex min-h-[72vh] flex-col'>
+            <div className='flex-grow'>
+              <Container>{children}</Container>
             </div>
-          </footer>
+            <footer className='bottom-0'>
+              <div className={styles.footerContent}>
+                <ul>
+                  <li key='about'>
+                    <Link href='/about'>About</Link>
+                  </li>
+                  <li key='help'>
+                    <Link href='/help'>Help</Link>
+                  </li>
+                  <li key='contact'>
+                    <Link href='/contact'>Contact</Link>
+                  </li>
+                  <li key='subscribe'>
+                    <Link href='/subscribe'>Subscribe</Link>
+                  </li>
+                  <li key='copyright'>
+                    <Link href='/legal/copyright'>Copyright</Link>
+                  </li>
+                  <li key='privacy'>
+                    <Link href='/legal/privacy'>Privacy Policy</Link>
+                  </li>
+                  <li key='accessibility'>
+                    <Link href='/help/accessibility'>Accessibility</Link>
+                  </li>
+                  <li key='status'>
+                    <Link href='/status'>eeXiv status</Link>
+                  </li>
+                  <li key='notifications'>
+                    <Link href='/status/notifications'>
+                      Get status notifications
+                    </Link>
+                  </li>
+                </ul>
+              </div>
+            </footer>
+          </div>
         </Providers>
       </body>
     </html>
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index b33404b..3445007 100644
--- a/src/app/search/page.tsx
+++ b/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'] })