From 8b91265d8c0336fb0824d837620ab5f5bb22d29d Mon Sep 17 00:00:00 2001
From: User <alejsdev@gmail.com>
Date: Fri, 21 Feb 2025 20:22:23 +0000
Subject: [PATCH 1/2] Tweaks

---
 frontend/src/components/Common/UserMenu.tsx   |  7 +-----
 .../src/components/Pending/PendingItems.tsx   | 19 ++++++++-------
 .../src/components/Pending/PendingUsers.tsx   | 23 +++++++++---------
 .../UserSettings/ChangePassword.tsx           |  5 +---
 frontend/src/main.tsx                         |  7 +++++-
 frontend/src/routes/_layout/admin.tsx         | 24 +++++++++----------
 frontend/src/routes/_layout/items.tsx         | 14 +++++------
 frontend/tests/login.spec.ts                  |  2 +-
 playwright/.auth/user.json                    | 14 +++++++++++
 9 files changed, 64 insertions(+), 51 deletions(-)
 create mode 100644 playwright/.auth/user.json

diff --git a/frontend/src/components/Common/UserMenu.tsx b/frontend/src/components/Common/UserMenu.tsx
index c6aa1a9855..5f2b26ad44 100644
--- a/frontend/src/components/Common/UserMenu.tsx
+++ b/frontend/src/components/Common/UserMenu.tsx
@@ -19,12 +19,7 @@ const UserMenu = () => {
       <Flex>
         <MenuRoot>
           <MenuTrigger asChild p={2}>
-            <Button
-              data-testid="user-menu"
-              variant="solid"
-              maxW="150px"
-              truncate
-            >
+            <Button data-testid="user-menu" variant="solid" maxW="sm" truncate>
               <FaUserAstronaut fontSize="18" />
               <Text>{user?.full_name || "User"}</Text>
             </Button>
diff --git a/frontend/src/components/Pending/PendingItems.tsx b/frontend/src/components/Pending/PendingItems.tsx
index 688ba3ab88..0afc50477d 100644
--- a/frontend/src/components/Pending/PendingItems.tsx
+++ b/frontend/src/components/Pending/PendingItems.tsx
@@ -1,29 +1,30 @@
-import { Skeleton, Table } from "@chakra-ui/react"
+import { Table } from "@chakra-ui/react"
+import { SkeletonText } from "../ui/skeleton"
 
 const PendingItems = () => (
   <Table.Root size={{ base: "sm", md: "md" }}>
     <Table.Header>
       <Table.Row>
-        <Table.ColumnHeader w="30%">ID</Table.ColumnHeader>
-        <Table.ColumnHeader w="30%">Title</Table.ColumnHeader>
-        <Table.ColumnHeader w="30%">Description</Table.ColumnHeader>
-        <Table.ColumnHeader w="10%">Actions</Table.ColumnHeader>
+        <Table.ColumnHeader w="sm">ID</Table.ColumnHeader>
+        <Table.ColumnHeader w="sm">Title</Table.ColumnHeader>
+        <Table.ColumnHeader w="sm">Description</Table.ColumnHeader>
+        <Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
       </Table.Row>
     </Table.Header>
     <Table.Body>
       {[...Array(5)].map((_, index) => (
         <Table.Row key={index}>
           <Table.Cell>
-            <Skeleton h="20px" />
+            <SkeletonText noOfLines={1} />
           </Table.Cell>
           <Table.Cell>
-            <Skeleton h="20px" />
+            <SkeletonText noOfLines={1} />
           </Table.Cell>
           <Table.Cell>
-            <Skeleton h="20px" />
+            <SkeletonText noOfLines={1} />
           </Table.Cell>
           <Table.Cell>
-            <Skeleton h="20px" />
+            <SkeletonText noOfLines={1} />
           </Table.Cell>
         </Table.Row>
       ))}
diff --git a/frontend/src/components/Pending/PendingUsers.tsx b/frontend/src/components/Pending/PendingUsers.tsx
index 013ea5fcf8..c7ac1c73ec 100644
--- a/frontend/src/components/Pending/PendingUsers.tsx
+++ b/frontend/src/components/Pending/PendingUsers.tsx
@@ -1,33 +1,34 @@
-import { Skeleton, Table } from "@chakra-ui/react"
+import { Table } from "@chakra-ui/react"
+import { SkeletonText } from "../ui/skeleton"
 
 const PendingUsers = () => (
   <Table.Root size={{ base: "sm", md: "md" }}>
     <Table.Header>
       <Table.Row>
-        <Table.ColumnHeader w="20%">Full name</Table.ColumnHeader>
-        <Table.ColumnHeader w="25%">Email</Table.ColumnHeader>
-        <Table.ColumnHeader w="15%">Role</Table.ColumnHeader>
-        <Table.ColumnHeader w="20%">Status</Table.ColumnHeader>
-        <Table.ColumnHeader w="20%">Actions</Table.ColumnHeader>
+        <Table.ColumnHeader w="sm">Full name</Table.ColumnHeader>
+        <Table.ColumnHeader w="sm">Email</Table.ColumnHeader>
+        <Table.ColumnHeader w="sm">Role</Table.ColumnHeader>
+        <Table.ColumnHeader w="sm">Status</Table.ColumnHeader>
+        <Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
       </Table.Row>
     </Table.Header>
     <Table.Body>
       {[...Array(5)].map((_, index) => (
         <Table.Row key={index}>
           <Table.Cell>
-            <Skeleton h="20px" />
+            <SkeletonText noOfLines={1} />
           </Table.Cell>
           <Table.Cell>
-            <Skeleton h="20px" />
+            <SkeletonText noOfLines={1} />
           </Table.Cell>
           <Table.Cell>
-            <Skeleton h="20px" />
+            <SkeletonText noOfLines={1} />
           </Table.Cell>
           <Table.Cell>
-            <Skeleton h="20px" />
+            <SkeletonText noOfLines={1} />
           </Table.Cell>
           <Table.Cell>
-            <Skeleton h="20px" />
+            <SkeletonText noOfLines={1} />
           </Table.Cell>
         </Table.Row>
       ))}
diff --git a/frontend/src/components/UserSettings/ChangePassword.tsx b/frontend/src/components/UserSettings/ChangePassword.tsx
index c94f970df1..55e6167a49 100644
--- a/frontend/src/components/UserSettings/ChangePassword.tsx
+++ b/frontend/src/components/UserSettings/ChangePassword.tsx
@@ -47,10 +47,7 @@ const ChangePassword = () => {
         <Heading size="sm" py={4}>
           Change Password
         </Heading>
-        <Box
-          as="form"
-          onSubmit={handleSubmit(onSubmit)}
-        >
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
           <VStack gap={4} w={{ base: "100%", md: "sm" }}>
             <PasswordInput
               type="current_password"
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index d138129048..0d80ea6f8d 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,4 +1,9 @@
-import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import {
+  MutationCache,
+  QueryCache,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query"
 import { RouterProvider, createRouter } from "@tanstack/react-router"
 import React, { StrictMode } from "react"
 import ReactDOM from "react-dom/client"
diff --git a/frontend/src/routes/_layout/admin.tsx b/frontend/src/routes/_layout/admin.tsx
index 54f3cc9040..7a6ede7291 100644
--- a/frontend/src/routes/_layout/admin.tsx
+++ b/frontend/src/routes/_layout/admin.tsx
@@ -61,17 +61,17 @@ function UsersTable() {
       <Table.Root size={{ base: "sm", md: "md" }}>
         <Table.Header>
           <Table.Row>
-            <Table.ColumnHeader w="20%">Full name</Table.ColumnHeader>
-            <Table.ColumnHeader w="25%">Email</Table.ColumnHeader>
-            <Table.ColumnHeader w="15%">Role</Table.ColumnHeader>
-            <Table.ColumnHeader w="20%">Status</Table.ColumnHeader>
-            <Table.ColumnHeader w="20%">Actions</Table.ColumnHeader>
+            <Table.ColumnHeader w="sm">Full name</Table.ColumnHeader>
+            <Table.ColumnHeader w="sm">Email</Table.ColumnHeader>
+            <Table.ColumnHeader w="sm">Role</Table.ColumnHeader>
+            <Table.ColumnHeader w="sm">Status</Table.ColumnHeader>
+            <Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
           </Table.Row>
         </Table.Header>
         <Table.Body>
           {users?.map((user) => (
             <Table.Row key={user.id} opacity={isPlaceholderData ? 0.5 : 1}>
-              <Table.Cell w="20%" color={!user.full_name ? "gray" : "inherit"}>
+              <Table.Cell color={!user.full_name ? "gray" : "inherit"}>
                 {user.full_name || "N/A"}
                 {currentUser?.id === user.id && (
                   <Badge ml="1" colorScheme="teal">
@@ -79,14 +79,14 @@ function UsersTable() {
                   </Badge>
                 )}
               </Table.Cell>
-              <Table.Cell w="25%">{user.email}</Table.Cell>
-              <Table.Cell w="15%">
-                {user.is_superuser ? "Superuser" : "User"}
+              <Table.Cell truncate maxW="sm">
+                {user.email}
               </Table.Cell>
-              <Table.Cell w="20%">
-                {user.is_active ? "Active" : "Inactive"}
+              <Table.Cell>
+                {user.is_superuser ? "Superuser" : "User"}
               </Table.Cell>
-              <Table.Cell w="20%">
+              <Table.Cell>{user.is_active ? "Active" : "Inactive"}</Table.Cell>
+              <Table.Cell>
                 <UserActionsMenu
                   user={user}
                   disabled={currentUser?.id === user.id}
diff --git a/frontend/src/routes/_layout/items.tsx b/frontend/src/routes/_layout/items.tsx
index 73dd883a43..8a2ef07076 100644
--- a/frontend/src/routes/_layout/items.tsx
+++ b/frontend/src/routes/_layout/items.tsx
@@ -85,19 +85,19 @@ function ItemsTable() {
       <Table.Root size={{ base: "sm", md: "md" }}>
         <Table.Header>
           <Table.Row>
-            <Table.ColumnHeader w="30%">ID</Table.ColumnHeader>
-            <Table.ColumnHeader w="30%">Title</Table.ColumnHeader>
-            <Table.ColumnHeader w="30%">Description</Table.ColumnHeader>
-            <Table.ColumnHeader w="10%">Actions</Table.ColumnHeader>
+            <Table.ColumnHeader w="sm">ID</Table.ColumnHeader>
+            <Table.ColumnHeader w="sm">Title</Table.ColumnHeader>
+            <Table.ColumnHeader w="sm">Description</Table.ColumnHeader>
+            <Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
           </Table.Row>
         </Table.Header>
         <Table.Body>
           {items?.map((item) => (
             <Table.Row key={item.id} opacity={isPlaceholderData ? 0.5 : 1}>
-              <Table.Cell truncate maxW="30%">
+              <Table.Cell truncate maxW="sm">
                 {item.id}
               </Table.Cell>
-              <Table.Cell truncate maxW="30%">
+              <Table.Cell truncate maxW="sm">
                 {item.title}
               </Table.Cell>
               <Table.Cell
@@ -107,7 +107,7 @@ function ItemsTable() {
               >
                 {item.description || "N/A"}
               </Table.Cell>
-              <Table.Cell width="10%">
+              <Table.Cell>
                 <ItemActionsMenu item={item} />
               </Table.Cell>
             </Table.Row>
diff --git a/frontend/tests/login.spec.ts b/frontend/tests/login.spec.ts
index c1bccf3bc8..e482934916 100644
--- a/frontend/tests/login.spec.ts
+++ b/frontend/tests/login.spec.ts
@@ -124,4 +124,4 @@ test("Redirects to /login when token is wrong", async ({ page }) => {
   await page.goto("/settings")
   await page.waitForURL("/login")
   await expect(page).toHaveURL("/login")
-})
\ No newline at end of file
+})
diff --git a/playwright/.auth/user.json b/playwright/.auth/user.json
new file mode 100644
index 0000000000..4235dc49bc
--- /dev/null
+++ b/playwright/.auth/user.json
@@ -0,0 +1,14 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:5173",
+      "localStorage": [
+        {
+          "name": "access_token",
+          "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NDA1OTgzMDQsInN1YiI6ImFhZjQ3N2MwLTQ0NTAtNDEyYy04MzQwLTk4NGFiOWE0NmMyMyJ9.c4W2TmVisI-y4qdFZG02etE-9thN9bPcghyxPcMD8EE"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file

From c1970ecfc2bb40548dac99e7f0fdc24ccd08c70d Mon Sep 17 00:00:00 2001
From: Alejandra <90076947+alejsdev@users.noreply.github.com>
Date: Fri, 21 Feb 2025 20:23:52 +0000
Subject: [PATCH 2/2] Delete playwright/.auth/user.json

---
 playwright/.auth/user.json | 14 --------------
 1 file changed, 14 deletions(-)
 delete mode 100644 playwright/.auth/user.json

diff --git a/playwright/.auth/user.json b/playwright/.auth/user.json
deleted file mode 100644
index 4235dc49bc..0000000000
--- a/playwright/.auth/user.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "cookies": [],
-  "origins": [
-    {
-      "origin": "http://localhost:5173",
-      "localStorage": [
-        {
-          "name": "access_token",
-          "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NDA1OTgzMDQsInN1YiI6ImFhZjQ3N2MwLTQ0NTAtNDEyYy04MzQwLTk4NGFiOWE0NmMyMyJ9.c4W2TmVisI-y4qdFZG02etE-9thN9bPcghyxPcMD8EE"
-        }
-      ]
-    }
-  ]
-}
\ No newline at end of file