Merge pull request #90 from storybookjs/fix-highlight-wrapping

Fix wrapping, overflow on Highlight component
storybookjs · Oct 8, 2019 · 926f34f · 926f34f
2 parents 45e1941 + 4f8a235
commit 926f34f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/src/components/Highlight.js b/src/components/Highlight.js
@@ -27,10 +27,15 @@ const HighlightBlock = styled.div`
     color: ${color.darkest};
   }
 
+  code {
+    white-space: pre;
+  }
+
   pre {
     padding: 11px 1rem;
     margin: 1rem 0;
     background: ${color.lighter};
+    overflow: auto;
   }
 
   .language-bash .token.operator,

diff --git a/src/components/Highlight.stories.js b/src/components/Highlight.stories.js
@@ -122,6 +122,16 @@ export const json = () => (
   </>
 );
 
+const SmallContainer = styled.div`
+  max-width: 300px;
+`;
+
+export const wrapping = () => (
+  <SmallContainer>
+    <Highlight language="javascript">{javascriptCode}</Highlight>
+  </SmallContainer>
+);
+
 const StyledHighlight = styled(Highlight)`
   code,
   pre {