From 030893ac23bf508cde3d9590645a53af0822eabf Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 24 Mar 2025 13:50:50 +0000
Subject: [PATCH] ScrollIndicators: Tweak to be more subtle (#102539)

* tweak scroll indicators to be more subtle

* remove extra bracket
---
 .../src/components/ScrollContainer/ScrollIndicators.tsx  | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/ScrollContainer/ScrollIndicators.tsx b/packages/grafana-ui/src/components/ScrollContainer/ScrollIndicators.tsx
index 8d7819e7efe..2263b607db1 100644
--- a/packages/grafana-ui/src/components/ScrollContainer/ScrollIndicators.tsx
+++ b/packages/grafana-ui/src/components/ScrollContainer/ScrollIndicators.tsx
@@ -54,6 +54,9 @@ export const ScrollIndicators = ({ children }: React.PropsWithChildren<{}>) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => {
+  // we specifically don't want a theme color here
+  // this gradient is more like a shadow
+  const scrollGradientColor = `rgba(0, 0, 0, ${theme.isDark ? 0.25 : 0.08})`;
   return {
     scrollContent: css({
       display: 'flex',
@@ -62,7 +65,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       position: 'relative',
     }),
     scrollIndicator: css({
-      height: theme.spacing(6),
+      height: `max(5%, ${theme.spacing(3)})`,
       left: 0,
       opacity: 0,
       pointerEvents: 'none',
@@ -74,11 +77,11 @@ const getStyles = (theme: GrafanaTheme2) => {
       zIndex: 1,
     }),
     scrollTopIndicator: css({
-      background: `linear-gradient(0deg, transparent, ${theme.colors.background.canvas})`,
+      background: `linear-gradient(0deg, transparent, ${scrollGradientColor})`,
       top: 0,
     }),
     scrollBottomIndicator: css({
-      background: `linear-gradient(180deg, transparent, ${theme.colors.background.canvas})`,
+      background: `linear-gradient(180deg, transparent, ${scrollGradientColor})`,
       bottom: 0,
     }),
     scrollIndicatorVisible: css({