From 226d02ea59f8a6773a400fec341186f9f241226d Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Wed, 6 Mar 2024 14:29:28 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20chore:=20change=20media=20query?=
 =?UTF-8?q?=20to=20lg?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/org-slug/projects/create/Template.tsx  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
index 1f4236ff..682d1f48 100644
--- a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx
@@ -20,7 +20,7 @@ import { useMediaQuery } from 'usehooks-ts';
 const CreateWithTemplate = () => {
   const { orgSlug } = useParams();
 
-  const isDesktopView = useMediaQuery('(min-width: 720px)'); // md:
+  const isDesktopView = useMediaQuery('(min-width: 960px)'); // lg:
   const stepsOrientation = isDesktopView ? 'vertical' : 'horizontal';
 
   const stepperValues = [
@@ -51,8 +51,8 @@ const CreateWithTemplate = () => {
   );
 
   return (
-    <div className="flex flex-col items-center gap-6 md:gap-10">
-      <div className="flex flex-col lg:flex-row justify-between w-5/6 my-4 bg-base-bg-alternate rounded-xl p-6 gap-3 items-start lg:items-center">
+    <div className="flex flex-col items-center gap-6 lg:gap-10 mx-auto w-full lg:w-5/6">
+      <div className="flex flex-col lg:flex-row justify-between w-full my-4 bg-base-bg-alternate rounded-xl p-6 gap-3 items-start lg:items-center">
         <div className="flex items-center gap-3">
           <TemplateIcon type={template?.icon as TemplateIconType} size={48} />
           <Heading className="font-medium">{template?.name}</Heading>
@@ -73,15 +73,15 @@ const CreateWithTemplate = () => {
           </a>
         </div>
       </div>
-      <div className="grid grid-cols-3 w-5/6 p-0 md:p-6 gap-8 md:gap-0">
-        <div className="col-span-3 md:col-span-1">
+      <div className="grid grid-cols-3 p-0 lg:p-6 w-full gap-8 lg:gap-0">
+        <div className="col-span-3 lg:col-span-1">
           <Steps
             orientation={stepsOrientation}
             currentIndex={activeStep}
             steps={stepperValues}
           />
         </div>
-        <div className="col-span-3 md:col-span-2">
+        <div className="col-span-3 lg:col-span-2">
           <Outlet context={{ template }} />
         </div>
       </div>