fix(Code): align code blocks in lists; closes #398 (#399)

* fix(Code): align code blocks in lists; closes #398 * Update packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss Co-Authored-By: Alison Joseph <alisonejoseph@Gmail.com>
carbon-design-system · Sep 25, 2019 · c92debb · c92debb
1 parent a83da8e
commit c92debb
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/packages/example/src/pages/components/code-blocks.mdx b/packages/example/src/pages/components/code-blocks.mdx
@@ -34,6 +34,15 @@ This example overflows to demonstrate the text fading out under the side bar. Th
 This example overflows to demonstrate the text fading out under the side bar. This example overflows to demonstrate the text fading out under the side bar.
 ```
 
+- Code block
+- within a list item
+    ```markdown path=/directory/file.mdx src=https://gatsby-theme-carbon.now.sh
+    ### Path and src w/ overflow
+
+    This example overflows to demonstrate the text fading out under the side bar. This example overflows to demonstrate the text fading out under the side bar.
+    This example overflows to demonstrate the text fading out under the side bar. This example overflows to demonstrate the text fading out under the side bar.
+    ```
+
 ## Code
 
 ````

diff --git a/packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss b/packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss
@@ -72,11 +72,10 @@
 
 // Fix bleed when code snippets are used in a list
 .list-item > pre {
-  margin-left: -1rem;
-  margin-right: -1.5rem;
+  margin-left: 1rem;
   margin-top: $spacing-05;
   @include carbon--breakpoint('md') {
-    margin-right: 1.5rem;
+    margin-right: -$spacing-05;
   }
 }