From 2406fa491e9ddafc761cfbf8b7187df25d5f69d4 Mon Sep 17 00:00:00 2001 From: hugolytics Date: Thu, 12 Mar 2026 14:18:42 +0100 Subject: [PATCH 1/4] fix: align wide docs layout to main content area, not viewport MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The .docs-story-embed and .docs-example-page--wide rules used 100vw-based widths with margin-left: 50% + translateX(-50%) to center wide elements. This broke at desktop widths because: 1. Starlight's unlayered styles override margin-left inside @layer starlight.components, resolving it to 0px instead of 50%. 2. With margin-left=0, translateX(-50%) centres the element on the left edge of .sl-markdown-content, not on main's centre — causing the element to extend ~360px behind the left sidebar. Fix: remove margin-left: 50% and compute the full correction in transform. The translateX now shifts by (-50% + half the content-column width), which places the element centre exactly at the main content area centre regardless of sidebar presence. Width is capped to 100vw - sidebar - 4rem so it never overflows into the sidebar. Inside .docs-example-page--wide the embed just fills its container (width: 100%; transform: none). Closes #8 --- docs-site/src/styles/custom.css | 36 +++++++++++++++++++++++++++------ 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/docs-site/src/styles/custom.css b/docs-site/src/styles/custom.css index f08372a..6add8ad 100644 --- a/docs-site/src/styles/custom.css +++ b/docs-site/src/styles/custom.css @@ -233,17 +233,41 @@ body::after { } .docs-story-embed { - width: min(112rem, calc(100vw - 24rem)); + /* Cap width so it never overflows into the sidebar. */ + width: min(80rem, calc(100vw - var(--sl-sidebar-width, 0rem) - 4rem)); max-width: none; - margin-left: 50%; - transform: translateX(-50%); + /* + * margin-left: 50% is overridden to 0 by unlayered Starlight styles, so + * the element's natural left edge sits at the start of .sl-markdown-content. + * We need to shift it right by half the content column's width so it ends + * up centred on the main content area (not on the column's left edge). + * At narrow viewports where sl-content-width exceeds the available width + * we clamp to (available-width / 2) instead. + */ + transform: translateX(calc( + -50% + min( + var(--sl-content-width, 45rem) / 2, + (100vw - var(--sl-sidebar-width, 0rem) - 2 * var(--sl-content-pad-x, 1.5rem)) / 2 + ) + )); + } + + /* Inside the already-wide page wrapper the embed just fills its container. */ + .docs-example-page--wide .docs-story-embed { + width: 100%; + max-width: none; + transform: none; } .docs-example-page--wide { - width: min(112rem, calc(100vw - 22rem)); + width: min(80rem, calc(100vw - var(--sl-sidebar-width, 0rem) - 4rem)); max-width: none; - margin-left: 50%; - transform: translateX(-50%); + transform: translateX(calc( + -50% + min( + var(--sl-content-width, 45rem) / 2, + (100vw - var(--sl-sidebar-width, 0rem) - 2 * var(--sl-content-pad-x, 1.5rem)) / 2 + ) + )); } .docs-story-frame { From 20cc1ce3bdd1a6b79bbe1f1a13ffa0ec27f03c9f Mon Sep 17 00:00:00 2001 From: hugolytics Date: Thu, 12 Mar 2026 14:24:55 +0100 Subject: [PATCH 2/4] feat: use viewer built-in expand button, remove external pop-out link - Add ?expandable to iframe src so the viewer's own expand button is shown - Remove the anchor from the MDX - Remove .docs-story-popout CSS rules and the padding-top on .docs-story-frame that only existed to make room for the external button --- .../content/docs/examples/vllm-deployment.mdx | 10 +----- docs-site/src/styles/custom.css | 31 ------------------- 2 files changed, 1 insertion(+), 40 deletions(-) diff --git a/docs-site/src/content/docs/examples/vllm-deployment.mdx b/docs-site/src/content/docs/examples/vllm-deployment.mdx index 12c75de..de8cb10 100644 --- a/docs-site/src/content/docs/examples/vllm-deployment.mdx +++ b/docs-site/src/content/docs/examples/vllm-deployment.mdx @@ -11,17 +11,9 @@ This example is designed for healthcare buyers, legal reviewers, compliance stak ## Example
- - Pop out -