From 8e33e80437e3fbc2c994a3541763e88af79204f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= <yagopajarino@outlook.com>
Date: Tue, 17 Dec 2024 15:31:07 -0300
Subject: [PATCH 1/4] refactor: make group responsive

re #558
---
 apps/dashboard/src/pages/group.tsx | 42 +++++++++++++++++++++++-------
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/apps/dashboard/src/pages/group.tsx b/apps/dashboard/src/pages/group.tsx
index da96f0d8..a9d3f288 100644
--- a/apps/dashboard/src/pages/group.tsx
+++ b/apps/dashboard/src/pages/group.tsx
@@ -24,7 +24,8 @@ import {
     useClipboard,
     useDisclosure,
     useToast,
-    VStack
+    VStack,
+    Stack
 } from "@chakra-ui/react"
 import { useCallback, useEffect, useState, useContext } from "react"
 import { CgProfile } from "react-icons/cg"
@@ -400,9 +401,23 @@ ${memberIds.join("\n")}
                 )}
             </VStack>
 
-            <HStack mt="30px" align="start" spacing="14">
-                <VStack flex="1" align="stretch" spacing="6">
-                    <HStack flex="1" spacing="4">
+            <Stack
+                mt="30px"
+                align="start"
+                spacing="2"
+                direction={{ base: "column-reverse", md: "row" }}
+            >
+                <VStack
+                    flex="1"
+                    align="stretch"
+                    spacing="6"
+                    width={{ base: "100%", md: "auto" }}
+                >
+                    <Stack
+                        flex="1"
+                        spacing="4"
+                        direction={{ base: "column", md: "row" }}
+                    >
                         <Box
                             flex="1"
                             bgColor="balticSea.50"
@@ -448,7 +463,7 @@ ${memberIds.join("\n")}
                                 {_group.treeDepth}
                             </Heading>
                         </Box>
-                    </HStack>
+                    </Stack>
                     (
                     <Box
                         bgColor="balticSea.50"
@@ -742,6 +757,7 @@ ${memberIds.join("\n")}
                     borderColor="classicRose.200"
                     borderWidth="1px"
                     borderRadius="8px"
+                    width={{ base: "100%", md: "auto" }}
                 >
                     <HStack justify="space-between">
                         <Heading fontSize="25px" as="h1">
@@ -864,12 +880,18 @@ ${memberIds.join("\n")}
                         ))
                     )}
                     {_group.type === "off-chain" && isGroupAdmin && (
-                        <Flex mt="20px" justify="space-between" align="center">
-                            <ButtonGroup>
+                        <Flex
+                            mt="20px"
+                            justify="space-between"
+                            align="center"
+                            direction={{ base: "column", lg: "row" }}
+                        >
+                            <ButtonGroup width={{ base: "100%", lg: "auto" }}>
                                 <Button
                                     variant="solid"
                                     colorScheme="tertiary"
                                     onClick={handleSelectAll}
+                                    width={{ base: "50%", lg: "auto" }}
                                 >
                                     Select All
                                 </Button>
@@ -877,6 +899,7 @@ ${memberIds.join("\n")}
                                     variant="solid"
                                     colorScheme="tertiary"
                                     onClick={handleDeselectAll}
+                                    width={{ base: "50%", lg: "auto" }}
                                 >
                                     Deselect
                                 </Button>
@@ -886,14 +909,15 @@ ${memberIds.join("\n")}
                                 colorScheme="danger"
                                 isDisabled={_selectedMembers.length === 0}
                                 onClick={() => removeMembers(_selectedMembers)}
-                                size="sm"
+                                width={{ base: "100%", lg: "auto" }}
+                                mt={{ base: "1rem", lg: "0" }}
                             >
                                 Remove Selected Members
                             </Button>
                         </Flex>
                     )}
                 </Box>
-            </HStack>
+            </Stack>
 
             <AddMemberModal
                 isOpen={addMembersModal.isOpen}

From b04e321a3d0959477a30e6cbf2fdb009be8caee4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= <yagopajarino@outlook.com>
Date: Fri, 20 Dec 2024 19:07:06 -0300
Subject: [PATCH 2/4] refactor(dashboard): make group description responsive:
 add member button

---
 apps/dashboard/src/pages/group.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/src/pages/group.tsx b/apps/dashboard/src/pages/group.tsx
index a9d3f288..1a4c85aa 100644
--- a/apps/dashboard/src/pages/group.tsx
+++ b/apps/dashboard/src/pages/group.tsx
@@ -759,7 +759,7 @@ ${memberIds.join("\n")}
                     borderRadius="8px"
                     width={{ base: "100%", md: "auto" }}
                 >
-                    <HStack justify="space-between">
+                    <Stack justify="space-between" direction={{base:"column", lg: "row"}}>
                         <Heading fontSize="25px" as="h1">
                             Members
                         </Heading>
@@ -771,7 +771,7 @@ ${memberIds.join("\n")}
                         >
                             Add member
                         </Button>
-                    </HStack>
+                    </Stack>
 
                     <HStack mt="30px" mb="20px">
                         <InputGroup w="100%">

From 160ef50e16355c7ebe1609c9bb2994fbbe81f7d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= <yagopajarino@outlook.com>
Date: Fri, 27 Dec 2024 18:44:33 -0300
Subject: [PATCH 3/4] refactor: stack spacing

---
 apps/dashboard/src/pages/group.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/src/pages/group.tsx b/apps/dashboard/src/pages/group.tsx
index 1a4c85aa..23f47935 100644
--- a/apps/dashboard/src/pages/group.tsx
+++ b/apps/dashboard/src/pages/group.tsx
@@ -404,7 +404,7 @@ ${memberIds.join("\n")}
             <Stack
                 mt="30px"
                 align="start"
-                spacing="2"
+                spacing={{base: "6", lg:"14"}}
                 direction={{ base: "column-reverse", md: "row" }}
             >
                 <VStack

From 97f8f8778e5f0462c89182aabeb6057d9d2f287d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= <yagopajarino@outlook.com>
Date: Fri, 27 Dec 2024 18:59:05 -0300
Subject: [PATCH 4/4] style: run prettier

---
 apps/dashboard/src/pages/group.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/src/pages/group.tsx b/apps/dashboard/src/pages/group.tsx
index 23f47935..fa37b0c5 100644
--- a/apps/dashboard/src/pages/group.tsx
+++ b/apps/dashboard/src/pages/group.tsx
@@ -404,7 +404,7 @@ ${memberIds.join("\n")}
             <Stack
                 mt="30px"
                 align="start"
-                spacing={{base: "6", lg:"14"}}
+                spacing={{ base: "6", lg: "14" }}
                 direction={{ base: "column-reverse", md: "row" }}
             >
                 <VStack
@@ -759,7 +759,10 @@ ${memberIds.join("\n")}
                     borderRadius="8px"
                     width={{ base: "100%", md: "auto" }}
                 >
-                    <Stack justify="space-between" direction={{base:"column", lg: "row"}}>
+                    <Stack
+                        justify="space-between"
+                        direction={{ base: "column", lg: "row" }}
+                    >
                         <Heading fontSize="25px" as="h1">
                             Members
                         </Heading>