Increase size of modal on smaller screens

webkom · Feb 7, 2023 · 1bd7ae2 · 1bd7ae2
1 parent 3df6eb1
commit 1bd7ae2
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/app/components/Modal/Modal.css b/app/components/Modal/Modal.css
@@ -18,9 +18,9 @@ html[data-theme='dark'] .backdrop {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  max-width: 425px;
-  width: 100%;
-  max-height: calc(100vh - 300px);
+  width: 475px;
+  max-width: 100%;
+  max-height: calc(100vh - 100px);
   padding: 35px;
   background: var(--color-white);
   outline: none;
@@ -30,6 +30,10 @@ html[data-theme='dark'] .backdrop {
   box-shadow: 0 2px 8px 2px rgba(104, 112, 118, 7%),
     0 2px 4px -1px rgba(104, 112, 118, 4%);
   border-radius: 1rem;
+
+  @media (--tall-viewport) {
+    max-height: calc(100vh - 300px);
+  }
 }
 
 .closeButton {

diff --git a/app/components/UserAttendance/AttendanceModal.css b/app/components/UserAttendance/AttendanceModal.css
@@ -1,5 +1,9 @@
 .modal {
-  height: calc(100vh - 400px);
+  height: calc(100vh - 100px - 70px);
+
+  @media (--tall-viewport) {
+    max-height: calc(100vh - 300px - 70px);
+  }
 }
 
 .search {

diff --git a/app/routes/photos/components/GalleryPictureModal.css b/app/routes/photos/components/GalleryPictureModal.css
@@ -2,7 +2,7 @@
 
 .content {
   padding: 0;
-  max-width: 1100px;
+  width: 1100px;
   max-height: calc(100vh - 100px);
 
   @media (max-width: 800px) {

diff --git a/app/styles/variables.css b/app/styles/variables.css
@@ -2,6 +2,7 @@
 @custom-media --medium-viewport (max-width: 45em);
 @custom-media --mobile-device (max-width: 992px);
 @custom-media --lego-max-width (max-width: 1100px);
+@custom-media --tall-viewport (min-height: 900px);
 
 :root {
   --lego-background-color: #f8f9fa;