From 6493392214b10149f543d0b5dc2c465deffa55de Mon Sep 17 00:00:00 2001
From: Antonio Contreras <antoniocontrerasroman@gmail.com>
Date: Tue, 12 Nov 2024 11:31:40 +0100
Subject: [PATCH 1/4] fixed dialog component

---
 .../modal-dialog.component.module.css         | 24 ++++++++++++++++---
 .../modal-dialog/modal-dialog.component.tsx   | 22 +++++++++--------
 src/pods/about/about.pod.module.css           |  1 -
 3 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/common/components/modal-dialog/modal-dialog.component.module.css b/src/common/components/modal-dialog/modal-dialog.component.module.css
index 20f334c4..9e7cf4d9 100644
--- a/src/common/components/modal-dialog/modal-dialog.component.module.css
+++ b/src/common/components/modal-dialog/modal-dialog.component.module.css
@@ -1,6 +1,6 @@
 .container {
   z-index: 2;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
@@ -8,13 +8,24 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-direction: column;
   background-color: var(--primary-900-50-opacity);
 }
 
+.dialog {
+  position: relative;
+  z-index: 3;
+  width: 90%;
+  background-color: var(--primary-900-50-opacity);
+  max-width: 1280px;
+  height: 80%;
+  overflow: auto;
+}
+
 .dialogHeader {
+  position: sticky;
+  top: 0;
+  z-index: 4;
   background-color: var(--primary-500);
-  width: 70vw;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -41,3 +52,10 @@
 .dialogButton:hover {
   cursor: pointer;
 }
+
+@media screen and (max-device-width: 780px) {
+  .dialog {
+    width: 92%;
+    height: 82%;
+  }
+}
diff --git a/src/common/components/modal-dialog/modal-dialog.component.tsx b/src/common/components/modal-dialog/modal-dialog.component.tsx
index ccee8ee4..de8a701d 100644
--- a/src/common/components/modal-dialog/modal-dialog.component.tsx
+++ b/src/common/components/modal-dialog/modal-dialog.component.tsx
@@ -16,17 +16,19 @@ export const ModalDialogComponent: React.FC = () => {
   return (
     isOpen && (
       <div className={classes.container}>
-        <div className={classes.dialogHeader}>
-          <h2 className={classes.dialogTitle}>{title}</h2>
-          <button
-            className={classes.dialogButton}
-            onClick={handleClick}
-            aria-label="close modal dialog"
-          >
-            <XIconComponent />
-          </button>
+        <div className={classes.dialog}>
+          <div className={classes.dialogHeader}>
+            <h2 className={classes.dialogTitle}>{title}</h2>
+            <button
+              className={classes.dialogButton}
+              onClick={handleClick}
+              aria-label="close modal dialog"
+            >
+              <XIconComponent />
+            </button>
+          </div>
+          <div>{selectedComponent}</div>
         </div>
-        <div>{selectedComponent}</div>
       </div>
     )
   );
diff --git a/src/pods/about/about.pod.module.css b/src/pods/about/about.pod.module.css
index 6fa22325..dc41a9f8 100644
--- a/src/pods/about/about.pod.module.css
+++ b/src/pods/about/about.pod.module.css
@@ -1,6 +1,5 @@
 .container {
   background-color: var(--primary-700);
-  width: 70vw;
   height: auto;
   display: flex;
   flex-direction: column;

From 1acd3c14874853098c0ba0c3015eb4164507e939 Mon Sep 17 00:00:00 2001
From: Antonio Contreras <antoniocontrerasroman@gmail.com>
Date: Tue, 12 Nov 2024 11:54:31 +0100
Subject: [PATCH 2/4] fix team wrapper class

---
 src/pods/about/components/developmentTeam.component.module.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pods/about/components/developmentTeam.component.module.css b/src/pods/about/components/developmentTeam.component.module.css
index 85a17ad3..7aea40b4 100644
--- a/src/pods/about/components/developmentTeam.component.module.css
+++ b/src/pods/about/components/developmentTeam.component.module.css
@@ -13,4 +13,6 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-md) var(--space-xxl);
+  align-items: start;
+  justify-content: center;
 }

From 24c35cbca7631fe59e42363cc06036f4104079db Mon Sep 17 00:00:00 2001
From: Antonio Contreras <antoniocontrerasroman@gmail.com>
Date: Tue, 19 Nov 2024 11:57:58 +0100
Subject: [PATCH 3/4] fix dialog component styles

---
 .../modal-dialog/modal-dialog.component.module.css        | 8 +++++++-
 .../components/modal-dialog/modal-dialog.component.tsx    | 2 +-
 .../components/icon-selector/modal/icon-modal.module.css  | 1 -
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/common/components/modal-dialog/modal-dialog.component.module.css b/src/common/components/modal-dialog/modal-dialog.component.module.css
index 9e7cf4d9..8c30a709 100644
--- a/src/common/components/modal-dialog/modal-dialog.component.module.css
+++ b/src/common/components/modal-dialog/modal-dialog.component.module.css
@@ -6,6 +6,7 @@
   width: 100vw;
   height: 100vh;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: var(--primary-900-50-opacity);
@@ -15,10 +16,15 @@
   position: relative;
   z-index: 3;
   width: 90%;
-  background-color: var(--primary-900-50-opacity);
   max-width: 1280px;
   height: 80%;
   overflow: auto;
+  border-radius: var(--border-radius-m);
+}
+
+.dialogContent {
+  overflow: auto;
+  flex: 1;
 }
 
 .dialogHeader {
diff --git a/src/common/components/modal-dialog/modal-dialog.component.tsx b/src/common/components/modal-dialog/modal-dialog.component.tsx
index de8a701d..52ec230a 100644
--- a/src/common/components/modal-dialog/modal-dialog.component.tsx
+++ b/src/common/components/modal-dialog/modal-dialog.component.tsx
@@ -27,7 +27,7 @@ export const ModalDialogComponent: React.FC = () => {
               <XIconComponent />
             </button>
           </div>
-          <div>{selectedComponent}</div>
+          <div className={classes.dialogContent}>{selectedComponent}</div>
         </div>
       </div>
     )
diff --git a/src/pods/properties/components/icon-selector/modal/icon-modal.module.css b/src/pods/properties/components/icon-selector/modal/icon-modal.module.css
index fca99e9c..620d0236 100644
--- a/src/pods/properties/components/icon-selector/modal/icon-modal.module.css
+++ b/src/pods/properties/components/icon-selector/modal/icon-modal.module.css
@@ -1,6 +1,5 @@
 .container {
   background-color: var(--primary-700);
-  width: 70vw;
   height: auto;
   display: flex;
   flex-direction: column;

From 6d3e75410e120e93c624f2b5b1253773e51770b8 Mon Sep 17 00:00:00 2001
From: Antonio Contreras <antoniocontrerasroman@gmail.com>
Date: Wed, 20 Nov 2024 08:50:37 +0100
Subject: [PATCH 4/4] fix border radius styles

---
 .../modal-dialog/modal-dialog.component.module.css          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/common/components/modal-dialog/modal-dialog.component.module.css b/src/common/components/modal-dialog/modal-dialog.component.module.css
index 8c30a709..c64721df 100644
--- a/src/common/components/modal-dialog/modal-dialog.component.module.css
+++ b/src/common/components/modal-dialog/modal-dialog.component.module.css
@@ -19,7 +19,7 @@
   max-width: 1280px;
   height: 80%;
   overflow: auto;
-  border-radius: var(--border-radius-m);
+  border-radius: var(--border-radius-l);
 }
 
 .dialogContent {
@@ -36,8 +36,8 @@
   justify-content: space-between;
   align-items: center;
   padding: var(--space-s) var(--space-md);
-  border-top-left-radius: var(--border-radius-m);
-  border-top-right-radius: var(--border-radius-m);
+  border-top-left-radius: var(--border-radius-l);
+  border-top-right-radius: var(--border-radius-l);
 }
 
 .dialogTitle {