From b28573455a1282f1b0dea6d1bca37475c4f87cfb Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Sun, 18 Jan 2026 08:39:55 +0100
Subject: [PATCH] feat: create reusable scroll area

---
 .../scroll-area/ScrollArea.module.scss        | 56 +++++++++++++++++++
 .../components/scroll-area/ScrollArea.tsx     | 38 +++++++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 apps/client/src/common/components/scroll-area/ScrollArea.module.scss
 create mode 100644 apps/client/src/common/components/scroll-area/ScrollArea.tsx

diff --git a/apps/client/src/common/components/scroll-area/ScrollArea.module.scss b/apps/client/src/common/components/scroll-area/ScrollArea.module.scss
new file mode 100644
index 000000000..55865f077
--- /dev/null
+++ b/apps/client/src/common/components/scroll-area/ScrollArea.module.scss
@@ -0,0 +1,56 @@
+@use '../../../theme/ontimeColours' as *;
+@use '../../../theme/ontimeStyles' as *;
+
+// copied from index.scss
+$track-color: $white-1;
+$thumb-color: $white-20;
+$thumb-color-hover: $white-60;
+
+.root {
+  position: relative;
+  overflow: hidden;
+}
+
+.viewport {
+  height: 100%;
+  width: 100%;
+  overscroll-behavior: contain;
+}
+
+.scrollbar {
+  background: transparent;
+  opacity: 0;
+  transition: opacity 150ms;
+
+  &[data-orientation='vertical'] {
+    width: 6px;
+  }
+
+  &[data-orientation='horizontal'] {
+    height: 6px;
+  }
+
+  &[data-orientation='horizontal'][data-has-overflow-x] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &[data-scrolling] {
+    transition-duration: 0ms;
+  }
+
+  &[data-hovering],
+  &[data-scrolling] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.thumb {
+  background: $thumb-color;
+  border-radius: 2px;
+
+  &:hover {
+    background: $thumb-color-hover;
+  }
+}
diff --git a/apps/client/src/common/components/scroll-area/ScrollArea.tsx b/apps/client/src/common/components/scroll-area/ScrollArea.tsx
new file mode 100644
index 000000000..77fc69130
--- /dev/null
+++ b/apps/client/src/common/components/scroll-area/ScrollArea.tsx
@@ -0,0 +1,38 @@
+import { CSSProperties, PropsWithChildren, Ref } from 'react';
+import { ScrollArea } from '@base-ui/react/scroll-area';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './ScrollArea.module.scss';
+
+interface ScrollAreaProps {
+  className?: string;
+  viewportClassName?: string;
+  contentClassName?: string;
+  contentStyle?: CSSProperties;
+  ref?: Ref<HTMLDivElement>;
+  orientation?: 'vertical' | 'horizontal';
+}
+
+export default function StyledScrollArea({
+  className,
+  viewportClassName,
+  contentClassName,
+  contentStyle,
+  children,
+  ref,
+  orientation = 'vertical',
+}: PropsWithChildren<ScrollAreaProps>) {
+  return (
+    <ScrollArea.Root className={cx([style.root, className])}>
+      <ScrollArea.Viewport ref={ref} className={cx([style.viewport, viewportClassName])}>
+        <ScrollArea.Content className={contentClassName} style={contentStyle}>
+          {children}
+        </ScrollArea.Content>
+      </ScrollArea.Viewport>
+      <ScrollArea.Scrollbar className={style.scrollbar} orientation={orientation}>
+        <ScrollArea.Thumb className={style.thumb} />
+      </ScrollArea.Scrollbar>
+    </ScrollArea.Root>
+  );
+}