From ed767e76643d3c81ddcdcc5063159b89ad3a484a Mon Sep 17 00:00:00 2001
From: Maksim Eltyshev <meltyshev@gmail.com>
Date: Sun, 20 Nov 2022 15:14:49 +0100
Subject: [PATCH] fix: Fix board actions for mobile

---
 .../components/BoardActions/BoardActions.jsx  | 56 ++++++++++---------
 .../BoardActions/BoardActions.module.scss     | 12 ++++
 2 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/client/src/components/BoardActions/BoardActions.jsx b/client/src/components/BoardActions/BoardActions.jsx
index 9ab6e473..d0cf2ee4 100644
--- a/client/src/components/BoardActions/BoardActions.jsx
+++ b/client/src/components/BoardActions/BoardActions.jsx
@@ -28,33 +28,35 @@ const BoardActions = React.memo(
     onLabelDelete,
   }) => {
     return (
-      <div className={styles.actions}>
-        <div className={styles.action}>
-          <Memberships
-            items={memberships}
-            allUsers={allUsers}
-            permissionsSelectStep={BoardMembershipPermissionsSelectStep}
-            canEdit={canEditMemberships}
-            onCreate={onMembershipCreate}
-            onUpdate={onMembershipUpdate}
-            onDelete={onMembershipDelete}
-          />
-        </div>
-        <div className={styles.action}>
-          <Filters
-            users={filterUsers}
-            labels={filterLabels}
-            allBoardMemberships={memberships}
-            allLabels={labels}
-            canEdit={canEdit}
-            onUserAdd={onUserToFilterAdd}
-            onUserRemove={onUserFromFilterRemove}
-            onLabelAdd={onLabelToFilterAdd}
-            onLabelRemove={onLabelFromFilterRemove}
-            onLabelCreate={onLabelCreate}
-            onLabelUpdate={onLabelUpdate}
-            onLabelDelete={onLabelDelete}
-          />
+      <div className={styles.wrapper}>
+        <div className={styles.actions}>
+          <div className={styles.action}>
+            <Memberships
+              items={memberships}
+              allUsers={allUsers}
+              permissionsSelectStep={BoardMembershipPermissionsSelectStep}
+              canEdit={canEditMemberships}
+              onCreate={onMembershipCreate}
+              onUpdate={onMembershipUpdate}
+              onDelete={onMembershipDelete}
+            />
+          </div>
+          <div className={styles.action}>
+            <Filters
+              users={filterUsers}
+              labels={filterLabels}
+              allBoardMemberships={memberships}
+              allLabels={labels}
+              canEdit={canEdit}
+              onUserAdd={onUserToFilterAdd}
+              onUserRemove={onUserFromFilterRemove}
+              onLabelAdd={onLabelToFilterAdd}
+              onLabelRemove={onLabelFromFilterRemove}
+              onLabelCreate={onLabelCreate}
+              onLabelUpdate={onLabelUpdate}
+              onLabelDelete={onLabelDelete}
+            />
+          </div>
         </div>
       </div>
     );
diff --git a/client/src/components/BoardActions/BoardActions.module.scss b/client/src/components/BoardActions/BoardActions.module.scss
index f5211f93..4725873b 100644
--- a/client/src/components/BoardActions/BoardActions.module.scss
+++ b/client/src/components/BoardActions/BoardActions.module.scss
@@ -1,5 +1,6 @@
 :global(#app) {
   .action {
+    flex: 0 0 auto;
     margin-right: 20px;
   }
 
@@ -8,4 +9,15 @@
     display: flex;
     margin: 20px 20px;
   }
+
+  .wrapper {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
 }