Fix: Add inline-scroll on props table (#1131)

styleguidist · Sep 11, 2018 · 5263b27 · 5263b27
1 parent a7a6cf4
commit 5263b27
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/src/rsg-components/ReactComponent/ReactComponentRenderer.js b/src/rsg-components/ReactComponent/ReactComponentRenderer.js
@@ -16,6 +16,11 @@ const styles = ({ color, fontSize, space }) => ({
 	tabButtons: {
 		marginBottom: space[2],
 	},
+	tabBody: {
+		overflowX: 'auto',
+		maxWidth: '100%',
+		WebkitOverflowScrolling: 'touch',
+	},
 	docs: {
 		color: color.base,
 		fontSize: fontSize.text,
@@ -48,7 +53,7 @@ export function ReactComponentRenderer({
 			{tabButtons && (
 				<div className={classes.tabs}>
 					<div className={classes.tabButtons}>{tabButtons}</div>
-					{tabBody}
+					<div className={classes.tabBody}>{tabBody}</div>
 				</div>
 			)}
 			{examples}

diff --git a/src/rsg-components/ReactComponent/__snapshots__/ReactComponent.spec.js.snap b/src/rsg-components/ReactComponent/__snapshots__/ReactComponent.spec.js.snap
@@ -316,7 +316,9 @@ exports[`ReactComponentRenderer should render usage section 1`] = `
       </div>
     </div>
     <div>
-      tab body
+      <div>
+        tab body
+      </div>
     </div>
   </div>
 </div>

diff --git a/src/rsg-components/StyleGuide/StyleGuideRenderer.js b/src/rsg-components/StyleGuide/StyleGuideRenderer.js
@@ -37,7 +37,7 @@ const styles = ({ color, fontFamily, fontSize, sidebarWidth, mq, space, maxWidth
 		bottom: 0,
 		width: sidebarWidth,
 		overflow: 'auto',
-		'-webkit-overflow-scrolling': 'touch',
+		WebkitOverflowScrolling: 'touch',
 		[mq.small]: {
 			position: 'static',
 			width: 'auto',