From e530533f9e5f4bc5c6e823747293077756ece992 Mon Sep 17 00:00:00 2001
From: Chandan Jal <97095857+ChandanJal@users.noreply.github.com>
Date: Tue, 4 Jul 2023 23:13:31 +0530
Subject: [PATCH] fix: layout of tabs on Pages is not adaptable to mobile
 screens #1380 (#1400)

* fix: layout of tabs on Pages is not adaptable to mobile screens #1380

* fix: scrolling experience on page
---
 .../projects/[projectId]/pages/index.tsx      | 46 ++++++++++---------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index a51c8b44f..f76c7f7e4 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -124,7 +124,29 @@ const ProjectPages: NextPage = () => {
         }
       >
         <div className="space-y-5 p-8 h-full overflow-hidden flex flex-col">
-          <h3 className="text-2xl font-semibold text-brand-base">Pages</h3>
+          <div className="flex gap-4 justify-between">
+            <h3 className="text-2xl font-semibold text-brand-base">Pages</h3>
+            <div className="flex gap-x-1">
+              <button
+                type="button"
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+                  viewType === "list" ? "bg-brand-surface-2" : ""
+                }`}
+                onClick={() => setViewType("list")}
+              >
+                <ListBulletIcon className="h-4 w-4" />
+              </button>
+              <button
+                type="button"
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+                  viewType === "detailed" ? "bg-brand-surface-2" : ""
+                }`}
+                onClick={() => setViewType("detailed")}
+              >
+                <Squares2X2Icon className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
           <Tab.Group
             as={Fragment}
             defaultIndex={currentTabValue(pageTab)}
@@ -147,7 +169,7 @@ const ProjectPages: NextPage = () => {
             }}
           >
             <Tab.List as="div" className="mb-6 flex items-center justify-between">
-              <div className="flex gap-4">
+              <div className="flex gap-4 items-center flex-wrap">
                 {tabsList.map((tab, index) => (
                   <Tab
                     key={`${tab}-${index}`}
@@ -163,26 +185,6 @@ const ProjectPages: NextPage = () => {
                   </Tab>
                 ))}
               </div>
-              <div className="flex gap-x-1">
-                <button
-                  type="button"
-                  className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-                    viewType === "list" ? "bg-brand-surface-2" : ""
-                  }`}
-                  onClick={() => setViewType("list")}
-                >
-                  <ListBulletIcon className="h-4 w-4" />
-                </button>
-                <button
-                  type="button"
-                  className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-                    viewType === "detailed" ? "bg-brand-surface-2" : ""
-                  }`}
-                  onClick={() => setViewType("detailed")}
-                >
-                  <Squares2X2Icon className="h-4 w-4" />
-                </button>
-              </div>
             </Tab.List>
             <Tab.Panels as={Fragment}>
               <Tab.Panel as="div" className="h-full overflow-y-auto space-y-5">