From 45b19f7da6c75c17163ddfca75c6d96e2285ecd0 Mon Sep 17 00:00:00 2001
From: thvmulle <Thomas.VanMullem@UGent.be>
Date: Mon, 23 May 2022 14:53:17 +0200
Subject: [PATCH] Fix styling of project list, user list and add communication

---
 .../components/student/studentCommunicationList.tsx    |  6 +++---
 .../src/pages/students/[id]/register-communication.tsx |  4 ++--
 frontend/src/styles/projects/projectList.module.css    | 10 +++-------
 frontend/src/styles/usersOverview.module.css           |  3 ++-
 4 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/student/studentCommunicationList.tsx b/frontend/src/components/student/studentCommunicationList.tsx
index 6065e174e..1860ac0c0 100644
--- a/frontend/src/components/student/studentCommunicationList.tsx
+++ b/frontend/src/components/student/studentCommunicationList.tsx
@@ -69,9 +69,9 @@ export default function StudentCommunicationList({ student }: CommunicationListP
     return (
         <div
             data-testid="student-communication"
-            className={styles.student_communcation_list_outer_div + " h-100"}
+            className={styles.student_communcation_list_outer_div + " h-100 w-100"}
         >
-            <div className={"overflow-auto p-3"} style={{ height: "100%" }}>
+            <div className={"overflow-auto p-3 w-100"} style={{ height: "100%" }}>
                 <div className={styles.student_info_button + " row"}>
                     <Button
                         variant="btn-outline"
@@ -82,7 +82,7 @@ export default function StudentCommunicationList({ student }: CommunicationListP
                         {capitalize(t("student info"))}
                     </Button>
                 </div>
-                <div className="row w-100">
+                <div className="w-100">
                     <Row className={styles.student_row_add_communication}>
                         <Col>
                             <h1>{student?.callName}</h1>
diff --git a/frontend/src/pages/students/[id]/register-communication.tsx b/frontend/src/pages/students/[id]/register-communication.tsx
index 2b5eef0df..06110b8b3 100644
--- a/frontend/src/pages/students/[id]/register-communication.tsx
+++ b/frontend/src/pages/students/[id]/register-communication.tsx
@@ -20,9 +20,9 @@ export default function CommunicationInfoPage() {
                         <StudentList isDraggable={false} />
                     </div>
                     <div className={styles.info_field}>
-                        <div data-testid="student-communication">
+                        <div data-testid="student-communication" className={"h-100 overflow-auto"}>
                             <div className={"h-100"}>
-                                <div className={"overflow-auto p-3"} style={{ height: "calc(100% - 4rem)" }}>
+                                <div className={"overflow-auto p-3"}>
                                     <div className="row" style={{ paddingLeft: 25 }}>
                                         <RegisterCommunication />
                                     </div>
diff --git a/frontend/src/styles/projects/projectList.module.css b/frontend/src/styles/projects/projectList.module.css
index c8744b248..0814b3c83 100644
--- a/frontend/src/styles/projects/projectList.module.css
+++ b/frontend/src/styles/projects/projectList.module.css
@@ -3,8 +3,8 @@
     height: 100%;
     background-color: #0a0839;
     overflow: auto;
-    position: relative;
-    padding-bottom: 3em;
+    display: flex;
+    flex-direction: column;
 }
 
 .project_list_button {
@@ -12,11 +12,6 @@
     margin: 0.5rem;
 }
 
-.bottom_page {
-    position: absolute;
-    bottom: 0;
-}
-
 .project_list_header {
     background-color: #0a0839;
     color: #ffffff;
@@ -44,4 +39,5 @@
 
 .project_list_list_group {
     border-radius: 0;
+    flex-grow: 1;
 }
diff --git a/frontend/src/styles/usersOverview.module.css b/frontend/src/styles/usersOverview.module.css
index e41839e31..fc42d907d 100644
--- a/frontend/src/styles/usersOverview.module.css
+++ b/frontend/src/styles/usersOverview.module.css
@@ -4,7 +4,8 @@
 
 .users_full_div {
     position: fixed;
-    height: 100%;
+    height: calc(100% - 4rem);
+    overflow: auto;
     width: 100%;
     left: 0;
     z-index: 10;