Errores

Arquisoft · Apr 29, 2024 · 5f98110 · 5f98110
1 parent 7ba4bdd
commit 5f98110
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 31 deletions.
diff --git a/webapp/src/components/Nav/Nav.js b/webapp/src/components/Nav/Nav.js
@@ -290,7 +290,7 @@ const Nav = () => {
               <DrawerHeader>WIQ</DrawerHeader>
               <DrawerBody>
                 <Stack spacing="24px">
-                  <Link href="/home/clasico" data-testid="home-clasico-link">
+                  <Link href="/home" data-testid="home-clasico-link">
                     {t("components.nav.home")}
                   </Link>
 

diff --git a/webapp/src/pages/Social/Groups.js b/webapp/src/pages/Social/Groups.js
@@ -103,7 +103,7 @@ const Groups = () => {
   return (
     <>
       <Nav />
-      <Container maxW="md" mt="5">
+      <Flex maxW="md" mt="5" flexDir={"column"} alignItems={"center"} width={{base: "90%", lg: "60%"}}>
         <Box mb="5">
           <Text fontSize="2xl" fontWeight="bold" mb="4">
             {t("pages.groups.title")}
@@ -117,7 +117,11 @@ const Groups = () => {
                 onChange={(e) => setName(e.target.value)}
               />
             </InputGroup>
-            <Button colorScheme="blue" onClick={addGroup} data-testid="addgroup-button">
+            <Button
+              colorScheme="blue"
+              onClick={addGroup}
+              data-testid="addgroup-button"
+            >
               {t("pages.groups.create")}
             </Button>
           </Box>
@@ -140,36 +144,40 @@ const Groups = () => {
           {groups.length === 0 ? (
             <Text>{t("pages.groups.nogroups")}</Text>
           ) : (
-            <Table variant="simple">
-              <Thead>
-                <Tr>
-                  <Th>{t("pages.groupsTable.groupName")}</Th>
-                  <Th>{t("pages.groupsTable.creationDate")}</Th>
-                  <Th>{t("pages.groupsTable.creator")}</Th>
-                  <Th>{t("pages.groups.join")}</Th>
-                </Tr>
-              </Thead>
-              <Tbody>
-                {groups.map((group) => (
-                  <Tr key={group._id}>
-                    <Td>{group.name}</Td>
-                    <Td>{new Date(group.createdAt).toLocaleDateString()}</Td>
-                    <Td>{group.members.length > 0 ? group.members[0] : ""}</Td>
-                    <Td>
-                      <Button
-                        colorScheme="blue"
-                        onClick={() => handleJoinGroup(group._id)}
-                      >
-                        {t("pages.groups.join")}
-                      </Button>
-                    </Td>
+            <Box overflowX={{ base: "scroll", lg: "unset" }} width={"100%"} maxW={"100vw"}>
+              <Table variant="simple" w={"100%"}>
+                <Thead>
+                  <Tr>
+                    <Th>{t("pages.groupsTable.groupName")}</Th>
+                    <Th>{t("pages.groupsTable.creationDate")}</Th>
+                    <Th>{t("pages.groupsTable.creator")}</Th>
+                    <Th>{t("pages.groups.join")}</Th>
                   </Tr>
-                ))}
-              </Tbody>
-            </Table>
+                </Thead>
+                <Tbody>
+                  {groups.map((group) => (
+                    <Tr key={group._id}>
+                      <Td>{group.name}</Td>
+                      <Td>{new Date(group.createdAt).toLocaleDateString()}</Td>
+                      <Td>
+                        {group.members.length > 0 ? group.members[0] : ""}
+                      </Td>
+                      <Td>
+                        <Button
+                          colorScheme="blue"
+                          onClick={() => handleJoinGroup(group._id)}
+                        >
+                          {t("pages.groups.join")}
+                        </Button>
+                      </Td>
+                    </Tr>
+                  ))}
+                </Tbody>
+              </Table>
+            </Box>
           )}
         </Flex>
-      </Container>
+      </Flex>
       <Footer />
     </>
   );

diff --git a/webapp/src/pages/Social/UserGroups.js b/webapp/src/pages/Social/UserGroups.js
@@ -9,7 +9,8 @@ import {
   Tr,
   Th,
   Td,
-  Flex
+  Flex,
+  Box
 } from "@chakra-ui/react";
 import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
@@ -65,6 +66,7 @@ const UserGroups = () => {
               {`Error: ${error}`}
             </Alert>
           )}
+          <Box overflowX={{ base: "scroll", lg: "auto" }} width={'100%'}>
           <Table variant="simple">
             <Thead>
               <Tr>
@@ -92,6 +94,7 @@ const UserGroups = () => {
               ))}
             </Tbody>
           </Table>
+          </Box>
       </Flex>
       <Footer />
     </>