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..c64721df 100644 --- 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 index ccee8ee4..52ec230a 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 && (
-
-

{title}

- +
+
+

{title}

+ +
+
{selectedComponent}
-
{selectedComponent}
) ); 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; 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; } 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;