Tweak controls panel styling to fix overflow issue and design consist…

…ent with other panels

code/core/src/controls/components/ControlsPanel.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { ScrollArea } from 'storybook/internal/components';
 import type { ArgTypes } from 'storybook/internal/types';
 
 import { global } from '@storybook/global';
@@ -31,11 +30,16 @@ const clean = (obj: { [key: string]: any }) =>
     {} as typeof obj
   );
 
-const AddonWrapper = styled.div<{ showSaveFromUI: boolean }>(({ showSaveFromUI }) => ({
-  display: 'grid',
-  gridTemplateRows: showSaveFromUI ? '1fr 41px' : '1fr',
+const AddonWrapper = styled.div<{ showSaveFromUI: boolean }>(({ showSaveFromUI, theme }) => ({
   height: '100%',
   maxHeight: '100vh',
+  paddingBottom: showSaveFromUI ? 41 : 0,
+  backgroundColor: theme.background.content,
+
+  thead: {
+    backgroundColor: theme.background.app,
+    lineHeight: '19px',
+  },
 }));
 
 interface ControlsParameters {
@@ -101,20 +105,18 @@ export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) =>
 
   return (
     <AddonWrapper showSaveFromUI={showSaveFromUI}>
-      <ScrollArea vertical>
-        <ArgsTable
-          key={path} // resets state when switching stories
-          compact={!expanded && hasControls}
-          rows={withPresetColors}
-          args={args}
-          globals={globals}
-          updateArgs={updateArgs}
-          resetArgs={resetArgs}
-          inAddonPanel
-          sort={sort}
-          isLoading={isLoading}
-        />
-      </ScrollArea>
+      <ArgsTable
+        key={path} // resets state when switching stories
+        compact={!expanded && hasControls}
+        rows={withPresetColors}
+        args={args}
+        globals={globals}
+        updateArgs={updateArgs}
+        resetArgs={resetArgs}
+        inAddonPanel
+        sort={sort}
+        isLoading={isLoading}
+      />
       {showSaveFromUI && <SaveStory {...{ resetArgs, saveStory, createStory }} />}
     </AddonWrapper>
   );

code/core/src/controls/components/SaveStory.tsx

@@ -18,8 +18,9 @@ const highlight = keyframes({
 
 const Container = styled.div({
   containerType: 'size',
-  position: 'sticky',
+  position: 'absolute',
   bottom: 0,
+  width: '100%',
   height: 41,
   overflow: 'hidden',
   zIndex: 1,
@@ -43,6 +44,7 @@ const Info = styled.div({
   display: 'flex',
   flex: '99 0 auto',
   alignItems: 'center',
+  marginInlineStart: 7,
   marginInlineEnd: 10,
   gap: 6,
 });

code/core/src/controls/manager.tsx

@@ -122,7 +122,7 @@ export default addons.register(ADDON_ID, (api) => {
           return null;
         }
         return (
-          <AddonPanel active={active} hasScrollbar={false}>
+          <AddonPanel active={active}>
             <ControlsPanel saveStory={saveStory} createStory={createStory} />
           </AddonPanel>
         );