refactor(groups.tsx): make groups responsive for small and medium screen

re #557
bandada-infra · Dec 17, 2024 · a3c1b8d · a3c1b8d
1 parent abeb1ed
commit a3c1b8d
Showing 1 changed file with 7 additions and 6 deletions.
diff --git 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"