From bd5b2711859dc96df62c117f7d2eceb802ded292 Mon Sep 17 00:00:00 2001
From: Chandan Jal <chandan.jal.code@gmail.com>
Date: Mon, 26 Jun 2023 16:32:54 +0530
Subject: [PATCH 1/2] fix: layout of tabs on Pages is not adaptable to mobile
 screens #1380

---
 apps/app/components/pages/pages-view.tsx      |  2 +-
 .../projects/[projectId]/pages/index.tsx      | 46 ++++++++++---------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/apps/app/components/pages/pages-view.tsx b/apps/app/components/pages/pages-view.tsx
index 7d1eac724d6..f21918a0dc4 100644
--- a/apps/app/components/pages/pages-view.tsx
+++ b/apps/app/components/pages/pages-view.tsx
@@ -205,7 +205,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
         user={user}
       />
       {pages ? (
-        <div className="space-y-4 h-full overflow-y-auto">
+        <div className="space-y-4 h-full">
           {pages.length > 0 ? (
             viewType === "list" ? (
               <ul role="list" className="divide-y divide-brand-base">
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index a51c8b44f7f..f76c7f7e441 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">

From a5acfcd0dc3c999c09af565d6b98b467df06cd4e Mon Sep 17 00:00:00 2001
From: Chandan Jal <chandan.jal.code@gmail.com>
Date: Fri, 30 Jun 2023 14:38:10 +0530
Subject: [PATCH 2/2] fix: scrolling experience on page

---
 apps/app/components/pages/pages-view.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/components/pages/pages-view.tsx b/apps/app/components/pages/pages-view.tsx
index f21918a0dc4..7d1eac724d6 100644
--- a/apps/app/components/pages/pages-view.tsx
+++ b/apps/app/components/pages/pages-view.tsx
@@ -205,7 +205,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
         user={user}
       />
       {pages ? (
-        <div className="space-y-4 h-full">
+        <div className="space-y-4 h-full overflow-y-auto">
           {pages.length > 0 ? (
             viewType === "list" ? (
               <ul role="list" className="divide-y divide-brand-base">