Scrollable bracket

app/features/tournament-bracket/components/Bracket/bracket.css

@@ -8,6 +8,17 @@
   padding-block-end: var(--s-6);
 }
 
+.scrolling-bracket {
+  padding: var(--s-4) var(--s-6);
+  max-width: 100%;
+  max-height: min(1000px, 70vh);
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  border: 2px solid var(--border);
+  border-radius: var(--rounded-sm);
+  overflow: scroll;
+}
+
 .bracket__match__header {
   position: absolute;
   display: flex;

app/features/tournament-bracket/components/Bracket/index.tsx

@@ -3,6 +3,8 @@ import type { Bracket as BracketType } from "../../core/Bracket";
 import { EliminationBracketSide } from "./Elimination";
 import { RoundRobinBracket } from "./RoundRobin";
 import { SwissBracket } from "./Swiss";
+import * as React from "react";
+import { useDraggable } from "react-use-draggable-scroll";
 
 export function Bracket({
   bracket,
@@ -31,7 +33,7 @@ export function Bracket({
 
   if (bracket.type === "single_elimination") {
     return (
-      <BracketContainer>
+      <BracketContainer scrollable>
         <EliminationBracketSide
           type="single"
           bracket={bracket}
@@ -42,7 +44,7 @@ export function Bracket({
   }
 
   return (
-    <BracketContainer>
+    <BracketContainer scrollable>
       <EliminationBracketSide
         type="winners"
         bracket={bracket}
@@ -57,9 +59,43 @@ export function Bracket({
   );
 }
 
-function BracketContainer({ children }: { children: React.ReactNode }) {
+function BracketContainer({
+  children,
+  scrollable = false,
+}: {
+  children: React.ReactNode;
+  scrollable?: boolean;
+}) {
+  if (!scrollable) {
+    return (
+      <div className="bracket" data-testid="brackets-viewer">
+        {children}
+      </div>
+    );
+  }
+
+  return <ScrollableBracketContainer>{children}</ScrollableBracketContainer>;
+}
+
+function ScrollableBracketContainer({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const ref = React.useRef<HTMLDivElement>(
+    null,
+  ) as React.MutableRefObject<HTMLDivElement>;
+  const { events } = useDraggable(ref, {
+    applyRubberBandEffect: true,
+  });
+
   return (
-    <div className="bracket" data-testid="brackets-viewer">
+    <div
+      className="bracket scrolling-bracket"
+      data-testid="brackets-viewer"
+      ref={ref}
+      {...events}
+    >
       {children}
     </div>
   );