From 297959026f6412fddf830e250a8f4dac20121adc Mon Sep 17 00:00:00 2001
From: Tushar Selvakumar <tusharkumar91111@gmail.com>
Date: Thu, 10 Jul 2025 22:19:13 +0530
Subject: [PATCH 1/2] fix: responsiveness

---
 src/views/Layout.tsx | 10 ++++++----
 src/views/Pages.tsx  | 31 ++++++++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/views/Layout.tsx b/src/views/Layout.tsx
index c7bbf59..c9fb55d 100644
--- a/src/views/Layout.tsx
+++ b/src/views/Layout.tsx
@@ -3,11 +3,13 @@ import { Outlet } from "@tanstack/react-router";
 
 export default function Layout() {
   return (
-    <div className="flex h-full w-full flex-col p-1">
+    <div className="flex h-screen w-full flex-col overflow-hidden p-1">
       <Navbar />
-      <div className="h-full w-full p-3 pt-1">
-        <div className="flex h-full flex-row justify-center gap-8 overflow-clip rounded-xl border-2 border-black bg-gray-200/60 dark:border-white dark:bg-gray-900">
-          <Outlet />
+      <div className="w-full flex-1 overflow-hidden p-3 pt-1">
+        <div className="h-full max-h-full w-full overflow-hidden rounded-xl border-2 border-black bg-gray-200/60 dark:border-white dark:bg-gray-900">
+          <div className="h-full w-full overflow-auto">
+            <Outlet />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/views/Pages.tsx b/src/views/Pages.tsx
index 00a8af8..03e4b26 100644
--- a/src/views/Pages.tsx
+++ b/src/views/Pages.tsx
@@ -109,7 +109,7 @@ export default function Pages() {
   }
 
   return (
-    <div className="mx-2 my-3 h-full w-full">
+    <div className="mx-2 my-3 flex flex-col">
       <TitleBar
         title="PAGES"
         extra={
@@ -149,6 +149,35 @@ export default function Pages() {
         ) : (
           <NoData name="Pages" />
         )}
+        {data?.data && data.data.length > 0 ? (
+          data?.data?.map((page) => (
+            <Card
+              key={page.page_id}
+              className="group h-fit max-h-28 w-fit max-w-72 cursor-pointer p-1 px-2 pt-2"
+            >
+              <div onClick={() => goToPage(page.page_id)}>
+                <CardContent className="flex w-full flex-col justify-end gap-3 py-2 text-sm">
+                  <CardTitle className="line-clamp-1 font-virgil">
+                    {page.name}
+                  </CardTitle>
+                  <h1 className="font-medium">
+                    Last updated on:{" "}
+                    {dayjs(page.updated_at).format("MMM DD, YYYY")}
+                  </h1>
+                </CardContent>
+              </div>
+              <div className="flex w-full items-end justify-end p-0.5">
+                <Trash2
+                  className="invisible h-4 w-4 cursor-pointer rounded-lg text-gray-600 transition-all hover:bg-gray-100 hover:text-red-500 group-hover:visible hover:dark:bg-gray-900"
+                  strokeWidth={3}
+                  onClick={() => handlePageDelete(page.page_id)}
+                />
+              </div>
+            </Card>
+          ))
+        ) : (
+          <NoData name="Pages" />
+        )}
       </div>
     </div>
   );

From 2514c24c6e5a0e5021cec7bc3743611eb0e17adf Mon Sep 17 00:00:00 2001
From: Tushar Selvakumar <tusharkumar91111@gmail.com>
Date: Thu, 10 Jul 2025 22:22:05 +0530
Subject: [PATCH 2/2] chore: removed testing code

---
 src/views/Pages.tsx | 29 -----------------------------
 1 file changed, 29 deletions(-)

diff --git a/src/views/Pages.tsx b/src/views/Pages.tsx
index 03e4b26..f78a60c 100644
--- a/src/views/Pages.tsx
+++ b/src/views/Pages.tsx
@@ -149,35 +149,6 @@ export default function Pages() {
         ) : (
           <NoData name="Pages" />
         )}
-        {data?.data && data.data.length > 0 ? (
-          data?.data?.map((page) => (
-            <Card
-              key={page.page_id}
-              className="group h-fit max-h-28 w-fit max-w-72 cursor-pointer p-1 px-2 pt-2"
-            >
-              <div onClick={() => goToPage(page.page_id)}>
-                <CardContent className="flex w-full flex-col justify-end gap-3 py-2 text-sm">
-                  <CardTitle className="line-clamp-1 font-virgil">
-                    {page.name}
-                  </CardTitle>
-                  <h1 className="font-medium">
-                    Last updated on:{" "}
-                    {dayjs(page.updated_at).format("MMM DD, YYYY")}
-                  </h1>
-                </CardContent>
-              </div>
-              <div className="flex w-full items-end justify-end p-0.5">
-                <Trash2
-                  className="invisible h-4 w-4 cursor-pointer rounded-lg text-gray-600 transition-all hover:bg-gray-100 hover:text-red-500 group-hover:visible hover:dark:bg-gray-900"
-                  strokeWidth={3}
-                  onClick={() => handlePageDelete(page.page_id)}
-                />
-              </div>
-            </Card>
-          ))
-        ) : (
-          <NoData name="Pages" />
-        )}
       </div>
     </div>
   );