From 1a2787fb21965c4a809535e5ddd87499445d340e Mon Sep 17 00:00:00 2001
From: hoa3 <anina.hold@outlook.com>
Date: Thu, 23 May 2024 14:18:19 +0200
Subject: [PATCH] fix some styling in the add-institution component

---
 .../add-institution.component.html            |  5 ++-
 .../add-institution.component.scss            | 33 +++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/add-institution/add-institution.component.html b/frontend/src/app/add-institution/add-institution.component.html
index 6ca5bd5..111c880 100644
--- a/frontend/src/app/add-institution/add-institution.component.html
+++ b/frontend/src/app/add-institution/add-institution.component.html
@@ -1,3 +1,5 @@
+<div class="wrapper">
+
 <section class="container" [ngClass]="formStatus">
   <header>Institution Form</header>
 
@@ -110,7 +112,7 @@ <h4>Add Organization(s)</h4>
   </form>
 </section>
 
-<div>
+<div class="table-container">
 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
   
   <!-- Name DE Column -->
@@ -172,4 +174,5 @@ <h4>Add Organization(s)</h4>
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
 </table>
+</div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/add-institution/add-institution.component.scss b/frontend/src/app/add-institution/add-institution.component.scss
index 1a12c31..858fba4 100644
--- a/frontend/src/app/add-institution/add-institution.component.scss
+++ b/frontend/src/app/add-institution/add-institution.component.scss
@@ -1,5 +1,38 @@
 @import "../../styles/colors.scss";
 
+/* Adjust container to be a flex container */
+.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+/* Adjust the container and table sizes */
+.container {
+  flex: 1 1 45%; /* Adjust the form to be 50% smaller */
+  max-width: 700px; /* Optional, based on your design */
+}
+
+.table-container {
+  flex: 1 1 45%; /* Adjust the table container to fit beside the form */
+}
+
+
+
+/* Responsive adjustments */
+@media screen and (max-width: 1200px) {
+  .container, .table-container {
+    flex: 1 1 100%; /* Stack the form and table vertically on smaller screens */
+  }
+}
+
+/* Define a class for the Name_de column to control its width */
+.mat-column-name_de {
+  width: 300px; /* Set the desired width */
+  max-width: 1000px; /* Ensure it doesn't grow larger */
+  word-wrap: break-word; /* Wrap text if it overflows */
+}
+
 
 .container {
     position: relative;