Storybook: Fix decorator height (#41468) (#41519)

* fix(storybook): make sure story background fills available height

* fix(storybook): add decorator to prevent badge filling all available height

* docs(badge): use centered story

* revert(badge): remove obsolete Meta typing

(cherry picked from commit cd5277befd)

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>

packages/grafana-ui/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<!-- Make sure iframe dom elements fill all available space for background consistency -->
+<style>
+  #root {
+    height: 100%;
+  }
+</style>

packages/grafana-ui/src/components/Badge/Badge.story.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import { Story } from '@storybook/react';
 import { Badge, BadgeProps } from '@grafana/ui';
 import { iconOptions } from '../../utils/storybook/knobs';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 export default {
   title: 'Data Display/Badge',
   component: Badge,
-  decorators: [],
+  decorators: [withCenteredStory],
   parameters: {
     docs: {},
   },

packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx

@@ -11,7 +11,7 @@ const PaddedStory: React.FunctionComponent<{}> = ({ children }) => {
         width: '100%',
         padding: '20px',
         display: 'flex',
-        minHeight: '80vh',
+        minHeight: '100%',
         background: `${theme.colors.background.primary}`,
       }}
     >

packages/grafana-ui/src/utils/storybook/withRightAlignedStory.tsx

@@ -5,7 +5,7 @@ const RightAlignedStory: React.FunctionComponent<{}> = ({ children }) => {
   return (
     <div
       style={{
-        height: '100vh  ',
+        minHeight: '100%',
         display: 'flex',
         alignItems: 'flex-start',
         justifyContent: 'flex-end',

packages/grafana-ui/src/utils/storybook/withTheme.tsx

@@ -21,7 +21,7 @@ const ThemeableStory: React.FunctionComponent<{ handleSassThemeChange: SassTheme
           width: '100%',
           padding: '20px',
           display: 'flex',
-          minHeight: '80vh',
+          minHeight: '100%',
           background: `${theme.colors.background.primary}`,
         }}
       >