Merge branch 'dev' into feature/#529-justify-text-elements

Lemoncode · Nov 20, 2024 · 62736e5 · 62736e5
2 parents dac48b8 + 23d0a1f
commit 62736e5
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 17 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
@@ -1,26 +1,43 @@
 .container {
   z-index: 2;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  flex-direction: column;
   background-color: var(--primary-900-50-opacity);
 }
 
+.dialog {
+  position: relative;
+  z-index: 3;
+  width: 90%;
+  max-width: 1280px;
+  height: 80%;
+  overflow: auto;
+  border-radius: var(--border-radius-l);
+}
+
+.dialogContent {
+  overflow: auto;
+  flex: 1;
+}
+
 .dialogHeader {
+  position: sticky;
+  top: 0;
+  z-index: 4;
   background-color: var(--primary-500);
-  width: 70vw;
   display: flex;
   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 {
@@ -41,3 +58,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
@@ -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 className={classes.dialogContent}>{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
@@ -1,6 +1,5 @@
 .container {
   background-color: var(--primary-700);
-  width: 70vw;
   height: auto;
   display: flex;
   flex-direction: column;

diff --git 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;
 }
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
@@ -1,6 +1,5 @@
 .container {
   background-color: var(--primary-700);
-  width: 70vw;
   height: auto;
   display: flex;
   flex-direction: column;