From 70f5761440694761ccdfbdcc197cba33615dc3f4 Mon Sep 17 00:00:00 2001
From: Mehmet Can Ay <mehmettt.can.ay@gmail.com>
Date: Thu, 14 Nov 2024 13:22:47 +0100
Subject: [PATCH 1/2] refactor: responsive design

---
 .../auto-harmonizer.component.css             | 146 +++++++++++++++++-
 .../app/biomarkers/biomarkers.component.css   |  80 ++++++++++
 .../src/app/cohorts/cohorts.component.css     |  89 +++++++++++
 .../app/contact-us/contact-us.component.css   | 125 ++++++++++++++-
 frontend/src/app/footer/footer.component.css  |  77 +++++++++
 frontend/src/app/home/home.component.css      | 117 ++++++++++++++
 .../src/app/imprint/imprint.component.css     |  77 +++++++++
 .../longitudinal/longitudinal.component.css   |  80 +++++++++-
 .../src/app/mappings/mappings.component.css   |  93 +++++++++--
 .../src/app/nav-bar/nav-bar.component.css     | 108 +++++++++++++
 .../study-picker/study-picker.component.css   | 126 ++++++++++++---
 frontend/src/styles.css                       |  79 +++++++++-
 12 files changed, 1151 insertions(+), 46 deletions(-)

diff --git a/frontend/src/app/auto-harmonizer/auto-harmonizer.component.css b/frontend/src/app/auto-harmonizer/auto-harmonizer.component.css
index ffd08d0..5e4d248 100644
--- a/frontend/src/app/auto-harmonizer/auto-harmonizer.component.css
+++ b/frontend/src/app/auto-harmonizer/auto-harmonizer.component.css
@@ -1,3 +1,4 @@
+/* Base Styles */
 .header-container {
   margin: 20px;
   display: flex;
@@ -47,12 +48,6 @@
   margin-top: 20px;
 }
 
