feat(docs): Render SplitLayout as a single column

src/components/splitLayout/README.md

@@ -1,11 +1,10 @@
 # SplitLayout Component
 
-A two-column layout component designed for getting started guides that places explanatory text on the left and code samples on the right.
+A layout component for getting started guides that pairs explanatory text with a code sample. Sections render in a single column: the text comes first, followed by its code sample.
 
 ## Features
 
-- **Responsive Design**: Automatically stacks on mobile (under 1024px)
-- **Sticky Code**: Code samples stick to viewport on desktop for easy reference while scrolling
+- **Single Column**: Text and code stack vertically at every viewport width
 - **Clean Separation**: Clear visual separation between explanation and implementation
 - **Flexible Content**: Support for any MDX content in both sections
 
@@ -20,12 +19,12 @@ A two-column layout component designed for getting started guides that places ex
   <SplitSection>
     <SplitSectionText>
       ### Your Heading Explanatory text goes here. You can use any markdown: -
-      Lists - **Bold text** - Links This content appears on the left side.
+      Lists - **Bold text** - Links This content appears first.
     </SplitSectionText>
 
     <SplitSectionCode>
       ```javascript // Your code sample goes here const example = "This appears
-      on the right"; ```
+      below the text"; ```
     </SplitSectionCode>
 
   </SplitSection>
@@ -68,25 +67,20 @@ You can stack multiple split sections within one layout:
 
 - **`<SplitLayout>`**: Container for one or more split sections
 - **`<SplitSection>`**: Individual split section wrapper
-- **`<SplitSectionText>`**: Left side text content (use this, not `<SplitSection.Text>`)
-- **`<SplitSectionCode>`**: Right side code samples (use this, not `<SplitSection.Code>`)
+- **`<SplitSectionText>`**: Text content, rendered first (use this, not `<SplitSection.Text>`)
+- **`<SplitSectionCode>`**: Code samples, rendered below the text (use this, not `<SplitSection.Code>`)
 
 ## Styling
 
-The component uses CSS Grid for layout and is fully responsive:
-
-- **Desktop (>1024px)**: Two columns (50/50 split)
-- **Mobile (≤1024px)**: Single column (stacked)
-
-The code section uses `position: sticky` on desktop to keep code visible while scrolling through long explanations.
+The component uses a single-column CSS Grid at every viewport width. Each section's text is followed by its code sample.
 
 ## Best Practices
 
-1. **Keep explanations concise**: The left column is limited in width, so focus on key points
+1. **Keep explanations concise**: Text sits directly above its code, so focus on key points
 2. **Use headings**: Start each Text section with a heading (h3 or h4)
 3. **Code relevance**: Ensure code samples directly relate to the adjacent text
 4. **Progressive complexity**: Order sections from simple to complex
-5. **Mobile consideration**: Remember content stacks on mobile, so ensure reading flow makes sense
+5. **Reading flow**: Content always stacks, so make sure each text section leads naturally into its code
 
 ## Examples in Use
 

src/components/splitLayout/index.tsx

@@ -3,8 +3,8 @@
 /**
  * Component: SplitLayout / SplitSection
  *
- * Creates a two-column layout with text content on the left and code samples on the right.
- * Ideal for getting started guides where you want to explain concepts alongside code examples.
+ * Pairs explanatory text with a code sample. Sections render in a single column:
+ * the text comes first, followed by its code sample.
  *
  * Usage in MDX:
  * <SplitLayout>
@@ -24,8 +24,8 @@
  * Props:
  * - SplitLayout: Container for one or more split sections
  * - SplitSection: Individual split section wrapper
- * - SplitSectionText: Left side text content
- * - SplitSectionCode: Right side code samples
+ * - SplitSectionText: Text content (rendered first)
+ * - SplitSectionCode: Code samples (rendered below the text)
  *
  * Note: While SplitSection.Text and SplitSection.Code are available as properties
  * for TypeScript convenience, MDX requires using the direct component names.

src/components/splitLayout/style.module.scss

@@ -1,3 +1,6 @@
+// SplitLayout renders as a single column at every viewport width:
+// each section shows its text first, followed by its code sample.
+
 .splitLayoutContainer {
   display: flex;
   flex-direction: column;
@@ -7,40 +10,15 @@
 
 .splitSection {
   display: grid;
-  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
-  row-gap: 2rem;
-  column-gap: 1rem;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1.5rem;
   align-items: start;
-  margin-bottom: 3rem; // Default spacing between sections (mb-5 equivalent)
-
-  @media (max-width: 1024px) {
-    grid-template-columns: 1fr;
-    gap: 1.5rem;
-    margin-bottom: 2rem; // Reduced spacing on mobile
-  }
-
-  // Remove margin from last section in a layout
-  &:last-child {
-    margin-bottom: 0;
-  }
 }
 
 .splitText {
-  min-width: 0; // Allow flex item to shrink below content size
+  min-width: 0; // Allow grid item to shrink below content size
   overflow-wrap: break-word;
 
-  // Create a container that's 90% width
-  > * {
-    max-width: 90%;
-  }
-
-  @media (max-width: 1024px) {
-    // Full width on mobile
-    > * {
-      max-width: 100%;
-    }
-  }
-
   // Ensure headings and paragraphs have appropriate spacing
   > *:first-child {
     margin-top: 0;
@@ -51,7 +29,9 @@
   }
 
   // Only style section-level headings, not nested card titles
-  > h2, > h3, > h4 {
+  > h2,
+  > h3,
+  > h4 {
     margin-top: 0;
     margin-bottom: 0.75rem;
   }
@@ -61,27 +41,14 @@
     line-height: 1.6;
   }
 
-  ul, ol {
+  ul,
+  ol {
     margin-bottom: 1rem;
   }
 }
 
 .splitCode {
-  position: sticky;
-  top: calc(var(--header-height, 80px) + 3.25rem);
-  min-width: 0; // Allow flex item to shrink below content size
-  max-height: calc(100vh - var(--header-height, 80px) - 6.5rem);
-  overflow-y: auto; // Allow vertical scrolling for long code
-  overflow-x: auto; // Allow horizontal scrolling as fallback if wrapping fails
-  padding-bottom: 1rem; // Ensure bottom content isn't cut off
-
-  @media (max-width: 1024px) {
-    position: relative;
-    top: auto;
-    max-height: none;
-    overflow: visible;
-    padding-bottom: 0;
-  }
+  min-width: 0; // Allow grid item to shrink below content size
 
   // Ensure code blocks fill the space
   > *:first-child {
@@ -91,4 +58,11 @@
   > *:last-child {
     margin-bottom: 0;
   }
+
+  // Code tabs add a bottom margin to their nested <pre>. Drop it on the
+  // final code block so the layout gap alone sets the space before the next
+  // section.
+  > :global(.code-tabs-wrapper):last-child pre {
+    margin-bottom: 0;
+  }
 }