From a2374e15155e9b92b94c5309daeb3b13774ea341 Mon Sep 17 00:00:00 2001
From: Francis Cao <franciscao@gmail.com>
Date: Mon, 17 Aug 2026 16:17:23 -0700
Subject: [PATCH] add padding to avoid content and scroll-bar collision in
 expanded menu

---
 src/components/common/OverlayScrollArea.module.css | 10 ++++++++--
 src/components/metrics/MetricsExpandedTable.tsx    | 14 +++++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/common/OverlayScrollArea.module.css b/src/components/common/OverlayScrollArea.module.css
index ae1ead9bf..dcd274748 100644
--- a/src/components/common/OverlayScrollArea.module.css
+++ b/src/components/common/OverlayScrollArea.module.css
@@ -2,11 +2,17 @@
   --overlay-scrollbar-track: var(--gray-50);
   --overlay-scrollbar-thumb: var(--gray-300);
   --overlay-scrollbar-thumb-hover: var(--gray-400);
+  --overlay-scrollbar-viewport-padding-right: 0px;
+  --overlay-scrollbar-vertical-margin-right: 2px;
+}
+
+.root > :first-child {
+  padding-right: var(--overlay-scrollbar-viewport-padding-right);
 }
 
 .root > [data-orientation="vertical"] {
   width: 4px;
-  margin: 16px 2px;
+  margin: 16px var(--overlay-scrollbar-vertical-margin-right);
   background-color: var(--overlay-scrollbar-track);
 }
 
@@ -38,7 +44,7 @@
   content: "";
 }
 
-:global([data-theme="dark"]) .root {
+[data-theme='dark'] .root {
   --overlay-scrollbar-track: var(--gray-800);
   --overlay-scrollbar-thumb: var(--gray-600);
   --overlay-scrollbar-thumb-hover: var(--gray-500);
diff --git a/src/components/metrics/MetricsExpandedTable.tsx b/src/components/metrics/MetricsExpandedTable.tsx
index bba92420d..1d270ba09 100644
--- a/src/components/metrics/MetricsExpandedTable.tsx
+++ b/src/components/metrics/MetricsExpandedTable.tsx
@@ -1,5 +1,3 @@
-import { Button, Column, DataColumn, DataTable, Icon, Row, SearchField } from '@umami/react-zen';
-import { type ReactNode, useState } from 'react';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { OverlayScrollArea } from '@/components/common/OverlayScrollArea';
 import { useMessages, useWebsiteExpandedMetricsQuery } from '@/components/hooks';
@@ -8,6 +6,8 @@ import { DownloadButton } from '@/components/input/DownloadButton';
 import { MetricLabel } from '@/components/metrics/MetricLabel';
 import { SESSION_COLUMNS } from '@/lib/constants';
 import { formatShortTime } from '@/lib/format';
+import { Button, Column, DataColumn, DataTable, Icon, Row, SearchField } from '@umami/react-zen';
+import { type ReactNode, useState } from 'react';
 
 export interface MetricsExpandedTableProps {
   websiteId: string;
@@ -77,7 +77,15 @@ export function MetricsExpandedTable({
         height="100%"
         loadingIcon="spinner"
       >
-        <OverlayScrollArea orientation="both" style={{ height: '100%', minHeight: 0 }}>
+        <OverlayScrollArea
+          orientation="both"
+          style={{
+            height: '100%',
+            minHeight: 0,
+            ['--overlay-scrollbar-viewport-padding-right' as string]: '14px',
+            ['--overlay-scrollbar-vertical-margin-right' as string]: '6px',
+          }}
+        >
           <Column paddingRight="3">
             {items && (
               <DataTable data={items}>