styling refactor

frontend/src/components/home/job_postings/display_posts.js

@@ -37,9 +37,11 @@ export default function DisplayPosts(props) {
 
     return (
         <div className='posts'>
-            {jobPosts.map(post => {
-                return <Post key={post.job_id} post={post} />
-            })}
+            <div className='posts-data'>
+                {jobPosts.map(post => {
+                    return <Post key={post.job_id} post={post} />
+                })}
+            </div>
         </div>
     )
 }

frontend/src/components/home/job_postings/post_pop_up.js

@@ -50,7 +50,7 @@ export default function PostPopUp({ post }) {
 
         if (response.status && response.status === 201) {
             alert("Job successfully saved")
-        } else if (response.data && response.data.job_id && response.data.job_id[0] === "jobs applied to with this posting id already exists.") {
+        } else if (response.data && response.data.job_id && response.data.job_id[0] === "jobs applied to with this job id already exists.") {
             alert("Error: Job has already been marked")
         } else {
             console.log(response)

frontend/src/styles/job_posts.css

 .job_postings_page {
     display: flex;
     padding: 25px 80px;
+    gap: 50px;
+    overflow: hidden;
+    height: 90%;
+}
+
+#root {
+    height: 100vh;
     overflow: hidden;
 }
 
 .filter {
     flex: 0 0 27%;
+
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 }
 
 .search_and_display_jobs {
     flex: 1;
+    height: 100%;
+    overflow: hidden;
+
+    display: flex;
+    flex-direction: column;
 }
 
 .filter-content, .posts, .search-job {
@@ -20,15 +36,15 @@
 }
 
 .filter-content {
-    width: 280px;
-    height: 568px;
     overflow: scroll;
+    flex: 1;
 }
 
 .posts {
-    height: 490px;
+    height: 100%;
     overflow: scroll;
     margin-top: 15px;
+    flex: 1;
 }
 
 .post:not(:last-child) {