Making parent flexes consistent, fix formatting of Announcements

uwblueprint · May 30, 2024 · a05abc1 · a05abc1
1 parent f0fccda
commit a05abc1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/frontend/src/components/pages/announcements/AnnouncementsPage.tsx b/frontend/src/components/pages/announcements/AnnouncementsPage.tsx
@@ -16,15 +16,17 @@ const AnnouncementsPage = (): React.ReactElement => {
   }, []);
 
   return (
-    <Flex flexDir="row" alignItems="flex-start" w="100%">
-      <AnnouncementsGroups
-        announcements={announcements}
-        setSelectedGroup={setSelectedGroup}
-      />
-      <AnnouncementsView
-        announcements={announcements}
-        selectedGroup={selectedGroup}
-      />
+    <Flex flexDir="column" flexGrow={1}>
+      <Flex flexDir="row" alignItems="flex-start" w="100%" flexGrow={1}>
+        <AnnouncementsGroups
+          announcements={announcements}
+          setSelectedGroup={setSelectedGroup}
+        />
+        <AnnouncementsView
+          announcements={announcements}
+          selectedGroup={selectedGroup}
+        />
+      </Flex>
     </Flex>
   );
 };

diff --git a/frontend/src/components/pages/announcements/AnnouncementsView.tsx b/frontend/src/components/pages/announcements/AnnouncementsView.tsx
@@ -69,10 +69,11 @@ const AnnouncementsList = ({ announcements, selectedGroup }: Props) => {
           key={index}
           backgroundColor="gray.100"
           p="10px"
-          ml="38px"
-          mr="38px"
+          ml="30px"
+          mr="20px"
           mt="20px"
           borderRadius="10px"
+          w="83vh"
         >
           <Flex pl={2} align="center">
             <Avatar name={announcement.author} src="https://bit.ly/2k1H1t6" />

diff --git a/frontend/src/components/pages/tasks/TasksPage.tsx b/frontend/src/components/pages/tasks/TasksPage.tsx
@@ -70,7 +70,7 @@ const TasksPage = (): React.ReactElement => {
   }, [taskType]);
 
   return (
-    <Flex flexDir="column" w="100%">
+    <Flex flexDir="column" flexGrow={1}>
       <Tabs variant="horizontal" h="30px" mb={6}>
         <TabList pl={6}>
           <Tab