From 5f39f434de3d755c59b7828013b9303a6e37f45d Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Mon, 23 Jun 2025 09:49:55 +0200
Subject: [PATCH] Core: Fix addon scrollbars and align scrollbar colors with
 toolbars

---
 code/addons/a11y/src/components/Tabs.tsx              | 2 ++
 code/core/src/component-testing/components/Subnav.tsx | 9 +++++----
 code/core/src/components/components/bar/bar.tsx       | 9 ++++++---
 code/core/src/manager/components/preview/Toolbar.tsx  | 2 ++
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/code/addons/a11y/src/components/Tabs.tsx b/code/addons/a11y/src/components/Tabs.tsx
index 111a83056e76..1c4cf50fa320 100644
--- a/code/addons/a11y/src/components/Tabs.tsx
+++ b/code/addons/a11y/src/components/Tabs.tsx
@@ -58,6 +58,8 @@ const Subnav = styled.div(({ theme }) => ({
   overflow: 'auto',
   paddingRight: 10,
   gap: 6,
+  scrollbarColor: `${theme.barTextColor} ${theme.background.app}`,
+  scrollbarWidth: 'thin',
 }));
 
 const TabsWrapper = styled.div({});
diff --git a/code/core/src/component-testing/components/Subnav.tsx b/code/core/src/component-testing/components/Subnav.tsx
index 113c89a231dc..dd3a9c4b7158 100644
--- a/code/core/src/component-testing/components/Subnav.tsx
+++ b/code/core/src/component-testing/components/Subnav.tsx
@@ -19,7 +19,7 @@ import {
   SyncIcon,
 } from '@storybook/icons';
 
-import { styled } from 'storybook/theming';
+import { styled, useTheme } from 'storybook/theming';
 
 import { type Call, CallStates, type ControlStates } from '../../instrumenter/types';
 import type { Controls } from './InteractionsPanel';
@@ -33,13 +33,13 @@ const SubnavWrapper = styled.div(({ theme }) => ({
   zIndex: 1,
 }));
 
-const StyledSubnav = styled.nav(({ theme }) => ({
+const StyledSubnav = styled.nav({
   height: 40,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
   paddingLeft: 15,
-}));
+});
 
 interface SubnavProps {
   controls: Controls;
@@ -121,10 +121,11 @@ export const Subnav: React.FC<SubnavProps> = ({
   onScrollToEnd,
 }) => {
   const buttonText = status === CallStates.ERROR ? 'Scroll to error' : 'Scroll to end';
+  const theme = useTheme();
 
   return (
     <SubnavWrapper>
-      <Bar>
+      <Bar backgroundColor={theme.background.app}>
         <StyledSubnav aria-label="Component tests toolbar">
           <Group>
             <StatusBadge status={status} />
diff --git a/code/core/src/components/components/bar/bar.tsx b/code/core/src/components/components/bar/bar.tsx
index ce358b4a2347..2c112e87e93c 100644
--- a/code/core/src/components/components/bar/bar.tsx
+++ b/code/core/src/components/components/bar/bar.tsx
@@ -52,14 +52,17 @@ const UnstyledBar = ({ children, className, scrollable }: UnstyledBarProps) =>
   );
 
 export interface BarProps extends UnstyledBarProps {
+  backgroundColor?: string;
   border?: boolean;
 }
 export const Bar = styled(UnstyledBar)<BarProps>(
-  ({ theme, scrollable = true }) => ({
+  ({ backgroundColor, theme, scrollable = true }) => ({
     color: theme.barTextColor,
     width: '100%',
-    height: 40,
+    minHeight: 40,
     flexShrink: 0,
+    scrollbarColor: `${theme.barTextColor} ${backgroundColor || theme.barBg}`,
+    scrollbarWidth: 'thin',
     overflow: scrollable ? 'auto' : 'hidden',
     overflowY: 'hidden',
   }),
@@ -94,7 +97,7 @@ export interface FlexBarProps extends ComponentProps<typeof Bar> {
 export const FlexBar = ({ children, backgroundColor, className, ...rest }: FlexBarProps) => {
   const [left, right] = Children.toArray(children);
   return (
-    <Bar className={`sb-bar ${className}`} {...rest}>
+    <Bar backgroundColor={backgroundColor} className={`sb-bar ${className}`} {...rest}>
       <BarInner bgColor={backgroundColor}>
         <Side scrollable={rest.scrollable} left>
           {left}
diff --git a/code/core/src/manager/components/preview/Toolbar.tsx b/code/core/src/manager/components/preview/Toolbar.tsx
index b2f153cc2aa0..93f91c0bd995 100644
--- a/code/core/src/manager/components/preview/Toolbar.tsx
+++ b/code/core/src/manager/components/preview/Toolbar.tsx
@@ -232,6 +232,8 @@ const Toolbar = styled.div<{ shown: boolean }>(({ theme, shown }) => ({
   marginTop: shown ? 0 : -40,
   boxShadow: `${theme.appBorderColor}  0 -1px 0 0 inset`,
   background: theme.barBg,
+  scrollbarColor: `${theme.barTextColor} ${theme.barBg}`,
+  scrollbarWidth: 'thin',
   zIndex: 4,
 }));