From 82b2ba298d94550971e7df505844131e43f605e4 Mon Sep 17 00:00:00 2001
From: Fayad <49340720+papiforcex@users.noreply.github.com>
Date: Fri, 26 Jul 2024 19:02:13 +0200
Subject: [PATCH] feat: Improvements for mobile version (#776)

---
 .husky/pre-commit                             |  1 +
 .../Background/Background.module.scss         |  2 ++
 client/src/components/Board/Board.module.scss | 12 +++++++++-
 .../BoardActions/BoardActions.module.scss     | 11 +++++++++-
 .../BoardActions/Filters.module.scss          | 12 +++++++---
 client/src/components/Card/Card.module.scss   | 13 +++++++++++
 .../CardModal/CardModal.module.scss           | 22 +++++++++++++++++++
 client/src/components/Fixed/Fixed.module.scss |  1 +
 .../src/components/Header/Header.module.scss  |  5 +++++
 client/src/components/List/List.module.scss   | 13 +++++++++++
 10 files changed, 87 insertions(+), 5 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 2312dc587..a926c364e 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1 +1,2 @@
+#!/bin/sh
 npx lint-staged
diff --git a/client/src/components/Background/Background.module.scss b/client/src/components/Background/Background.module.scss
index 3125999dc..e5ddb98cf 100644
--- a/client/src/components/Background/Background.module.scss
+++ b/client/src/components/Background/Background.module.scss
@@ -4,5 +4,7 @@
     position: fixed;
     width: 100%;
     z-index: -1;
+    max-width: 100vw;
+    max-height: 100vh;
   }
 }
diff --git a/client/src/components/Board/Board.module.scss b/client/src/components/Board/Board.module.scss
index bd413b9e4..3e59e8895 100644
--- a/client/src/components/Board/Board.module.scss
+++ b/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%;
   }
 }
diff --git a/client/src/components/BoardActions/BoardActions.module.scss b/client/src/components/BoardActions/BoardActions.module.scss
index 34c5f3d80..492369097 100644
--- a/client/src/components/BoardActions/BoardActions.module.scss
+++ b/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;
diff --git a/client/src/components/BoardActions/Filters.module.scss b/client/src/components/BoardActions/Filters.module.scss
index 12c7fc4a9..6a9986daa 100644
--- a/client/src/components/BoardActions/Filters.module.scss
+++ b/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;
diff --git a/client/src/components/Card/Card.module.scss b/client/src/components/Card/Card.module.scss
index e03a1b882..b3bae9c10 100644
--- a/client/src/components/Card/Card.module.scss
+++ b/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 {
diff --git a/client/src/components/CardModal/CardModal.module.scss b/client/src/components/CardModal/CardModal.module.scss
index d563cdf08..1fee28e1f 100644
--- a/client/src/components/CardModal/CardModal.module.scss
+++ b/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 {
diff --git a/client/src/components/Fixed/Fixed.module.scss b/client/src/components/Fixed/Fixed.module.scss
index a3eccab5b..e01c54a8d 100644
--- a/client/src/components/Fixed/Fixed.module.scss
+++ b/client/src/components/Fixed/Fixed.module.scss
@@ -3,5 +3,6 @@
     position: fixed;
     width: 100%;
     z-index: 1;
+    max-width: 100vw;
   }
 }
diff --git a/client/src/components/Header/Header.module.scss b/client/src/components/Header/Header.module.scss
index 8c90d94c9..0ba88121d 100644
--- a/client/src/components/Header/Header.module.scss
+++ b/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 {
diff --git a/client/src/components/List/List.module.scss b/client/src/components/List/List.module.scss
index b1a709602..f1421b235 100644
--- a/client/src/components/List/List.module.scss
+++ b/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 {