🎨 Add minor UI tweaks (#1506)

Author: alejsdev

frontend/src/components/Common/Navbar.tsx

@@ -20,7 +20,7 @@ function Navbar() {
       p={4}
     >
       <Link to="/">
-        <Image src={Logo} alt="Logo" w="180px" maxW="2xs" px={2} />
+        <Image src={Logo} alt="Logo" maxW="3xs" p={2} />
       </Link>
       <Flex gap={2} alignItems="center">
         <UserMenu />

frontend/src/components/Common/Sidebar.tsx

@@ -22,10 +22,6 @@ const Sidebar = () => {
   const { logout } = useAuth()
   const [open, setOpen] = useState(false)
 
-  const handleLogout = async () => {
-    logout()
-  }
-
   return (
     <>
       {/* Mobile */}
@@ -48,15 +44,17 @@ const Sidebar = () => {
             <FaBars />
           </IconButton>
         </DrawerTrigger>
-        <DrawerContent maxW="280px">
+        <DrawerContent maxW="xs">
           <DrawerCloseTrigger />
           <DrawerBody>
             <Flex flexDir="column" justify="space-between">
               <Box>
                 <SidebarItems />
                 <Flex
                   as="button"
-                  onClick={handleLogout}
+                  onClick={() => {
+                    logout()
+                  }}
                   alignItems="center"
                   gap={4}
                   px={4}
@@ -67,7 +65,7 @@ const Sidebar = () => {
                 </Flex>
               </Box>
               {currentUser?.email && (
-                <Text fontSize="sm" p={2}>
+                <Text fontSize="sm" p={2} truncate maxW="sm">
                   Logged in as: {currentUser.email}
                 </Text>
               )}
@@ -84,7 +82,7 @@ const Sidebar = () => {
         position="sticky"
         bg="bg.subtle"
         top={0}
-        minW="280px"
+        minW="xs"
         h="100vh"
         p={4}
       >

frontend/src/components/UserSettings/ChangePassword.tsx

@@ -48,11 +48,10 @@ const ChangePassword = () => {
           Change Password
         </Heading>
         <Box
-          w={{ sm: "full", md: "300px" }}
           as="form"
           onSubmit={handleSubmit(onSubmit)}
         >
-          <VStack gap={4}>
+          <VStack gap={4} w={{ base: "100%", md: "sm" }}>
             <PasswordInput
               type="current_password"
               startElement={<FiLock />}

frontend/src/components/UserSettings/UserInformation.tsx

@@ -76,7 +76,7 @@ const UserInformation = () => {
           User Information
         </Heading>
         <Box
-          w={{ sm: "full", md: "50%" }}
+          w={{ sm: "full", md: "sm" }}
           as="form"
           onSubmit={handleSubmit(onSubmit)}
         >
@@ -86,15 +86,14 @@ const UserInformation = () => {
                 {...register("full_name", { maxLength: 30 })}
                 type="text"
                 size="md"
-                w="auto"
               />
             ) : (
               <Text
                 fontSize="md"
                 py={2}
                 color={!currentUser?.full_name ? "gray" : "inherit"}
                 truncate
-                maxWidth="250px"
+                maxW="sm"
               >
                 {currentUser?.full_name || "N/A"}
               </Text>
@@ -114,10 +113,9 @@ const UserInformation = () => {
                 })}
                 type="email"
                 size="md"
-                w="auto"
               />
             ) : (
-              <Text fontSize="md" py={2} truncate maxWidth="250px">
+              <Text fontSize="md" py={2} truncate maxW="sm">
                 {currentUser?.email}
               </Text>
             )}

frontend/src/routes/_layout/index.tsx

@@ -14,7 +14,7 @@ function Dashboard() {
     <>
       <Container maxW="full">
         <Box pt={12} m={4}>
-          <Text fontSize="2xl">
+          <Text fontSize="2xl" truncate maxW="sm">
             Hi, {currentUser?.full_name || currentUser?.email} 👋🏼
           </Text>
           <Text>Welcome back, nice to see you again!</Text>