From 06902acc47100e14c8aaabeff990297ee9962805 Mon Sep 17 00:00:00 2001
From: georgekaran <georgekaran12@gmail.com>
Date: Tue, 3 Nov 2020 15:00:31 -0300
Subject: [PATCH] fix: ensure search layout dont break on mobile

---
 pages/search.tsx | 81 +++++++++++++++++++++++++++++++-----------------
 1 file changed, 53 insertions(+), 28 deletions(-)

diff --git a/pages/search.tsx b/pages/search.tsx
index bb892bdaf..1696d542f 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -39,6 +39,41 @@ const SORT = Object.entries({
   'price-desc': 'Price: High to low',
 })
 
+type SortItemsProps = {
+  q: string | string[] | undefined
+  sort: string | string[] | undefined
+  pathname: string
+}
+
+const SortItems = ({ pathname, sort, q }:SortItemsProps) => {
+  return (
+    <>
+      <li className="py-1 text-sm sm:text-base font-bold tracking-wide">Sort</li>
+      <li
+        className={cn('py-1 text-accents-8 text-sm sm:text-base', {
+          underline: !sort,
+        })}
+      >
+        <Link href={{ pathname, query: filterQuery({ q }) }}>
+          <a>Relevance</a>
+        </Link>
+      </li>
+      {SORT.map(([key, text]) => (
+        <li
+          key={key}
+          className={cn('py-1 text-accents-8 text-sm sm:text-base', {
+            underline: sort === key,
+          })}
+        >
+          <Link href={{ pathname, query: filterQuery({ q, sort: key }) }}>
+            <a>{text}</a>
+          </Link>
+        </li>
+      ))}
+    </>
+  )
+}
+
 export default function Search({
   categories,
   brands,
@@ -69,9 +104,16 @@ export default function Search({
   return (
     <Container>
       <div className="grid grid-cols-12 gap-4 mt-3 mb-20">
-        <div className="col-span-2">
+        <div className="col-span-4 sm:col-span-2">
+          <ul className="block sm:hidden mb-10">
+            <SortItems 
+              pathname={pathname}
+              q={q}
+              sort={sort}
+            />
+          </ul>
           <ul className="mb-10">
-            <li className="py-1 text-base font-bold tracking-wide">
+            <li className="py-1 text-sm sm:text-base font-bold tracking-wide">
               <Link href={{ pathname: getCategoryPath('', brand), query }}>
                 <a>All Categories</a>
               </Link>
@@ -79,7 +121,7 @@ export default function Search({
             {categories.map((cat) => (
               <li
                 key={cat.path}
-                className={cn('py-1 text-accents-8', {
+                className={cn('py-1 text-accents-8 text-sm sm:text-base', {
                   underline: activeCategory?.entityId === cat.entityId,
                 })}
               >
@@ -95,7 +137,7 @@ export default function Search({
             ))}
           </ul>
           <ul>
-            <li className="py-1 text-base font-bold tracking-wide">
+            <li className="py-1 text-sm sm:text-base font-bold tracking-wide">
               <Link href={{ pathname: getDesignerPath('', category), query }}>
                 <a>All Designers</a>
               </Link>
@@ -103,7 +145,7 @@ export default function Search({
             {brands.flatMap(({ node }) => (
               <li
                 key={node.path}
-                className={cn('py-1 text-accents-8', {
+                className={cn('py-1 text-accents-8 text-sm sm:text-base', {
                   underline: activeBrand?.entityId === node.entityId,
                 })}
               >
@@ -190,30 +232,13 @@ export default function Search({
             </Grid>
           )}
         </div>
-        <div className="col-span-2">
+        <div className="hidden sm:block col-span-2">
           <ul>
-            <li className="py-1 text-base font-bold tracking-wide">Sort</li>
-            <li
-              className={cn('py-1 text-accents-8', {
-                underline: !sort,
-              })}
-            >
-              <Link href={{ pathname, query: filterQuery({ q }) }}>
-                <a>Relevance</a>
-              </Link>
-            </li>
-            {SORT.map(([key, text]) => (
-              <li
-                key={key}
-                className={cn('py-1 text-accents-8', {
-                  underline: sort === key,
-                })}
-              >
-                <Link href={{ pathname, query: filterQuery({ q, sort: key }) }}>
-                  <a>{text}</a>
-                </Link>
-              </li>
-            ))}
+            <SortItems 
+              pathname={pathname}
+              q={q}
+              sort={sort}
+            />
           </ul>
         </div>
       </div>