Implement scrolling to ganttchart

package-lock.json

@@ -1451,6 +1451,11 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.27.0.tgz",
       "integrity": "sha512-sj+J0Mo2p2X1e306MHq282WS4/A8Pz/95GIFcsPNMPMZVI3EUrAdSv90al1k+p74WGLCruMXk23bfEDZa71X9Q=="
     },
+    "debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -1532,6 +1537,11 @@
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.19.0.tgz",
       "integrity": "sha512-fRA+BaAWOR/yr/t7T9E9GJztHPeFjj8U35ajyAjCDtAAnTn1Rc1f6W6VGPJrO1tkQv9zWu+JRof7z6oQtiYVFQ=="
     },
+    "easy-bem": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
+      "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A=="
+    },
     "electron-to-chromium": {
       "version": "1.4.14",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.14.tgz",
@@ -3440,6 +3450,16 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-indiana-drag-scroll": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-indiana-drag-scroll/-/react-indiana-drag-scroll-2.1.0.tgz",
+      "integrity": "sha512-Tj94Dv9PkmoKqc9nxK/dzwhtE8pP7NTxmeHqkD8KN0zad1NNE+/JsvRcK4EdqE6CdA2nMESzqPMvv1AzRXdBew==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "debounce": "^1.2.0",
+        "easy-bem": "^1.1.1"
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -12,6 +12,7 @@
     "ramda": "^0.27.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-indiana-drag-scroll": "^2.1.0",
     "theme-ui": "^0.12.1"
   },
   "devDependencies": {

src/pages/honkai3rd/versions/index.tsx

@@ -20,6 +20,7 @@ import {
 } from '../../../data/honkai3rd/versions'
 import { getWeaponById, WeaponData } from '../../../data/honkai3rd/weapons'
 import { addDateToDateString, getDateString } from '../../../lib/string'
+import ScrollContainer from 'react-indiana-drag-scroll'
 
 interface VersionIndexPageProps {
   versionDataList: VersionData[]
@@ -109,6 +110,7 @@ const VersionIndexPage = ({
             Supply Events
           </Heading>
           <Box mb={4}>
+            <ScrollContainer vertical={false}>
               <GanttChart
                 items={currentVersionSupplyEvents.map((supplyEventData) => {
                   const imgSrc = getIconSrcFromItem(supplyEventData.featured[0])
@@ -141,6 +143,7 @@ const VersionIndexPage = ({
                       })
                 }
               />
+            </ScrollContainer>
           </Box>
           <Box>
             <NextLink