adjust canvas demo

examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx

@@ -23,6 +23,7 @@ import MdxNotes from '../notes/notes.mdx';
   component={TsButton}
   id="addons-docs-mdx-id"
   decorators={[
+    (storyFn) => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>,
     withKnobs,
   ]}
   parameters={{ notes: 'component notes' }}
@@ -130,7 +131,7 @@ export const nonStory2 = () => <Button>Not a story</Button>; // another one
 ## Configurable height
 
 <Canvas withToolbar>
-  <Story id="basics-button--all-buttons" inline={true} height="400px" />
+  <Story id="basics-button--all-buttons" height="400px" />
 </Canvas>
 
 export const FixedLayoutExample = styled.div(({ theme }) => ({
@@ -163,6 +164,8 @@ export const FixedLayoutExample = styled.div(({ theme }) => ({
   },
 }));
 
+Fixed layout requires custom `height` since it can't be determined.
+
 <Canvas withToolbar>
   <Story name="fixed layout example" height="15rem">
     <FixedLayoutExample>

lib/components/src/blocks/Preview.tsx

@@ -88,6 +88,7 @@ const StyledSource = styled(Source)<{}>(({ theme }) => ({
 const PreviewContainer = styled.div<PreviewProps>(
   ({ theme, withSource, isExpanded }) => ({
     position: 'relative',
+    overflow: 'hidden',
     margin: '25px 0 40px',
     ...getBlockBackgroundStyle(theme),
     borderBottomLeftRadius: withSource && isExpanded && 0,