UI: Ensure Controls panel can scroll horizontally for now

code/core/src/components/components/addon-panel/addon-panel.tsx

@@ -25,20 +25,30 @@ 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 }) => ({
   fontSize: theme.typography.size.s2 - 1,
   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)
       )}

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>
         );