From 9e511d91c961e3bff171256fe4955cc48f826eb4 Mon Sep 17 00:00:00 2001 From: "sentry-junior[bot]" <264270552+sentry-junior[bot]@users.noreply.github.com> Date: Wed, 14 Oct 2026 22:10:04 +0000 Subject: [PATCH 1/2] feat(docs): Render SplitLayout as a single column Co-Authored-By: Shannon Anahata --- src/components/splitLayout/README.md | 24 ++++----- src/components/splitLayout/index.tsx | 8 +-- src/components/splitLayout/style.module.scss | 53 +++++--------------- 3 files changed, 26 insertions(+), 59 deletions(-) diff --git a/src/components/splitLayout/README.md b/src/components/splitLayout/README.md index 9612599cd1e75d..6a8a5522b726cc 100644 --- a/src/components/splitLayout/README.md +++ b/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 ### 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. ```javascript // Your code sample goes here const example = "This appears - on the right"; ``` + below the text"; ``` @@ -68,25 +67,20 @@ You can stack multiple split sections within one layout: - **``**: Container for one or more split sections - **``**: Individual split section wrapper -- **``**: Left side text content (use this, not ``) -- **``**: Right side code samples (use this, not ``) +- **``**: Text content, rendered first (use this, not ``) +- **``**: Code samples, rendered below the text (use this, not ``) ## 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 diff --git a/src/components/splitLayout/index.tsx b/src/components/splitLayout/index.tsx index b3b0e5140a8c67..29220650e57913 100644 --- a/src/components/splitLayout/index.tsx +++ b/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: * @@ -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. diff --git a/src/components/splitLayout/style.module.scss b/src/components/splitLayout/style.module.scss index 24f6fbbb8d5952..22527ec2cac2b5 100644 --- a/src/components/splitLayout/style.module.scss +++ b/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,17 +10,10 @@ .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 - } + margin-bottom: 2rem; // Remove margin from last section in a layout &:last-child { @@ -26,21 +22,9 @@ } .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 +35,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 +47,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 { From e9b9504144bfe32ba7472e4777e76aafb019eb21 Mon Sep 17 00:00:00 2001 From: "sentry-junior[bot]" <264270552+sentry-junior[bot]@users.noreply.github.com> Date: Thu, 15 Oct 2026 20:26:33 +0000 Subject: [PATCH 2/2] fix(docs): Remove extra spacing after SplitLayout code samples Co-Authored-By: Shannon Anahata --- src/components/splitLayout/style.module.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/splitLayout/style.module.scss b/src/components/splitLayout/style.module.scss index 22527ec2cac2b5..160e85ba45f61f 100644 --- a/src/components/splitLayout/style.module.scss +++ b/src/components/splitLayout/style.module.scss @@ -13,12 +13,6 @@ grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; - margin-bottom: 2rem; - - // Remove margin from last section in a layout - &:last-child { - margin-bottom: 0; - } } .splitText { @@ -64,4 +58,11 @@ > *:last-child { margin-bottom: 0; } + + // Code tabs add a bottom margin to their nested 
. 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;
+  }
 }