From 58af4100b056e1fc72451791c5f26a7c72515666 Mon Sep 17 00:00:00 2001
From: Aslam H <iupin5212@gmail.com>
Date: Tue, 22 Oct 2024 21:06:13 +0700
Subject: [PATCH] refactor: page item

---
 .../_layout/_pages/_protected/pages/-item.tsx | 23 ++++++++-----------
 .../_layout/_pages/_protected/pages/-list.tsx |  6 ++---
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/web/app/routes/_layout/_pages/_protected/pages/-item.tsx b/web/app/routes/_layout/_pages/_protected/pages/-item.tsx
index 3761c413..e92a4341 100644
--- a/web/app/routes/_layout/_pages/_protected/pages/-item.tsx
+++ b/web/app/routes/_layout/_pages/_protected/pages/-item.tsx
@@ -52,22 +52,19 @@ export const PageItem = React.forwardRef<HTMLAnchorElement, PageItemProps>(
             </Column.Text>
           </Column.Wrapper>
 
+          <Column.Wrapper style={columnStyles.topic}>
+            {page.topic && (
+              <Badge variant="secondary">{page.topic.prettyName}</Badge>
+            )}
+          </Column.Wrapper>
+
           {!isTablet && (
-            <Column.Wrapper style={columnStyles.topic}>
-              {page.topic && (
-                <Badge variant="secondary">{page.topic.prettyName}</Badge>
-              )}
+            <Column.Wrapper style={columnStyles.updated}>
+              <Column.Text>
+                {format(new Date(page.updatedAt), "d MMM yyyy")}
+              </Column.Text>
             </Column.Wrapper>
           )}
-
-          <Column.Wrapper
-            style={columnStyles.updated}
-            className="flex justify-end"
-          >
-            <Column.Text className="text-sm">
-              {format(new Date(page.updatedAt), "d MMM yyyy")}
-            </Column.Text>
-          </Column.Wrapper>
         </div>
       </Link>
     )
diff --git a/web/app/routes/_layout/_pages/_protected/pages/-list.tsx b/web/app/routes/_layout/_pages/_protected/pages/-list.tsx
index 06252c14..7ab7ca7b 100644
--- a/web/app/routes/_layout/_pages/_protected/pages/-list.tsx
+++ b/web/app/routes/_layout/_pages/_protected/pages/-list.tsx
@@ -99,9 +99,9 @@ export const useColumnStyles = () => {
       "--max-width": "120px",
     },
     updated: {
-      "--width": "82px",
-      "--min-width": "82px",
-      "--max-width": "82px",
+      "--width": "65px",
+      "--min-width": "120px",
+      "--max-width": "120px",
     },
   }
 }