diff --git a/packages/grafana-ui/.storybook/storybookTheme.ts b/packages/grafana-ui/.storybook/storybookTheme.ts
index f2a51792a3f..3a2123c2a00 100644
--- a/packages/grafana-ui/.storybook/storybookTheme.ts
+++ b/packages/grafana-ui/.storybook/storybookTheme.ts
@@ -13,7 +13,7 @@ const createStorybookTheme = (theme: GrafanaTheme2) => {
     appBg: theme.colors.background.canvas,
     appContentBg: theme.colors.background.primary,
     appBorderColor: theme.colors.border.medium,
-    appBorderRadius: parseInt(theme.shape.borderRadius(1), 10),
+    appBorderRadius: 0,
 
     // Typography
     fontBase: theme.typography.fontFamily,
diff --git a/packages/grafana-ui/src/components/InlineToast/InlineToast.internal.story.tsx b/packages/grafana-ui/src/components/InlineToast/InlineToast.internal.story.tsx
index 8d7efcd6777..5e7284e4e1d 100644
--- a/packages/grafana-ui/src/components/InlineToast/InlineToast.internal.story.tsx
+++ b/packages/grafana-ui/src/components/InlineToast/InlineToast.internal.story.tsx
@@ -33,7 +33,7 @@ export const InlineToast: Story<InlineToastProps> = (args) => {
   const [el, setEl] = useState<null | HTMLInputElement>(null);
 
   return (
-    <div>
+    <div style={{ maxWidth: 500, width: `calc(100% - 100px)` }}>
       <InlineToastImpl {...args} referenceElement={el}>
         Saved
       </InlineToastImpl>
diff --git a/packages/grafana-ui/src/components/Monaco/CodeEditor.internal.story.tsx b/packages/grafana-ui/src/components/Monaco/CodeEditor.internal.story.tsx
index 4535ca8781d..ed2e9568919 100644
--- a/packages/grafana-ui/src/components/Monaco/CodeEditor.internal.story.tsx
+++ b/packages/grafana-ui/src/components/Monaco/CodeEditor.internal.story.tsx
@@ -16,11 +16,10 @@ const meta: Meta<typeof CodeEditor> = {
       page: mdx,
     },
     controls: {
-      exclude: ['monacoOptions', 'onEditorDidMount', 'onBlur', 'onSave', 'getSuggestions', 'showLineNumbers'],
+      exclude: ['width', 'monacoOptions', 'onEditorDidMount', 'onBlur', 'onSave', 'getSuggestions', 'showLineNumbers'],
     },
   },
   argTypes: {
-    width: { control: { type: 'range', min: 100, max: 500, step: 10 } },
     height: { control: { type: 'range', min: 100, max: 800, step: 10 } },
     language: { control: { type: 'select' }, options: ['sql', 'json'] },
   },
@@ -29,7 +28,7 @@ const meta: Meta<typeof CodeEditor> = {
 export const Basic: StoryFn<typeof CodeEditor> = (args) => {
   return (
     <CodeEditor
-      width={args.width}
+      width="100%"
       height={args.height}
       value={args.value}
       language={args.language}
diff --git a/packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx b/packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx
index 84a3dc59765..bb8a5b5ce18 100644
--- a/packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx
@@ -1,34 +1,13 @@
 import { DecoratorFn } from '@storybook/react';
-import React from 'react';
 
-interface CenteredStoryProps {
-  children: React.ReactNode;
-  horizontal?: boolean;
-  vertical?: boolean;
-}
-const CenteredStory = ({ horizontal, vertical, children }: CenteredStoryProps) => {
-  return (
-    <div
-      style={{
-        minHeight: '100%',
-        width: '100%',
-        display: 'flex',
-        alignItems: vertical ? 'center' : 'flex-start',
-        justifyContent: horizontal ? 'center' : 'flex-start',
-      }}
-    >
-      {children}
-    </div>
-  );
-};
+/** @deprecated Stories should not be centered on the page. This decorator now does nothing */
+export const withNotCenteredStory: DecoratorFn = (story) => story();
 
-export const withNotCenteredStory: DecoratorFn = (story) => <CenteredStory>{story()}</CenteredStory>;
-export const withCenteredStory: DecoratorFn = (story) => (
-  <CenteredStory horizontal vertical>
-    {story()}
-  </CenteredStory>
-);
-export const withHorizontallyCenteredStory: DecoratorFn = (story) => (
-  <CenteredStory horizontal>{story()}</CenteredStory>
-);
-export const withVerticallyCenteredStory: DecoratorFn = (story) => <CenteredStory vertical>{story()}</CenteredStory>;
+/** @deprecated Stories should not be centered on the page. This decorator now does nothing */
+export const withCenteredStory: DecoratorFn = (story) => story();
+
+/** @deprecated Stories should not be centered on the page. This decorator now does nothing */
+export const withHorizontallyCenteredStory: DecoratorFn = (story) => story();
+
+/** @deprecated Stories should not be centered on the page. This decorator now does nothing */
+export const withVerticallyCenteredStory: DecoratorFn = (story) => story();
diff --git a/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx b/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx
deleted file mode 100644
index 2a520a3fd40..00000000000
--- a/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { DecoratorFn } from '@storybook/react';
-import React from 'react';
-
-import { GlobalStyles, useTheme2 } from '../../themes';
-
-const PaddedStory = ({ children }: React.PropsWithChildren<{}>) => {
-  const theme = useTheme2();
-
-  return (
-    <div
-      style={{
-        width: '100%',
-        padding: '20px',
-        display: 'flex',
-        minHeight: '100%',
-        background: `${theme.colors.background.primary}`,
-      }}
-    >
-      <GlobalStyles />
-      {children}
-    </div>
-  );
-};
-
-export const withPaddedStory: DecoratorFn = (story) => <PaddedStory>{story()}</PaddedStory>;
diff --git a/packages/grafana-ui/src/utils/storybook/withRightAlignedStory.tsx b/packages/grafana-ui/src/utils/storybook/withRightAlignedStory.tsx
deleted file mode 100644
index ac86112e6a9..00000000000
--- a/packages/grafana-ui/src/utils/storybook/withRightAlignedStory.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { DecoratorFn } from '@storybook/react';
-import React from 'react';
-
-const RightAlignedStory = ({ children }: React.PropsWithChildren<{}>) => {
-  return (
-    <div
-      style={{
-        minHeight: '100%',
-        display: 'flex',
-        alignItems: 'flex-start',
-        justifyContent: 'flex-end',
-        marginRight: '20px',
-      }}
-    >
-      {children}
-    </div>
-  );
-};
-
-export const withRightAlignedStory: DecoratorFn = (story) => <RightAlignedStory>{story()}</RightAlignedStory>;
diff --git a/packages/grafana-ui/src/utils/storybook/withTheme.tsx b/packages/grafana-ui/src/utils/storybook/withTheme.tsx
index 45cec079dd5..9c1d14c00d1 100644
--- a/packages/grafana-ui/src/utils/storybook/withTheme.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withTheme.tsx
@@ -16,18 +16,20 @@ const ThemeableStory = ({
 
   handleSassThemeChange(theme);
 
-  const css = `#storybook-root {
-    width: 100%;
-    padding: 20px;
-    display: flex;
-    height: 100%;
-    min-height: 100%;
+  const css = `
+  #storybook-root {
+    padding: ${theme.spacing(2)};
+  }
+
+  body {
     background: ${theme.colors.background.primary};
-  }`;
+  }
+  `;
 
   return (
     <ThemeContext.Provider value={theme}>
       <GlobalStyles />
+
       <style>{css}</style>
       {children}
     </ThemeContext.Provider>