From a3c1b8d4c799ad33bff5716d9d37083f40f9fa6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= <yagopajarino@outlook.com>
Date: Mon, 16 Dec 2024 21:19:44 -0300
Subject: [PATCH 1/3] refactor(groups.tsx): make groups responsive for small
 and medium screen

re #557
---
 apps/dashboard/src/pages/groups.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/dashboard/src/pages/groups.tsx b/apps/dashboard/src/pages/groups.tsx
index c8dc645f..7ee15af4 100644
--- a/apps/dashboard/src/pages/groups.tsx
+++ b/apps/dashboard/src/pages/groups.tsx
@@ -11,7 +11,8 @@ import {
     InputRightElement,
     Spinner,
     Text,
-    VStack
+    VStack,
+    Stack,
 } from "@chakra-ui/react"
 import { useCallback, useContext, useEffect, useState } from "react"
 import { FiSearch } from "react-icons/fi"
@@ -82,9 +83,9 @@ export default function GroupsPage(): JSX.Element {
                     </Heading>
                 </HStack>
 
-                <HStack justifyContent="space-between" width="100%">
+                <Stack justifyContent="space-between" width="100%" direction={{ base: "column", md: "row" }} spacing={2}>
                     <HStack>
-                        <InputGroup w="300px">
+                        <InputGroup w={{ base: "250px", md: "300px" }}>
                             <InputRightElement h="48px" pointerEvents="none">
                                 <FiSearch />
                             </InputRightElement>
@@ -123,7 +124,7 @@ export default function GroupsPage(): JSX.Element {
                     >
                         Add group
                     </Button>
-                </HStack>
+                </Stack>
 
                 {_isLoading && (
                     <Box pt="100px">
@@ -139,7 +140,7 @@ export default function GroupsPage(): JSX.Element {
 
                 {!_isLoading && _groups.length > 0 && (
                     <Grid
-                        templateColumns="repeat(3, 1fr)"
+                        templateColumns={{ base: "1fr", md: "repeat(2, 1fr)", lg: "repeat(3, 1fr)" }}
                         gap={10}
                         w="100%"
                         mt="60px"
@@ -186,7 +187,7 @@ export default function GroupsPage(): JSX.Element {
 
                 {!_isLoading && _allCredentialGroups.length > 0 && (
                     <Grid
-                        templateColumns="repeat(3, 1fr)"
+                        templateColumns={{ base: "1fr", md: "repeat(2, 1fr)", lg: "repeat(3, 1fr)" }}
                         gap={10}
                         w="100%"
                         mt="60px"

From aa1f434b282d94c5a949be168b76aadcacb4d7a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= <yagopajarino@outlook.com>
Date: Tue, 17 Dec 2024 10:32:49 -0300
Subject: [PATCH 2/3] style(dashboard): run prettier

---
 apps/dashboard/src/pages/groups.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/src/pages/groups.tsx b/apps/dashboard/src/pages/groups.tsx
index 7ee15af4..f0f1a0bb 100644
--- a/apps/dashboard/src/pages/groups.tsx
+++ b/apps/dashboard/src/pages/groups.tsx
@@ -12,7 +12,7 @@ import {
     Spinner,
     Text,
     VStack,
-    Stack,
+    Stack
 } from "@chakra-ui/react"
 import { useCallback, useContext, useEffect, useState } from "react"
 import { FiSearch } from "react-icons/fi"
@@ -83,7 +83,12 @@ export default function GroupsPage(): JSX.Element {
                     </Heading>
                 </HStack>
 
-                <Stack justifyContent="space-between" width="100%" direction={{ base: "column", md: "row" }} spacing={2}>
+                <Stack
+                    justifyContent="space-between"
+                    width="100%"
+                    direction={{ base: "column", md: "row" }}
+                    spacing={2}
+                >
                     <HStack>
                         <InputGroup w={{ base: "250px", md: "300px" }}>
                             <InputRightElement h="48px" pointerEvents="none">
@@ -140,7 +145,11 @@ export default function GroupsPage(): JSX.Element {
 
                 {!_isLoading && _groups.length > 0 && (
                     <Grid
-                        templateColumns={{ base: "1fr", md: "repeat(2, 1fr)", lg: "repeat(3, 1fr)" }}
+                        templateColumns={{
+                            base: "1fr",
+                            md: "repeat(2, 1fr)",
+                            lg: "repeat(3, 1fr)"
+                        }}
                         gap={10}
                         w="100%"
                         mt="60px"
@@ -187,7 +196,11 @@ export default function GroupsPage(): JSX.Element {
 
                 {!_isLoading && _allCredentialGroups.length > 0 && (
                     <Grid
-                        templateColumns={{ base: "1fr", md: "repeat(2, 1fr)", lg: "repeat(3, 1fr)" }}
+                        templateColumns={{
+                            base: "1fr",
+                            md: "repeat(2, 1fr)",
+                            lg: "repeat(3, 1fr)"
+                        }}
                         gap={10}
                         w="100%"
                         mt="60px"

From 635c5709c00e40e851387ddc85625f48bd2898a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= <yagopajarino@outlook.com>
Date: Fri, 20 Dec 2024 18:46:28 -0300
Subject: [PATCH 3/3] refactor: groups page responsive

---
 apps/dashboard/src/pages/groups.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/dashboard/src/pages/groups.tsx b/apps/dashboard/src/pages/groups.tsx
index f0f1a0bb..5eb5c77d 100644
--- a/apps/dashboard/src/pages/groups.tsx
+++ b/apps/dashboard/src/pages/groups.tsx
@@ -85,8 +85,8 @@ export default function GroupsPage(): JSX.Element {
 
                 <Stack
                     justifyContent="space-between"
-                    width="100%"
-                    direction={{ base: "column", md: "row" }}
+                    width={{lg: "100%"}}
+                    direction={{ base: "column", lg: "row" }}
                     spacing={2}
                 >
                     <HStack>
@@ -148,10 +148,10 @@ export default function GroupsPage(): JSX.Element {
                         templateColumns={{
                             base: "1fr",
                             md: "repeat(2, 1fr)",
-                            lg: "repeat(3, 1fr)"
+                            xl: "repeat(3, 1fr)"
                         }}
                         gap={10}
-                        w="100%"
+                        w={{md:"100%"}}
                         mt="60px"
                     >
                         {_groups
@@ -199,10 +199,10 @@ export default function GroupsPage(): JSX.Element {
                         templateColumns={{
                             base: "1fr",
                             md: "repeat(2, 1fr)",
-                            lg: "repeat(3, 1fr)"
+                            xl: "repeat(3, 1fr)"
                         }}
                         gap={10}
-                        w="100%"
+                        w={{md:"100%"}}
                         mt="60px"
                     >
                         {_allCredentialGroups