Some components like modals don't work with Styleguide's default padding in mobile frame.

src/components/Modal/Modal.example.js

@@ -22,7 +22,9 @@ class ModalWrapper extends Component {
   render() {
     return (
       <div>
-        Wrapper text before ModalInMobile
+        <div style={{ margin: '1rem' }}>
+          Wrapper text before ModalInMobile
+        </div>
         <Modal
           {...this.props}
           isOpen={this.state.isOpen}
@@ -32,9 +34,11 @@ class ModalWrapper extends Component {
           }}
           togglePageClassNames={togglePageClassNames}
         >
-          Some content inside Modal component
+          <div style={{ margin: '1rem' }}>Some content inside Modal component</div>
         </Modal>
-        <Button onClick={this.handleOpen}>Open</Button>
+        <div style={{ margin: '1rem' }}>
+          <Button onClick={this.handleOpen}>Open</Button>
+        </div>
       </div>
     );
   }
@@ -42,6 +46,7 @@ class ModalWrapper extends Component {
 
 export const Empty = {
   component: ModalWrapper,
+  style: { padding: '1rem 0' },
   props: {
     title: 'Test Modal',
   },

src/components/ModalInMobile/ModalInMobile.example.js

@@ -23,15 +23,25 @@ class ModalInMobileWrapper extends Component {
   render() {
     return (
       <div>
-        Wrapper text before ModalInMobile
+        <div style={{ margin: '1rem' }}>
+          Wrapper text before ModalInMobile
+        </div>
         <ModalInMobile
           {...this.props}
+          onClose={() => {
+            this.setState({ isOpen: false });
+            console.log('Closing modal');
+          }}
           isModalOpenOnMobile={this.state.isOpen}
           togglePageClassNames={togglePageClassNames}
         >
-          Some content inside ModalInMobile component
+          <div style={{ margin: '1rem' }}>
+            Some content inside ModalInMobile component
+          </div>
         </ModalInMobile>
-        <Button onClick={this.handleOpen} className={css.visibleOnMobileLayout}>Open</Button>
+        <div style={{ margin: '1rem' }}>
+          <Button onClick={this.handleOpen} className={css.visibleOnMobileLayout}>Open</Button>
+        </div>
       </div>
     );
   }
@@ -39,10 +49,8 @@ class ModalInMobileWrapper extends Component {
 
 export const Empty = {
   component: ModalInMobileWrapper,
+  style: { padding: '1rem 0' },
   props: {
-    onClose() {
-      console.log('Closing modal');
-    },
     showAsModalMaxWidth: 400,
     title: 'Test ModalInMobile',
   },

src/containers/StyleguidePage/StyleguidePage.css

@@ -1,3 +1,7 @@
 .root {
+  padding: 1rem 0;
+}
+
+.withPadding {
   padding: 1rem;
 }

src/containers/StyleguidePage/StyleguidePage.js

@@ -14,11 +14,13 @@ const Example = props => {
     component: ExampleComponent,
     description,
     props: exampleProps,
+    style,
   } = props;
-  const desc = description ? <p>Description: {description}</p> : null;
+  const exampleStyle = style || css.withPadding;
+  const desc = description ? <p className={css.withPadding}>Description: {description}</p> : null;
   return (
     <li>
-      <h2>
+      <h2 className={css.withPadding}>
         <NamedLink name="StyleguideComponent" params={{ component: componentName }}>
           {componentName}
         </NamedLink>
@@ -31,7 +33,7 @@ const Example = props => {
           {exampleName}
         </NamedLink>
       </h2>
-      <span>
+      <span className={css.withPadding}>
         <NamedLink
           name="StyleguideComponentExampleRaw"
           params={{ component: componentName, example: exampleName, type: 'raw' }}
@@ -40,7 +42,7 @@ const Example = props => {
         </NamedLink>
       </span>
       {desc}
-      <div>
+      <div className={exampleStyle}>
         <ExampleComponent {...exampleProps} />
       </div>
     </li>
@@ -49,7 +51,7 @@ const Example = props => {
 
 const { string, oneOfType, func, node, object, objectOf, shape } = PropTypes;
 
-Example.defaultProps = { description: null, props: {} };
+Example.defaultProps = { description: null, props: {}, style: null };
 
 Example.propTypes = {
   componentName: string.isRequired,
@@ -57,6 +59,7 @@ Example.propTypes = {
   component: oneOfType([func, node]).isRequired,
   description: string,
   props: object,
+  style: object,
 };
 
 const Examples = props => {