Tabbed panes: fix styling when not at top-level & other tweaks (#1671)

google · Nov 3, 2023 · 8f511a7 · 8f511a7
1 parent 5295589
commit 8f511a7
Showing 1 changed file with 13 additions and 8 deletions.
diff --git a/assets/scss/shortcodes/tabbed-pane.scss b/assets/scss/shortcodes/tabbed-pane.scss
@@ -1,16 +1,12 @@
-.tab-content {
-  .tab-pane {
-    pre {
-      margin: 0rem 0 0rem 0;
-    }
-  }
+// Only constrain max-width for top-level tabbed panes not, e.g., those in lists.
+.td-content > .tab-content .tab-pane {
+  @extend .td-max-width-on-larger-screens;
 }
 
 .tab-content {
   .tab-pane {
-    @extend .td-max-width-on-larger-screens;
     .highlight {
-      margin: 0rem 0 0rem 0;
+      margin: 0;
       border: none;
       max-width: 100%;
     }
@@ -29,6 +25,15 @@
   border-radius: 0;
   padding: 1.5rem;
 
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  > .highlight:only-child {
+    margin: -1.5rem;
+    max-width: calc(100% + 3rem);
+  }
+
   @each $color, $value in $theme-colors {
     &-#{$color} {
       border-style: solid;