docs: update layout

Author: mrholek

docs/assets/scss/_component-examples.scss

@@ -2,11 +2,24 @@
 // Docs examples
 //
 
-.tab-content .tab-pane .docs-code-snippet {
-  @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 {
+    border-top: 0;
     @include border-top-radius(0);
+
+    .highlight {
+      @include border-top-radius(0);
+    }
   }
 }
 

docs/layouts/shortcodes/tabs.html

@@ -1,13 +1,13 @@
 {{ with .Inner }}{{/* don't do anything, just call it */}}{{ end }}
 {{ $groupId := default "default" (.Get "groupId") }}
-<ul class="nav nav-underline-border border-1" role="tablist">
+<ul class="nav nav-underline-border docs-code-tabs" role="tablist">
   {{ range $idx, $tab := .Scratch.Get "tabs" }}
   <li class="nav-item mb-0" role="presentation">
     <button class="nav-link {{ cond (eq $idx 0) "active" ""}}" data-coreui-toggle="tab" data-coreui-target="#{{ $groupId }}-{{ .name | urlize}}" type="button" role="tab">{{ .name }}</button>
   </li>
   {{ end }}
 </ul>
-<div class="tab-content">
+<div class="tab-content docs-code-tab-content">
   {{ range $idx, $tab := .Scratch.Get "tabs" }}
   <div class="tab-pane fade {{ cond (eq $idx 0) "show active" ""}}" id="{{ $groupId }}-{{ .name | urlize}}" role="tabpanel" aria-labelledby="{{ .name }}-tab" tabindex="0">
     {{ .content }}