From 3a5a75314e5a51fc956309642da832f01e83149c Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Tue, 4 Jan 2022 20:19:48 -0800
Subject: [PATCH] updated to css grid to avoid flicker

---
 app/containers/cdp/cdp.component.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/app/containers/cdp/cdp.component.tsx b/app/containers/cdp/cdp.component.tsx
index d56f07c..70e31fb 100644
--- a/app/containers/cdp/cdp.component.tsx
+++ b/app/containers/cdp/cdp.component.tsx
@@ -91,8 +91,8 @@ export default function CDP() {
   };
 
   return (
-    <main className="lg:flex">
-      <nav className="hidden lg:block w-[20%] max-w-xs py-8 pl-6 pr-16">
+    <main className="lg:grid gap-6 grid-cols-12">
+      <nav className="hidden lg:block col-span-2 py-8 pl-6">
         <h1 className="text-lg font-semibold">Categories</h1>
         <ul>
           {categories.map((cat) => (
@@ -143,10 +143,7 @@ export default function CDP() {
           ))}
         </ul>
       </nav>
-      <Form
-        ref={formRef}
-        className="p-4 border-b border-zinc-700 lg:hidden lg:flex-1"
-      >
+      <Form ref={formRef} className="p-4 border-b border-zinc-700 lg:hidden">
         <label>
           <span className="sr-only">Categories</span>
           <select
@@ -186,7 +183,7 @@ export default function CDP() {
         </noscript>
       </Form>
 
-      <article className="sm:px-4 lg:px-0 lg:pr-6 mb-8">
+      <article className="sm:px-4 lg:px-0 lg:pr-6 mb-8 col-start-3 col-span-10">
         <p className="pl-4 mt-4 mb-8">
           Showing {products.length} results
           {search ? ` for "${search}"` : ""}