Applied mobile support to the cards modal

plankanban · Jun 7, 2024 · be5bf81 · be5bf81
1 parent 0e688ef
commit be5bf81
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/client/src/components/Board/Board.module.scss b/client/src/components/Board/Board.module.scss
@@ -51,7 +51,7 @@
     overflow: auto;
     border-radius: 2.5px;
 
-    @media only screen and (max-width: 767px) {
+    @media only screen and (max-width: 797px) {
       height: calc(100vh - 242px);
     }
 

diff --git a/client/src/components/CardModal/CardModal.module.scss b/client/src/components/CardModal/CardModal.module.scss
@@ -26,6 +26,15 @@
 
   .actions {
     margin-bottom: 24px;
+    @media only screen and (max-width: 797px) {
+      margin-bottom: 10px;
+      width: 50%;
+      padding: 10px;
+    }
+    @media only screen and (max-width: 425px) {
+      width: 100%;
+      padding: unset;
+    }
   }
 
   .actionsTitle {
@@ -63,6 +72,9 @@
 
   .contentPadding {
     padding: 8px 8px 0 16px;
+    @media only screen and (max-width: 797px) {
+      width: 100% !important;
+    }
   }
 
   .cursorPointer {
@@ -155,6 +167,10 @@
 
   .modalPadding {
     padding: 0px;
+    @media only screen and (max-width: 797px) {
+      display: flex;
+      flex-flow: column nowrap;
+    }
   }
 
   .moduleHeader {
@@ -185,6 +201,12 @@
 
   .sidebarPadding {
     padding: 8px 16px 0 8px;
+    @media only screen and (max-width: 797px) {
+      width: 100% !important;
+      display: flex;
+      flex-flow: row wrap;
+      align-items: flex-start;
+    }
   }
 
   .text {