diff --git a/code/core/src/components/components/addon-panel/addon-panel.tsx b/code/core/src/components/components/addon-panel/addon-panel.tsx
index 9304980f4ff8..d072596e0ddc 100644
--- a/code/core/src/components/components/addon-panel/addon-panel.tsx
+++ b/code/core/src/components/components/addon-panel/addon-panel.tsx
@@ -25,7 +25,10 @@ const useUpdate = (update: boolean, value: any) => {
 export interface AddonPanelProps {
   active: boolean;
   children: ReactElement;
+  /** Whether the panel has a vertical scrollbar, `true` by default. */
   hasScrollbar?: boolean;
+  /** Whether the panel has an horizontal scrollbar, `false` by default */
+  hasHorizontalScrollbar?: boolean;
 }
 
 const Div = styled.div(({ theme }) => ({
@@ -33,12 +36,19 @@ const Div = styled.div(({ theme }) => ({
   height: '100%',
 }));
 
-export const AddonPanel = ({ active, children, hasScrollbar = true }: AddonPanelProps) => {
+export const AddonPanel = ({
+  active,
+  children,
+  hasScrollbar = true,
+  hasHorizontalScrollbar = false,
+}: AddonPanelProps) => {
   return (
     // the hidden attribute is an valid html element that's both accessible and works to visually hide content
     <Div hidden={!active}>
-      {hasScrollbar ? (
-        <ScrollArea vertical>{useUpdate(active, children)}</ScrollArea>
+      {hasScrollbar || hasHorizontalScrollbar ? (
+        <ScrollArea vertical={hasScrollbar} horizontal={hasHorizontalScrollbar}>
+          {useUpdate(active, children)}
+        </ScrollArea>
       ) : (
         useUpdate(active, children)
       )}
diff --git a/code/core/src/controls/manager.tsx b/code/core/src/controls/manager.tsx
index 6091fb568247..f3c129193079 100644
--- a/code/core/src/controls/manager.tsx
+++ b/code/core/src/controls/manager.tsx
@@ -123,7 +123,7 @@ export default addons.register(ADDON_ID, (api) => {
           return null;
         }
         return (
-          <AddonPanel active={active}>
+          <AddonPanel active={active} hasHorizontalScrollbar hasScrollbar>
             <ControlsPanel saveStory={saveStory} createStory={createStory} />
           </AddonPanel>
         );