docs: improve responsive layout

Author: mrholek

packages/docs/src/styles/_component-examples.scss

@@ -2,11 +2,25 @@
 // Docs examples
 //
 
-.tab-content .tab-pane {
-  @include border-top-radius(0);
+.docs-code-tabs {
+  padding: 0 ($cd-gutter-x * .5);
+  margin: 0 ($cd-gutter-x * -.5);
 
-  .highlight {
+  @include media-breakpoint-up(md) {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.docs-code-tab-content {
+  .tab-pane > .docs-code-snippet,
+  .tab-pane > .highlight {
+    border-top: 0;
     @include border-top-radius(0);
+
+    .highlight {
+      @include border-top-radius(0);
+    }
   }
 }
 

packages/remark-code-tabs/index.js

@@ -144,6 +144,7 @@ function createTabs(tabNodes, { labels }) {
     children: [
       {
         attributes: [
+          { name: 'className', type: 'mdxJsxAttribute', value: 'docs-code-tabs' },
           {
             name: 'variant',
             type: 'mdxJsxAttribute',
@@ -155,7 +156,9 @@ function createTabs(tabNodes, { labels }) {
         type: 'mdxJsxFlowElement',
       },
       {
-        attributes: [{ name: 'className', type: 'mdxJsxAttribute', value: 'mb-3' }],
+        attributes: [
+          { name: 'className', type: 'mdxJsxAttribute', value: 'docs-code-tab-content mb-3' },
+        ],
         children: tabContentChildren,
         name: 'CTabContent',
         type: 'mdxJsxFlowElement',