Add scrollbar for board tabs, update dependencies

client/package.json

@@ -53,13 +53,13 @@
     "history": "^4.10.1",
     "i18next": "^19.4.5",
     "i18next-browser-languagedetector": "^4.2.0",
-    "initials": "^3.0.1",
+    "initials": "^3.1.0",
     "lodash": "^4.17.15",
     "node-sass": "^4.14.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-beautiful-dnd": "^13.0.0",
-    "react-datepicker": "^2.16.0",
+    "react-datepicker": "^3.0.0",
     "react-dom": "^16.13.1",
     "react-dropzone": "^11.0.1",
     "react-i18next": "^11.5.0",
@@ -84,11 +84,11 @@
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-import": "^2.21.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^4.0.2",
+    "eslint-plugin-react-hooks": "^4.0.4",
     "prettier": "2.0.5"
   }
 }

client/src/components/Boards/Boards.jsx

@@ -1,5 +1,5 @@
 import pick from 'lodash/pick';
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
@@ -16,6 +16,14 @@ import styles from './Boards.module.scss';
 
 const Boards = React.memo(
   ({ items, currentId, isEditable, onCreate, onUpdate, onMove, onDelete }) => {
+    const tabsWrapper = useRef(null);
+
+    const handleWheel = useCallback(({ deltaY }) => {
+      tabsWrapper.current.scrollBy({
+        left: deltaY,
+      });
+    }, []);
+
     const handleDragStart = useCallback(() => {
       closePopup();
     }, []);
@@ -115,25 +123,27 @@ const Boards = React.memo(
     );
 
     return (
-      <div className={styles.wrapper}>
-        {isEditable ? (
-          <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-            <Droppable droppableId="boards" type={DroppableTypes.BOARD} direction="horizontal">
-              {({ innerRef, droppableProps, placeholder }) => (
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                <div {...droppableProps} ref={innerRef} className={styles.tabs}>
-                  {renderEditableItems(items)}
-                  {placeholder}
-                  <AddPopup onCreate={onCreate}>
-                    <Button icon="plus" className={styles.addButton} />
-                  </AddPopup>
-                </div>
-              )}
-            </Droppable>
-          </DragDropContext>
-        ) : (
-          <div className={styles.tabs}>{renderItems(items)}</div>
-        )}
+      <div className={styles.wrapper} onWheel={handleWheel}>
+        <div ref={tabsWrapper} className={styles.tabsWrapper}>
+          {isEditable ? (
+            <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+              <Droppable droppableId="boards" type={DroppableTypes.BOARD} direction="horizontal">
+                {({ innerRef, droppableProps, placeholder }) => (
+                  // eslint-disable-next-line react/jsx-props-no-spreading
+                  <div {...droppableProps} ref={innerRef} className={styles.tabs}>
+                    {renderEditableItems(items)}
+                    {placeholder}
+                    <AddPopup onCreate={onCreate}>
+                      <Button icon="plus" className={styles.addButton} />
+                    </AddPopup>
+                  </div>
+                )}
+              </Droppable>
+            </DragDropContext>
+          ) : (
+            <div className={styles.tabs}>{renderItems(items)}</div>
+          )}
+        </div>
       </div>
     );
   },

client/src/components/Boards/Boards.module.scss

@@ -67,16 +67,47 @@
   }
 
   .tabs {
-    border-bottom: 2px solid rgba(0, 0, 0, 0.24);;
     display: flex;
     height: 38px;
     flex: 0 0 auto;
     white-space: nowrap;
   }
 
+  .tabsWrapper {
+    display: flex;
+    flex: 0 0 auto;
+    height: 56px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+
+    &:hover {
+      height: 38px;
+    }
+
+    &::-webkit-scrollbar {
+      height: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+    }
+  }
+
   .wrapper {
+    border-bottom: 2px solid rgba(0, 0, 0, 0.24);
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
+    height: 38px;
+    overflow: hidden;
+
+    &:hover {
+      border-bottom: 0;
+    }
   }
 }