From c49ae1ec17cc5522bb744bc2af60e43bf8b33abd Mon Sep 17 00:00:00 2001
From: joyce-shi <joyce.shi@uwaterloo.ca>
Date: Sun, 16 Jul 2023 14:13:13 +0200
Subject: [PATCH 1/2] fix: classroom card spacing

---
 .../src/components/pages/teacher/ClassroomsPage.tsx   | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/pages/teacher/ClassroomsPage.tsx b/frontend/src/components/pages/teacher/ClassroomsPage.tsx
index 610be39c0..1fb0f3491 100644
--- a/frontend/src/components/pages/teacher/ClassroomsPage.tsx
+++ b/frontend/src/components/pages/teacher/ClassroomsPage.tsx
@@ -5,8 +5,7 @@ import { useQuery } from "@apollo/client";
 import {
   Box,
   Center,
-  Grid,
-  GridItem,
+  Flex,
   Tab,
   TabList,
   TabPanel,
@@ -124,7 +123,7 @@ const ClassroomsPage = (): React.ReactElement => {
                 </TabList>
                 <TabPanels>
                   <TabPanel padding="0">
-                    <Grid gap={4} templateColumns="repeat(4, 1fr)">
+                    <Flex flexWrap="wrap">
                       {paginatedData?.map(
                         ({
                           id,
@@ -135,7 +134,7 @@ const ClassroomsPage = (): React.ReactElement => {
                           startDate,
                           studentCount,
                         }) => (
-                          <GridItem key={id} flex="1" paddingTop="4">
+                          <Flex key={id} paddingLeft="4" paddingTop="4">
                             <ClassroomCard
                               key={id}
                               activeAssessments={activeAssessments}
@@ -146,10 +145,10 @@ const ClassroomsPage = (): React.ReactElement => {
                               startDate={startDate}
                               studentCount={studentCount}
                             />
-                          </GridItem>
+                          </Flex>
                         ),
                       )}
-                    </Grid>
+                    </Flex>
                     <VStack
                       alignItems="center"
                       paddingBottom="6"

From 05ca1039829aa13bc1b35fe726235cbdbdecc5c4 Mon Sep 17 00:00:00 2001
From: joyce-shi <joyce.shi@uwaterloo.ca>
Date: Sun, 16 Jul 2023 14:49:02 +0200
Subject: [PATCH 2/2] fix: minor spacing

---
 frontend/src/components/pages/teacher/ClassroomsPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/pages/teacher/ClassroomsPage.tsx b/frontend/src/components/pages/teacher/ClassroomsPage.tsx
index 1fb0f3491..e219054d4 100644
--- a/frontend/src/components/pages/teacher/ClassroomsPage.tsx
+++ b/frontend/src/components/pages/teacher/ClassroomsPage.tsx
@@ -123,7 +123,7 @@ const ClassroomsPage = (): React.ReactElement => {
                 </TabList>
                 <TabPanels>
                   <TabPanel padding="0">
-                    <Flex flexWrap="wrap">
+                    <Flex alignItems="left" flexWrap="wrap">
                       {paginatedData?.map(
                         ({
                           id,
@@ -134,7 +134,7 @@ const ClassroomsPage = (): React.ReactElement => {
                           startDate,
                           studentCount,
                         }) => (
-                          <Flex key={id} paddingLeft="4" paddingTop="4">
+                          <Flex key={id} paddingRight="4" paddingTop="4">
                             <ClassroomCard
                               key={id}
                               activeAssessments={activeAssessments}