feat: Improvements for mobile version (#776)

.husky/pre-commit

@@ -1 +1,2 @@
+#!/bin/sh
 npx lint-staged

client/src/components/Background/Background.module.scss

@@ -4,5 +4,7 @@
     position: fixed;
     width: 100%;
     z-index: -1;
+    max-width: 100vw;
+    max-height: 100vh;
   }
 }

client/src/components/Board/Board.module.scss

@@ -14,6 +14,7 @@
     transition: background 85ms ease-in, opacity 40ms ease-in,
       border-color 85ms ease-in;
     width: 100%;
+    min-width: 272px;
 
     &:active {
       outline: none;
@@ -44,8 +45,9 @@
 
   .lists {
     display: inline-flex;
-    height: 100%;
+    height: calc(100vh - 194px);
     min-width: 100%;
+    border-radius: 2.5px;
   }
 
   .panel {
@@ -60,5 +62,13 @@
 
   .wrapper {
     margin: 0 20px;
+
+    @media only screen and (max-width: 797px) {
+      max-width: 100vw;
+    }
+  }
+
+  .scrollable {
+    min-width: 100%;
   }
 }

client/src/components/BoardActions/BoardActions.module.scss

@@ -2,14 +2,22 @@
   .action {
     align-items: center;
     display: flex;
+    flex-wrap: nowrap;
     flex: 0 0 auto;
-    margin-right: 20px;
+
+    @media only screen and (max-width: 797px) {
+      gap: 10px;
+    }
   }
 
   .actions {
     align-items: center;
     display: flex;
+    flex-flow: norow wrap;
+    justify-content: flex-start;
+    align-items: center;
     margin: 20px 20px;
+    gap: 20px;
   }
 
   .wrapper {
@@ -17,6 +25,7 @@
     overflow-y: hidden;
     -ms-overflow-style: none;
     scrollbar-width: none;
+    max-width: 100vw;
 
     &::-webkit-scrollbar {
       display: none;

client/src/components/BoardActions/Filters.module.scss

@@ -10,6 +10,7 @@
     display: inline-block;
     outline: none;
     padding: 0;
+    white-space: nowrap;
   }
 
   .filterItem {
@@ -45,10 +46,15 @@
   }
 
   .search {
-    height: 30px;
-    margin: 0 12px;
+    height: 24px;
     transition: width 0.2s ease;
-    width: 280px;
+    width: 220px;
+    margin: 0 12px;
+
+    @media only screen and (min-width: 797px) {
+      width: 280px;
+      height: 30px;
+    }
 
     input {
       font-size: 13px;

client/src/components/Card/Card.module.scss

@@ -21,6 +21,13 @@
       background: #ebeef0;
       color: #516b7a;
     }
+
+    @media only screen and (max-width: 797px) {
+      &:focus, &:active {
+        background: #ebeef0;
+        color: #516b7a;
+      }
+    }
   }
 
   .attachment {
@@ -63,6 +70,12 @@
         opacity: 1;
       }
     }
+
+    @media only screen and (max-width: 797px) {
+      .target {
+        opacity: 1;
+      }
+    }
   }
 
   .content {

client/src/components/CardModal/CardModal.module.scss

@@ -25,6 +25,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 {
@@ -62,6 +71,9 @@
 
   .contentPadding {
     padding: 8px 8px 0 16px;
+    @media only screen and (max-width: 797px) {
+      width: 100% !important;
+    }
   }
 
   .cursorPointer {
@@ -154,6 +166,10 @@
 
   .modalPadding {
     padding: 0px;
+    @media only screen and (max-width: 797px) {
+      display: flex;
+      flex-flow: column nowrap;
+    }
   }
 
   .moduleHeader {
@@ -184,6 +200,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 {

client/src/components/Fixed/Fixed.module.scss

@@ -3,5 +3,6 @@
     position: fixed;
     width: 100%;
     z-index: 1;
+    max-width: 100vw;
   }
 }

client/src/components/Header/Header.module.scss

@@ -88,6 +88,11 @@
 
   .userName {
     margin-right: 10px;
+    display: none;
+
+    @media only screen and (min-width: 797px) {
+      display: block;
+    }
   }
 
   .wrapper {

client/src/components/List/List.module.scss

@@ -80,6 +80,12 @@
     &:hover .target {
       opacity: 1;
     }
+
+    @media only screen and (max-width: 797px) {
+      .target {
+        opacity: 1;
+      }
+    }
   }
 
   .headerEditable {
@@ -103,6 +109,13 @@
       background: rgba(9, 30, 66, 0.13);
       color: #516b7a;
     }
+
+    @media only screen and (max-width: 797px) {
+      &:focus, &:active {
+        background: rgba(9, 30, 66, 0.13);
+        color: #516b7a;
+      }
+    }
   }
 
   .headerName {