Merge pull request #4848 from jeradrutnam/master

Update styling of tab content that has multiple elements or non-code element

en/theme/material/assets/css/theme.css

@@ -385,7 +385,13 @@
     font-size: 14px;
     font-style: italic;
     color: var(--md-default-fg-color--light);
-  }
+}
+
+.tabbed-content.tab_with_no_code {
+    background: var(--md-default-fg-color--lightest);
+    padding: 0 20px 10px;
+    border-radius: 0 0 var(--md-code-block-radius) var(--md-code-block-radius);
+}
 
 /* Media query breakpoints
 

en/theme/material/assets/js/theme.js

@@ -34,3 +34,17 @@ dropdownLink.addEventListener('click', function(event) {
   event.stopPropagation(); // Prevent the event from propagating to the document
   dropdown.classList.toggle('open'); // Toggle the "open" class
 });
+
+// Add a class to tasb that has multiple child elements rather than a code block
+document.querySelectorAll('.tabbed-content').forEach(tabbedContent => {
+  const tabbedBlocks = Array.from(tabbedContent.querySelectorAll('.tabbed-block'));
+
+  // Check if each .tabbed-block has more than 1 child or if its immediate child is not .highlight
+  const shouldAddClass = tabbedBlocks.some(tabbedBlock => 
+    tabbedBlock.children.length > 1 || !tabbedBlock.firstElementChild.classList.contains('highlight')
+  );
+
+  if (shouldAddClass) {
+    tabbedContent.classList.add('tab_with_no_code');
+  }
+});