-.progress {
-  margin-top: 10px;
-  width: 100%;
-  max-width: 50%;
-}
-
 .form-field {
   padding-right: 10px;
   padding-left: 10px;
@@ -74,4 +69,143 @@
 .mat-table th:last-child,
 .mat-table td:last-child {
   border-right: none;
+}
+
+/* Responsive Styles */
+
+/* For screens 1200px and below */
+@media (max-width: 1200px) {
+  .form-upload-container {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .form-container {
+    max-width: 100%;
+    margin-right: 0;
+  }
+
+  .file-upload-container {
+    max-width: 100%;
+    margin-top: 20px;
+  }
+}
+
+/* For screens 992px and below */
+@media (max-width: 992px) {
+  .header-container {
+    margin: 15px;
+    padding: 15px;
+  }
+
+  .component-container {
+    padding: 15px;
+  }
+
+  .form-upload-container {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .form-container {
+    max-width: 100%;
+    margin-right: 0;
+  }
+
+  .file-upload-container {
+    padding: 18px;
+    height: auto;
+  }
+
+  .button-container {
+    margin-top: 18px;
+  }
+
+  .table-container {
+    max-height: 500px;
+  }
+
+  .mat-table th,
+  .mat-table td {
+    padding: 10px;
+  }
+}
+
+@media (max-width: 768px) {
+  .header-container {
+    margin: 10px;
+    padding: 10px;
+  }
+
+  .component-container {
+    padding: 10px;
+  }
+
+  .form-upload-container {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .form-container {
+    max-width: 100%;
+    margin-right: 0;
+  }
+
+  .file-upload-container {
+    padding: 15px;
+    height: auto;
+  }
+
+  .button-container {
+    margin-top: 15px;
+  }
+
+  .table-container {
+    max-height: 400px;
+  }
+
+  .mat-table th,
+  .mat-table td {
+    padding: 8px;
+  }
+}
+
+@media (max-width: 576px) {
+  .header-container {
+    margin: 5px;
+    padding: 5px;
+  }
+
+  .component-container {
+    padding: 5px;
+  }
+
+  .form-upload-container {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .form-container {
+    margin-bottom: 10px;
+    max-width: 100%;
+  }
+
+  .file-upload-container {
+    padding: 10px;
+    height: auto;
+  }
+
+  .button-container {
+    margin-top: 10px;
+  }
+
+  .table-container {
+    max-height: 300px;
+  }
+
+  .mat-table th,
+  .mat-table td {
+    font-size: 12px;
+    padding: 6px;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/app/biomarkers/biomarkers.component.css b/frontend/src/app/biomarkers/biomarkers.component.css
index 0521e7e..0ebea9e 100644
--- a/frontend/src/app/biomarkers/biomarkers.component.css
+++ b/frontend/src/app/biomarkers/biomarkers.component.css
@@ -1,3 +1,4 @@
+/* Header Container */
 .header-container {
     margin: 20px;
     display: flex;
@@ -6,6 +7,7 @@
     background-color: #f9f9f9;
 }
 
+/* Main Component Container */
 .component-container {
     display: flex;
     flex-direction: column;
@@ -13,6 +15,7 @@
     padding: 20px;
 }
 
+/* Biomarker Container */
 .biomarker-container {
     display: flex;
     flex-direction: column;
@@ -20,6 +23,7 @@
     width: 20%;
 }
 
+/* Cohort and Button Containers */
 .cohort-selection-container, .button-container {
     display: flex;
     flex-direction: column;
@@ -28,6 +32,7 @@
     padding: 10px 0;
 }
 
+/* Cohort Container */
 .cohort-container {
     display: flex;
     flex-direction: column;
@@ -37,6 +42,7 @@
     margin-bottom: 20px;
 }
 
+/* Cohort List */
 .cohort-list {
     display: flex;
     flex-wrap: wrap;
@@ -48,6 +54,7 @@
     margin: 0 10px;
 }
 
+/* Color Circle */
 .color-circle {
     display: inline-block;
     width: 12px;
@@ -56,10 +63,12 @@
     margin-right: 2px;
 }
 
+/* Full Width and Form Field */
 .full-width, .mat-form-field {
     width: 100%;
 }
 
+/* Chip Listbox */
 mat-chip-listbox {
     flex-wrap: wrap;
     padding: 10px;
@@ -69,4 +78,75 @@ mat-chip-option {
     margin: 5px;
     background-color: #d1c4e9;
     color: #4a148c;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 1200px) {
+    .biomarker-container {
+        width: 30%;
+    }
+
+    .cohort-selection-container, .button-container {
+        width: 50%;
+    }
+}
+
+@media (max-width: 992px) {
+    .header-container, .component-container {
+        padding: 15px;
+    }
+
+    .biomarker-container,
+    .cohort-selection-container,
+    .button-container {
+        width: 60%;
+    }
+}
+
+@media (max-width: 768px) {
+    .header-container, .component-container {
+        padding: 10px;
+    }
+
+    .biomarker-container,
+    .cohort-selection-container,
+    .button-container {
+        width: 80%;
+    }
+
+    .cohort-list p {
+        margin: 5px;
+    }
+
+    mat-chip-listbox {
+        padding: 5px;
+    }
+}
+
+@media (max-width: 576px) {
+
+    .header-container,
+    .component-container {
+        padding: 8px;
+        margin: 10px;
+    }
+
+    .biomarker-container,
+    .cohort-selection-container,
+    .button-container {
+        width: 100%;
+    }
+
+    .cohort-list p {
+        margin: 3px;
+    }
+
+    .color-circle {
+        width: 10px;
+        height: 10px;
+    }
+
+    mat-chip-option {
+        font-size: 12px;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/app/cohorts/cohorts.component.css b/frontend/src/app/cohorts/cohorts.component.css
index d331049..f0e88f8 100644
--- a/frontend/src/app/cohorts/cohorts.component.css
+++ b/frontend/src/app/cohorts/cohorts.component.css
@@ -33,4 +33,93 @@
 .mat-table th:last-child,
 .mat-table td:last-child {
   border-right: none;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 1200px) {
+  .component-container {
+    margin: 15px;
+    padding: 18px;
+  }
+
+  .color-circle {
+    width: 10px;
+    height: 10px;
+    margin-right: 6px;
+  }
+
+  .cohort-name {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 992px) {
+  .component-container {
+    margin: 10px;
+    padding: 15px;
+  }
+
+  .table-container {
+    max-height: 400px;
+  }
+
+  .color-circle {
+    width: 8px;
+    height: 8px;
+  }
+
+  .cohort-name {
+    font-size: 0.95rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .component-container {
+    margin: 8px;
+    padding: 12px;
+  }
+
+  .table-container {
+    max-height: 300px;
+  }
+
+  .color-circle {
+    width: 7px;
+    height: 7px;
+  }
+
+  .cohort-name {
+    font-size: 0.9rem;
+  }
+
+  .mat-table th,
+  .mat-table td {
+    font-size: 0.85rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .component-container {
+    margin: 5px;
+    padding: 10px;
+  }
+
+  .table-container {
+    max-height: 250px;
+  }
+
+  .color-circle {
+    width: 6px;
+    height: 6px;
+  }
+
+  .cohort-name {
+    font-size: 0.85rem;
+  }
+
+  .mat-table th,
+  .mat-table td {
+    font-size: 0.8rem;
+    padding: 8px;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/app/contact-us/contact-us.component.css b/frontend/src/app/contact-us/contact-us.component.css
index 3498068..0f4305d 100644
--- a/frontend/src/app/contact-us/contact-us.component.css
+++ b/frontend/src/app/contact-us/contact-us.component.css
@@ -1,7 +1,9 @@
+/* General Section Styling */
 .section.colored {
     padding: 60px 0;
 }
 
+/* Card Container */
 .card-container {
     perspective: 1000px;
     margin: 10px;
@@ -11,7 +13,7 @@
     justify-content: center;
     padding-left: 15px;
     padding-right: 15px;
-    
+
 }
 
 .card {
@@ -34,6 +36,7 @@
     transform: rotateY(180deg);
 }
 
+/* Card Faces */
 .card-front,
 .card-back {
     width: 100%;
@@ -88,6 +91,7 @@
     margin-bottom: 1.25rem;
 }
 
+/* Profile Image */
 .img-fluid {
     border-radius: 50%;
     width: 150px;
@@ -97,6 +101,7 @@
     margin-bottom: 20px;
 }
 
+/* Section Title */
 .section-title {
     margin-bottom: 40px;
     font-size: 32px;
@@ -104,6 +109,7 @@
     text-align: center;
 }
 
+/* Container and Row */
 .container {
     display: flex;
     justify-content: center;
@@ -120,6 +126,7 @@
     width: 100%;
 }
 
+/* Card Actions */
 .card-actions {
     display: flex;
     justify-content: center;
@@ -134,6 +141,7 @@
     text-align: center;
 }
 
+/* Icon Button */
 .icon-button {
     background: none;
     border: none;
@@ -151,4 +159,119 @@
     color: inherit;
     width: 36px;
     height: 36px;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 1200px) {
+    .card-container {
+        flex: 1 1 calc(50% - 60px);
+        max-width: calc(50% - 60px);
+    }
+
+    .card-title {
+        font-size: 1.15rem;
+    }
+
+    .card-text {
+        font-size: 0.95rem;
+    }
+}
+
+@media (max-width: 992px) {
+    .card-container {
+        flex: 1 1 calc(100% - 40px);
+        max-width: calc(100% - 40px);
+    }
+
+    .section-title {
+        font-size: 28px;
+    }
+
+    .card {
+        height: 350px;
+    }
+
+    .img-fluid {
+        width: 120px;
+        height: 120px;
+    }
+
+    .card-title {
+        font-size: 1.1rem;
+    }
+
+    .card-text {
+        font-size: 0.9rem;
+    }
+
+    .icon-button {
+        font-size: 32px;
+    }
+}
+
+@media (max-width: 768px) {
+    .section.colored {
+        padding: 40px 0;
+    }
+
+    .card {
+        height: 300px;
+    }
+
+    .section-title {
+        font-size: 24px;
+    }
+
+    .card-title {
+        font-size: 1rem;
+    }
+
+    .card-text {
+        font-size: 0.85rem;
+    }
+
+    .img-fluid {
+        width: 100px;
+        height: 100px;
+    }
+
+    .icon-button {
+        font-size: 28px;
+    }
+}
+
+@media (max-width: 576px) {
+    .section.colored {
+        padding: 30px 0;
+    }
+
+    .section-title {
+        font-size: 20px;
+        margin-bottom: 20px;
+    }
+
+    .card {
+        height: 250px;
+    }
+
+    .card-container {
+        margin: 5px;
+    }
+
+    .img-fluid {
+        width: 80px;
+        height: 80px;
+    }
+
+    .card-title {
+        font-size: 0.9rem;
+    }
+
+    .card-text {
+        font-size: 0.8rem;
+    }
+
+    .icon-button {
+        font-size: 24px;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/app/footer/footer.component.css b/frontend/src/app/footer/footer.component.css
index f2b742a..83ab9e7 100644
--- a/frontend/src/app/footer/footer.component.css
+++ b/frontend/src/app/footer/footer.component.css
@@ -22,6 +22,7 @@
   text-transform: uppercase;
 }
 
+/* Main Headers */
 .main-headers {
   display: flex;
   justify-content: space-between;
@@ -34,4 +35,80 @@
 
 ::ng-deep .mat-mdc-list-item-unscoped-content {
   color: white !important;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 1200px) {
+  :host {
+    padding-left: 30px;
+    font-size: 15px;
+  }
+
+  .main-headers {
+    font-size: 24px;
+  }
+
+  .copyright {
+    font-size: 11px;
+  }
+}
+
+@media (max-width: 992px) {
+  :host {
+    padding-left: 20px;
+    padding-top: 20px;
+    font-size: 14px;
+  }
+
+  .main-headers {
+    font-size: 20px;
+    text-align: center;
+  }
+
+  .main-headers .col-12 {
+    margin-bottom: 10px;
+  }
+
+  .copyright {
+    font-size: 10px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+}
+
+@media (max-width: 768px) {
+  :host {
+    padding: 15px 10px;
+    font-size: 13px;
+    text-align: center;
+  }
+
+  .main-headers {
+    font-size: 18px;
+  }
+
+  .copyright {
+    font-size: 9px;
+  }
+}
+
+@media (max-width: 576px) {
+  :host {
+    padding: 10px 5px;
+    font-size: 12px;
+  }
+
+  .main-headers {
+    font-size: 16px;
+  }
+
+  .main-headers .col-12 {
+    margin-bottom: 5px;
+  }
+
+  .copyright {
+    font-size: 8px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/app/home/home.component.css b/frontend/src/app/home/home.component.css
index ec1470f..d70f7a3 100644
--- a/frontend/src/app/home/home.component.css
+++ b/frontend/src/app/home/home.component.css
@@ -177,4 +177,121 @@ a.button {
 
 a.button:hover {
     background-color: #660035;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 1200px) {
+    .about-item {
+        width: 70%;
+    }
+
+    .section-content {
+        padding: 0 15%;
+    }
+
+    .counter .count-item {
+        width: 150px;
+    }
+}
+
+@media (max-width: 992px) {
+    .welcome-area {
+        height: 35vh
+    }
+
+    .welcome-area .header-text h1 {
+        font-size: 2.5vw;
+    }
+
+    .about-item {
+        width: 80%;
+    }
+
+    .counter .count-item strong {
+        font-size: 2.5vw;
+    }
+
+    .counter .count-item span {
+        font-size: 1.5vw;
+    }
+
+    .citation-section,
+    .section-content {
+        padding: 0 10%;
+    }
+
+    .section-content .text {
+        font-size: 1.2vw;
+    }
+}
+
+@media (max-width: 768px) {
+    .welcome-area {
+        height: 30vh;
+    }
+
+    .welcome-area .header-text h1 {
+        font-size: 3.5vw;
+    }
+
+    .about-item {
+        width: 90%;
+    }
+
+    .counter .count-item strong {
+        font-size: 3vw;
+    }
+
+    .counter .count-item span {
+        font-size: 1.8vw;
+    }
+
+    .citation-section,
+    .section-content {
+        padding: 0 5%;
+    }
+
+    .section-content .text {
+        font-size: 1.5vw;
+    }
+}
+
+@media (max-width: 576px) {
+    .welcome-area {
+        height: 25vh;
+    }
+
+    .welcome-area .header-text h1 {
+        font-size: 4.5vw;
+    }
+
+    .about-title {
+        font-size: 4vw;
+    }
+
+    .about-item p {
+        font-size: 2vw;
+    }
+
+    .counter {
+        height: 25vh;
+    }
+
+    .counter .count-item strong {
+        font-size: 4vw;
+    }
+
+    .counter .count-item span {
+        font-size: 2.5vw;
+    }
+
+    .section-content .text {
+        font-size: 2vw;
+    }
+
+    .counts-wrapper {
+        /* Stack counters vertically on small screens */
+        flex-direction: column;
+        gap: 10px;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/app/imprint/imprint.component.css b/frontend/src/app/imprint/imprint.component.css
index 45d3030..490a665 100644
--- a/frontend/src/app/imprint/imprint.component.css
+++ b/frontend/src/app/imprint/imprint.component.css
@@ -1,16 +1,21 @@
+/* Main Container */
 .mat-container {
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding: 20px;
 }
 
+/* Row Styling */
 .mat-row {
   display: flex;
   justify-content: center;
   width: 100%;
   margin-top: 16px;
+  flex-wrap: wrap;
 }
 
+/* Column Styling */
 .mat-column {
   flex: 1;
   max-width: 45%;
@@ -19,11 +24,83 @@
   justify-content: center;
 }
 
+/* Fixed Card Size */
 .fixed-card-size {
   width: 100%;
   max-width: 600px;
+  padding: 16px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  background-color: #fff;
 }
 
+/* Text Centering */
 .text-center {
   text-align: center;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 1200px) {
+  .mat-column {
+    max-width: 60%;
+  }
+
+  .fixed-card-size {
+    max-width: 500px;
+    padding: 12px;
+  }
+}
+
+@media (max-width: 992px) {
+  .mat-column {
+    max-width: 80%;
+  }
+
+  .fixed-card-size {
+    max-width: 400px;
+    padding: 12px;
+  }
+}
+
+@media (max-width: 768px) {
+  .mat-container {
+    padding: 10px;
+  }
+
+  .mat-row {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .mat-column {
+    max-width: 100%;
+    margin: 5px 0;
+  }
+
+  .fixed-card-size {
+    max-width: 90%;
+  }
+}
+
+@media (max-width: 576px) {
+  .mat-container {
+    padding: 8px;
+  }
+
+  .mat-row {
+    margin-top: 10px;
+  }
+
+  .mat-column {
+    max-width: 100%;
+  }
+
+  .fixed-card-size {
+    max-width: 100%;
+    padding: 8px;
+  }
+
+  .text-center {
+    font-size: 14px;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/app/longitudinal/longitudinal.component.css b/frontend/src/app/longitudinal/longitudinal.component.css
index a7f5dbf..32156f0 100644
--- a/frontend/src/app/longitudinal/longitudinal.component.css
+++ b/frontend/src/app/longitudinal/longitudinal.component.css
@@ -1,3 +1,4 @@
+/* General container styles */
 .header-container {
     margin: 20px;
     display: flex;
@@ -13,11 +14,13 @@
     padding: 20px;
 }
 
+/* Longitudinal container */
 .longitudinal-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 20%;
+    margin-bottom: 20px;
 }
 
 .button-container {
@@ -25,13 +28,14 @@
     flex-direction: column;
     align-items: center;
     width: 40%;
-    padding: 50 0;
 }
 
+/* Full-width inputs and table */
 .full-width, .mat-form-field, .mat-form-field-infix, table {
     width: 100%;
 }
 
+/* Chip listbox styling */
 mat-chip-listbox {
     flex-wrap: wrap;
     padding: 10px;
@@ -43,6 +47,80 @@ mat-chip-option {
     color: #4a148c;
 }
 
+/* Lineplot styling */
 .lineplot {
     display: flex;
+}
+
+/* Responsive design adjustments */
+@media (max-width: 1200px) {
+    .longitudinal-container {
+        width: 25%;
+    }
+
+    .button-container {
+        width: 50%;
+    }
+}
+
+@media (max-width: 992px) {
+    .longitudinal-container {
+        width: 40%;
+    }
+
+    .button-container {
+        width: 60%;
+        padding: 30px 0;
+    }
+
+    .header-container {
+        padding: 15px;
+    }
+
+    .component-container {
+        padding: 15px;
+    }
+}
+
+@media (max-width: 768px) {
+
+    .longitudinal-container {
+        width: 100%;
+        margin-bottom: 15px;
+    }
+
+    .button-container {
+        width: 100%;
+        padding: 20px 0;
+    }
+
+    .header-container, .component-container {
+        padding: 10px;
+    }
+
+    .lineplot {
+        flex-direction: column;
+    }
+}
+
+@media (max-width: 576px) {
+
+    .longitudinal-container {
+        width: 100%;
+        margin-bottom: 10px;
+    }
+
+    .button-container {
+        width: 100%;
+        padding: 15px 0;
+    }
+
+    .header-container, .component-container {
+        padding: 5px;
+    }
+
+    mat-chip-option {
+        font-size: 12px;
+        padding: 5px;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/app/mappings/mappings.component.css b/frontend/src/app/mappings/mappings.component.css
index 13f2f9b..1fd2c3f 100644
--- a/frontend/src/app/mappings/mappings.component.css
+++ b/frontend/src/app/mappings/mappings.component.css
@@ -1,23 +1,12 @@
-/* General layout and spacing */
-:host {
-    display: block;
+/* Header Container */
+.header-container {
     margin: 20px;
+    display: flex;
+    flex-direction: column;
     padding: 20px;
     background-color: #f9f9f9;
 }
 
-h1 {
-    margin-bottom: 20px;
-}
-
-p {
-    padding: 10px 20px;
-    line-height: 1.6;
-    background-color: #ffffff;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-}
-
 .content-container {
     padding: 20px;
     background-color: #ffffff;
@@ -114,4 +103,78 @@ p {
 .selected-modality {
     background-color: #660035;
     color: white;
+}
+
+/* Responsive adjustments */
+@media (max-width: 1200px) {
+    .chord-diagram {
+        flex: 1 1 45%;
+        max-width: 500px;
+    }
+}
+
+@media (max-width: 992px) {
+    .chord-diagram {
+        flex: 1 1 48%;
+        max-width: 500px;
+    }
+
+    .header-container {
+        padding: 15px;
+    }
+
+    .content-container {
+        padding: 15px;
+    }
+
+    .modality-buttons {
+        margin-bottom: 15px;
+    }
+}
+
+@media (max-width: 768px) {
+    .chord-diagram {
+        flex: 1 1 100%;
+        max-width: 100%;
+    }
+
+    .header-container, .content-container {
+        padding: 10px;
+    }
+
+    .modality-buttons {
+        text-align: center;
+    }
+
+    ::ng-deep .legend-text {
+        font-size: 10px;
+    }
+
+    .max-features-wrapper {
+        margin-bottom: 15px;
+    }
+}
+
+@media (max-width: 576px) {
+    .chord-diagram {
+        flex: 1 1 100%;
+        max-width: 100%;
+    }
+
+    .header-container, .content-container {
+        padding: 5px;
+    }
+
+    .modality-buttons {
+        margin-bottom: 10px;
+    }
+
+    .featureNumber {
+        font-size: 12px;
+        margin-left: 5px;
+    }
+
+    ::ng-deep .legend-text {
+        font-size: 9px;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/app/nav-bar/nav-bar.component.css b/frontend/src/app/nav-bar/nav-bar.component.css
index 19683ec..993e27d 100644
--- a/frontend/src/app/nav-bar/nav-bar.component.css
+++ b/frontend/src/app/nav-bar/nav-bar.component.css
@@ -1,3 +1,4 @@
+/* Header Area */
 .header-area {
     margin-top: 50px;
     height: 100px;
@@ -58,6 +59,7 @@ a.disable {
     color: red !important;
 }
 
+/* Tools Menu */
 .tools-menu {
     position: relative;
 }
@@ -101,4 +103,110 @@ a.disable {
 
 .dropdown-item:not(:last-child) {
     border-bottom: 1px solid #eaeaea;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 1200px) {
+    .header-area {
+        margin-top: 30px;
+        height: 80px;
+    }
+
+    .header-area .main-nav {
+        padding: 0 15px;
+    }
+
+    .header-area .main-nav .nav li {
+        padding: 0 15px;
+    }
+
+    .header-area .main-nav .nav li a {
+        font-size: 1.2vw;
+    }
+}
+
+@media (max-width: 992px) {
+    .header-area {
+        margin-top: 20px;
+        height: 70px;
+    }
+
+    .header-area .main-nav {
+        padding: 0 10px;
+    }
+
+    .header-area .main-nav .nav li {
+        padding: 0 10px;
+    }
+
+    .header-area .main-nav .nav li a {
+        font-size: 1.5vw;
+    }
+
+    .img-fluid {
+        max-height: 50px;
+    }
+}
+
+@media (max-width: 768px) {
+    .header-area {
+        margin-top: 15px;
+        height: 60px;
+    }
+
+    .header-area .main-nav {
+        padding: 10px;
+        box-shadow: none;
+    }
+
+    .header-area .main-nav .nav {
+        width: 100%;
+        text-align: center;
+    }
+
+    .header-area .main-nav .nav li {
+        padding: 0 5px;
+        width: 100%;
+    }
+
+    .header-area .main-nav .nav li a {
+        font-size: 2vw;
+        height: auto;
+        line-height: normal;
+        padding: 0 10px;
+    }
+
+    .img-fluid {
+        max-height: 40px;
+    }
+}
+
+@media (max-width: 576px) {
+    .header-area {
+        margin-top: 10px;
+        height: 50px;
+    }
+
+    .header-area .main-nav {
+        padding: 5px;
+    }
+
+    .header-area .main-nav .nav li {
+        padding: 0 5px;
+    }
+
+    .header-area .main-nav .nav li a {
+        font-size: 3vw;
+        padding: 0 5px;
+    }
+
+    .img-fluid {
+        max-height: 30px;
+        padding-left: 0;
+    }
+
+    .dropdown-menu {
+        min-width: 100%;
+        position: relative;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/app/study-picker/study-picker.component.css b/frontend/src/app/study-picker/study-picker.component.css
index 2c7cc51..0763145 100644
--- a/frontend/src/app/study-picker/study-picker.component.css
+++ b/frontend/src/app/study-picker/study-picker.component.css
@@ -1,51 +1,74 @@
+/* Header Container */
+.header-container {
+  margin: 20px;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  background-color: #f9f9f9;
+}
+
+/* Component container */
 .component-container {
-  padding: 0 20px;
-  display: block;
   padding: 20px;
   background-color: #f9f9f9;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
 }
 
+/* Input container */
+.input-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 600px;
+  margin: 20px 0;
+}
+
+/* Full width for form fields and inputs */
 .full-width, .mat-form-field, .mat-form-field-infix, table {
   width: 100%;
 }
 
+/* Chip listbox wrapping */
 mat-chip-listbox {
   flex-wrap: wrap;
   padding: 10px;
 }
 
+/* Chip options */
 mat-chip-option {
   margin: 5px;
   background-color: #d1c4e9;
   color: #99004f;
 }
 
+/* Table container, button container, and input container alignment */
 .table-container, .button-container, .input-container {
   display: flex;
   justify-content: center;
-  padding: 10px;
+  width: 100%;
 }
 
-.table-container, .button-container {
+/* Button container adjustments */
+.button-container {
+  display: flex;
+  justify-content: center;
   margin-top: 10px;
+  padding: 10px;
 }
 
-.table-container {
-  align-items: center;
-}
-
-.input-container {
-  flex-direction: column;
-  align-items: center;
-  margin-top: 20px;
-}
-
+/* Table styling */
 table {
   border-collapse: collapse;
   background-color: #ffffff;
   color: #000000;
   margin-top: 20px;
   padding: 10px;
+  width: 90%;
+  max-width: 100%;
 }
 
 table, th, td {
@@ -62,18 +85,12 @@ thead, th {
   color: white !important;
 }
 
-tbody tr:nth-child(even) {
-  background-color: #f9f9f9;
-}
-
-tbody tr:hover {
-  background-color: #e1bee7;
-}
-
+/* Body padding */
 body {
   padding: 40px 20px;
 }
 
+/* Color circle for display */
 .color-circle {
   display: inline-block;
   width: 10px;
@@ -83,8 +100,73 @@ body {
   vertical-align: middle;
 }
 
+/* Missing features cell */
 .missing-features-cell {
   max-width: 100px;
   word-wrap: break-word;
   white-space: normal;
+}
+
+/* Responsive adjustments */
+@media (max-width: 1200px) {
+
+  .table-container, .button-container, .input-container {
+    width: 70%;
+  }
+
+  .missing-features-cell {
+    max-width: 150px;
+  }
+}
+
+/* Medium screens (tablets) */
+@media (max-width: 992px) {
+  .header-container, .component-container {
+    padding: 15px;
+  }
+
+  .table-container, .button-container, .input-container {
+    width: 80%;
+  }
+
+  .missing-features-cell {
+    max-width: 200px;
+  }
+}
+
+@media (max-width: 768px) {
+  .header-container, .component-container {
+    padding: 10px;
+  }
+
+  .input-container {
+    width: 90%;
+    margin-top: 20px;
+  }
+
+  table {
+    width: 100%;
+  }
+
+  table, th, td {
+    padding: 8px;
+  }
+}
+
+@media (max-width: 576px) {
+
+  .header-container,
+  .component-container {
+    padding: 8px;
+    margin: 10px;
+  }
+
+  .input-container {
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  table {
+    width: 100%;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 99cd9b8..27e236f 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -85,7 +85,7 @@ button:hover {
 }
 
 .nav-bar {
-    padding: 0 20%;
+    padding: 0 19%;
     width: 100%;
 }
 
@@ -97,4 +97,81 @@ button:hover {
     position: absolute;
     bottom: 0;
     width: 100%;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 1200px) {
+    .nav-bar {
+        padding: 0 10%;
+    }
+
+    .section-title {
+        font-size: 1.8vw;
+    }
+
+    button {
+        font-size: 1vw;
+    }
+}
+
+@media (max-width: 992px) {
+    .nav-bar {
+        padding: 0 5%;
+    }
+
+    .section-title {
+        font-size: 2.2vw;
+    }
+
+    .text-center, .text, .text-center p, .text p {
+        font-size: 1.2vw;
+    }
+
+    button {
+        font-size: 1.2vw;
+        padding: 8px 16px;
+    }
+}
+
+@media (max-width: 768px) {
+    .nav-bar {
+        padding: 0 5%;
+    }
+
+    .section {
+        padding-top: 50px;
+        padding-bottom: 50px;
+    }
+
+    .section-title {
+        font-size: 3vw;
+    }
+
+    .text-center, .text, .text-center p, .text p {
+        font-size: 1.5vw;
+    }
+
+    button {
+        font-size: 1.5vw;
+        padding: 8px 14px;
+    }
+}
+
+@media (max-width: 576px) {
+    .section-title {
+        font-size: 16px;
+    }
+
+    .text-center, .text, .text-center p, .text p {
+        font-size: 14px;
+    }
+
+    button {
+        font-size: 14px;
+        padding: 6px 12px;
+    }
+
+    .nav-bar {
+        padding: 0 2%;
+    }
 }
\ No newline at end of file

From 1dfe50b25030d19c18dc0ab3cd2b44d37e2a8457 Mon Sep 17 00:00:00 2001
From: Mehmet Can Ay <mehmettt.can.ay@gmail.com>
Date: Thu, 14 Nov 2024 13:22:55 +0100
Subject: [PATCH 2/2] refactor: minor changes

---
 .../src/app/mappings/mappings.component.html  | 144 +++++------
 .../study-picker/study-picker.component.html  | 232 +++++++++---------
 2 files changed, 192 insertions(+), 184 deletions(-)

diff --git a/frontend/src/app/mappings/mappings.component.html b/frontend/src/app/mappings/mappings.component.html
index 075c108..9a802ed 100644
--- a/frontend/src/app/mappings/mappings.component.html
+++ b/frontend/src/app/mappings/mappings.component.html
@@ -1,84 +1,86 @@
-<h1>Mappings</h1>
-<p>
-  <br />
-  The Mappings helps you to identify semantic equivalent of the feature(s) of
-  your interest in another cohort. <br />
-  <br />
+<div class="header-container">
+  <h1>Mappings</h1>
+  <p>
+    <br />
+    The Mappings helps you to identify semantic equivalent of the feature(s) of
+    your interest in another cohort. <br />
+    <br />
 
-  Adjust the "Maximum Number of Features" slider to adjust the maximum number of
-  features to be displayed in a single chord diagram <br />
-  <br />
+    Adjust the "Maximum Number of Features" slider to adjust the maximum number
+    of features to be displayed in a single chord diagram <br />
+    <br />
 
-  You can hover over the feature of your interest to highlight its semantic
-  equivalent(s). <br />
-  <br />
+    You can hover over the feature of your interest to highlight its semantic
+    equivalent(s). <br />
+    <br />
 
-  Some of the modalities are too big to showcase in a singular chord diagram,
-  especially with a low "Maximum Number of Features" setting. You might need to
-  scroll down to be able to see all the diagrams. <br />
-  <br />
+    Some of the modalities are too big to showcase in a singular chord diagram,
+    especially with a low "Maximum Number of Features" setting. You might need
+    to scroll down to be able to see all the diagrams. <br />
+    <br />
 
-  Unfortunately, due to data limitation, there might be no mappings to showcase
-  for some modalities. Please keep in touch, as we are trying to collect more
-  data each day! <br />
-  <br />
+    Unfortunately, due to data limitation, there might be no mappings to
+    showcase for some modalities. Please keep in touch, as we are trying to
+    collect more data each day! <br />
+    <br />
 
-  <strong
-    >You can find all of the mappings in our Parkinson's Disease Common Data
-    Model (PASSIONATE) on
-    <a href="https://zenodo.org/records/10218362" target="_blank"
-      >Zenodo</a
-    ></strong
-  >
-  <br />
-  <br />
-
-  Please select a modality to continue.
-</p>
-<div class="content-container">
-  <!-- Container for modality buttons -->
-  <div class="modality-buttons">
-    <!-- Loop through each modality and create a button -->
-    <button
-      *ngFor="let modality of modalities"
-      (click)="onModalityClick(modality)"
-      [ngClass]="{ 'selected-modality': modality === selectedModality }"
+    <strong
+      >You can find all of the mappings in our Parkinson's Disease Common Data
+      Model (PASSIONATE) on
+      <a href="https://zenodo.org/records/10218362" target="_blank"
+        >Zenodo</a
+      ></strong
     >
-      <!-- Interpolate modality name -->
-      {{ modality }}
-    </button>
-  </div>
+    <br />
+    <br />
 
-  <!-- Conditional display of no-data message -->
-  <div *ngIf="noData" class="no-data-message">
-    Sorry, no mapping to showcase for this modality currently. We are collecting
-    more data, keep in touch!
-  </div>
+    Please select a modality to continue.
+  </p>
+  <div class="content-container">
+    <!-- Container for modality buttons -->
+    <div class="modality-buttons">
+      <!-- Loop through each modality and create a button -->
+      <button
+        *ngFor="let modality of modalities"
+        (click)="onModalityClick(modality)"
+        [ngClass]="{ 'selected-modality': modality === selectedModality }"
+      >
+        <!-- Interpolate modality name -->
+        {{ modality }}
+      </button>
+    </div>
 
-  <!-- Container for max features label and slider -->
-  <div class="max-features-wrapper">
-    <div class="max-features-container">
-      <label id="featureNumber" class="featureNumber"
-        >Maximum Number of Features:
-      </label>
-      <span class="featureNumber">{{ maxFeatures }}</span>
+    <!-- Conditional display of no-data message -->
+    <div *ngIf="noData" class="no-data-message">
+      Sorry, no mapping to showcase for this modality currently. We are
+      collecting more data, keep in touch!
+    </div>
+
+    <!-- Container for max features label and slider -->
+    <div class="max-features-wrapper">
+      <div class="max-features-container">
+        <label id="featureNumber" class="featureNumber"
+          >Maximum Number of Features:
+        </label>
+        <span class="featureNumber">{{ maxFeatures }}</span>
+      </div>
+      <mat-slider
+        [min]="minFeatures"
+        [max]="totalFeatures"
+        step="10"
+        (input)="onSliderChange($event)"
+      >
+        <input matSliderThumb [value]="maxFeatures" />
+      </mat-slider>
     </div>
-    <mat-slider
-      [min]="minFeatures"
-      [max]="totalFeatures"
-      step="10"
-      (input)="onSliderChange($event)"
-    >
-      <input matSliderThumb [value]="maxFeatures" />
-    </mat-slider>
-  </div>
 
-  <!-- Container for chord diagrams -->
-  <div class="chord-diagrams-container">
-    <!-- Loop through each data chunk and create a container for chord diagram -->
-    <div *ngFor="let chunk of dataChunks" class="chord-diagram">
-      <!-- Placeholder for SVG content of chord diagram -->
-      <svg></svg>
+    <!-- Container for chord diagrams -->
+    <div class="chord-diagrams-container">
+      <!-- Loop through each data chunk and create a container for chord diagram -->
+      <div *ngFor="let chunk of dataChunks" class="chord-diagram">
+        <!-- Placeholder for SVG content of chord diagram -->
+        <svg></svg>
+      </div>
     </div>
   </div>
 </div>
diff --git a/frontend/src/app/study-picker/study-picker.component.html b/frontend/src/app/study-picker/study-picker.component.html
index c0b3300..3f0b91e 100644
--- a/frontend/src/app/study-picker/study-picker.component.html
+++ b/frontend/src/app/study-picker/study-picker.component.html
@@ -1,4 +1,4 @@
-<div class="component-container">
+<div class="header-container">
   <h1>StudyPicker</h1>
   <p>
     <br />
@@ -16,127 +16,133 @@ <h1>StudyPicker</h1>
     the datasets for your research. Simply enter your variables below, submit
     your query, and explore the cohorts most relevant to your study.
   </p>
-
-  <!-- Input container for features -->
-  <div class="input-container">
-    <mat-form-field class="full-width">
-      <mat-chip-listbox #chipListBox multiple>
-        <!-- Loop through selected features and display them as chips -->
-        <mat-chip-option
-          *ngFor="let feature of selectedFeatures"
-          [removable]="true"
-          (removed)="removeFeature(feature)"
-        >
-          {{ feature }}
-          <mat-icon matChipRemove>cancel</mat-icon>
-        </mat-chip-option>
-        <input
-          matInput
-          placeholder="Enter variables of interest"
-          [matAutocomplete]="auto"
-          [formControl]="featureCtrl"
-          (matChipInputTokenEnd)="addFeature($any($event))"
-        />
-      </mat-chip-listbox>
-      <!-- Autocomplete dropdown for feature suggestions -->
-      <mat-autocomplete
-        #auto="matAutocomplete"
-        [displayWith]="displayFn"
-        (optionSelected)="optionSelected($event)"
-      >
-        <mat-option
-          *ngFor="let option of filteredFeatures | async"
-          [value]="option"
+  <div class="component-container">
+    <!-- Input container for features -->
+    <div class="input-container">
+      <mat-form-field class="full-width">
+        <mat-chip-listbox #chipListBox multiple>
+          <!-- Loop through selected features and display them as chips -->
+          <mat-chip-option
+            *ngFor="let feature of selectedFeatures"
+            [selectable]="false"
+            [removable]="true"
+            (removed)="removeFeature(feature)"
+          >
+            {{ feature }}
+            <mat-icon matChipRemove>cancel</mat-icon>
+          </mat-chip-option>
+          <input
+            matInput
+            placeholder="Enter variables of interest"
+            [matAutocomplete]="auto"
+            [formControl]="featureCtrl"
+            (matChipInputTokenEnd)="addFeature($any($event))"
+          />
+        </mat-chip-listbox>
+        <!-- Autocomplete dropdown for feature suggestions -->
+        <mat-autocomplete
+          #auto="matAutocomplete"
+          [displayWith]="displayFn"
+          (optionSelected)="optionSelected($event)"
         >
-          {{ option }}
-        </mat-option>
-      </mat-autocomplete>
-    </mat-form-field>
-  </div>
+          <mat-option
+            *ngFor="let option of filteredFeatures | async"
+            [value]="option"
+          >
+            {{ option }}
+          </mat-option>
+        </mat-autocomplete>
+      </mat-form-field>
+    </div>
 
-  <!-- Button container for ranking cohorts -->
-  <div class="button-container">
-    <button
-      mat-raised-button
-      color="primary"
-      (click)="getRankings(selectedFeatures)"
-    >
-      Rank cohorts
-    </button>
-  </div>
+    <!-- Button container for ranking cohorts -->
+    <div class="button-container">
+      <button
+        mat-raised-button
+        color="primary"
+        (click)="getRankings(selectedFeatures)"
+      >
+        Rank cohorts
+      </button>
+    </div>
 
-  <!-- Display cohort rankings if available -->
-  <ng-container *ngIf="cohortRankings.length > 0">
-    <div class="mat-elevation-z8 table-container">
-      <table mat-table [dataSource]="cohortRankings" class="mat-table">
-        <ng-container matColumnDef="cohort">
-          <th mat-header-cell *matHeaderCellDef>Cohorts (Ranked)</th>
-          <td mat-cell *matCellDef="let cohort">
-            <span
-              class="color-circle"
-              [style.background-color]="cohortColors[cohort.cohort]"
-            ></span>
-            {{ cohort.cohort }}
-          </td>
-        </ng-container>
+    <!-- Display cohort rankings if available -->
+    <ng-container *ngIf="cohortRankings.length > 0">
+      <div class="mat-elevation-z8 table-container">
+        <table mat-table [dataSource]="cohortRankings" class="mat-table">
+          <ng-container matColumnDef="cohort">
+            <th mat-header-cell *matHeaderCellDef>Cohorts (Ranked)</th>
+            <td mat-cell *matCellDef="let cohort">
+              <span
+                class="color-circle"
+                [style.background-color]="cohortColors[cohort.cohort]"
+              ></span>
+              {{ cohort.cohort }}
+            </td>
+          </ng-container>
 
-        <ng-container matColumnDef="found">
-          <th mat-header-cell *matHeaderCellDef>Successfully Found</th>
-          <td mat-cell *matCellDef="let cohort">{{ cohort.found }}</td>
-        </ng-container>
+          <ng-container matColumnDef="found">
+            <th mat-header-cell *matHeaderCellDef>Successfully Found</th>
+            <td mat-cell *matCellDef="let cohort">{{ cohort.found }}</td>
+          </ng-container>
 
-        <ng-container matColumnDef="missing">
-          <th mat-header-cell *matHeaderCellDef>Missing Features</th>
-          <td mat-cell *matCellDef="let cohort" class="missing-features-cell">
-            {{ cohort.missing }}
-          </td>
-        </ng-container>
+          <ng-container matColumnDef="missing">
+            <th mat-header-cell *matHeaderCellDef>Missing Features</th>
+            <td mat-cell *matCellDef="let cohort" class="missing-features-cell">
+              {{ cohort.missing }}
+            </td>
+          </ng-container>
 
-        <ng-container matColumnDef="plot">
-          <th mat-header-cell *matHeaderCellDef>Longitudinal</th>
-          <td mat-cell *matCellDef="let cohort" class="plot-longitudinal-cell">
-            <ng-container
-              *ngIf="isDataAvailable(cohort.cohort); else noDataTemplate"
+          <ng-container matColumnDef="plot">
+            <th mat-header-cell *matHeaderCellDef>Longitudinal</th>
+            <td
+              mat-cell
+              *matCellDef="let cohort"
+              class="plot-longitudinal-cell"
             >
-              <button
-                mat-button
-                (click)="redirectToPlot(cohort.cohort, cohort.missing)"
+              <ng-container
+                *ngIf="isDataAvailable(cohort.cohort); else noDataTemplate"
               >
-                Plot
-              </button>
-            </ng-container>
-            <ng-template #noDataTemplate>
-              <span>Data not available</span>
-            </ng-template>
-          </td>
-        </ng-container>
+                <button
+                  mat-button
+                  (click)="redirectToPlot(cohort.cohort, cohort.missing)"
+                >
+                  Plot
+                </button>
+              </ng-container>
+              <ng-template #noDataTemplate>
+                <span>Data not available</span>
+              </ng-template>
+            </td>
+          </ng-container>
 
-        <ng-container matColumnDef="dataAccess">
-          <th mat-header-cell *matHeaderCellDef>Data Access</th>
-          <td mat-cell *matCellDef="let cohort">
-            <ng-container
-              *ngIf="
-                cohortLinks[cohort.cohort] === 'Shared by consortium';
-                else buttonTemplate
-              "
-            >
-              {{ cohortLinks[cohort.cohort] }}
-            </ng-container>
-            <ng-template #buttonTemplate>
-              <button
-                mat-button
-                *ngIf="cohortLinks[cohort.cohort]"
-                (click)="openLink(cohortLinks[cohort.cohort])"
+          <ng-container matColumnDef="dataAccess">
+            <th mat-header-cell *matHeaderCellDef>Data Access</th>
+            <td mat-cell *matCellDef="let cohort" class="data-access-cell">
+              <ng-container
+                *ngIf="
+                  cohortLinks[cohort.cohort] === 'Shared by consortium';
+                  else buttonTemplate
+                "
               >
-                Apply
-              </button>
-            </ng-template>
-          </td>
-        </ng-container>
+                {{ cohortLinks[cohort.cohort] }}
+              </ng-container>
+              <ng-template #buttonTemplate>
+                <button
+                  mat-button
+                  *ngIf="cohortLinks[cohort.cohort]"
+                  (click)="openLink(cohortLinks[cohort.cohort])"
+                >
+                  Apply
+                </button>
+              </ng-template>
+            </td>
+          </ng-container>
 
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-      </table>
-    </div>
-  </ng-container>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+        </table>
+      </div>
+    </ng-container>
+  </div>
 </div>