From f8d1fabf68f4915e3b820f6372da7cc29e8d5bf9 Mon Sep 17 00:00:00 2001 From: bcrowther1 Date: Fri, 10 Jul 2026 11:09:48 -0700 Subject: [PATCH 1/2] fix: stop API endpoint prose from colliding with the code rail Our global 820px content-centering rule ignored the sticky request/response code rail on OpenAPI endpoint pages, so the prose slid under it on narrower viewports. Scope the centering off for /api-reference/endpoint/ pages (all locales) and let Mintlify's native two-column layout reserve the rail. Co-authored-by: Cursor --- style.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/style.css b/style.css index 25cc549c..00de472a 100644 --- a/style.css +++ b/style.css @@ -2680,6 +2680,18 @@ margin-right: auto !important; } + /* API endpoint pages (frontmatter `openapi:`) use a two-column body: prose on + the left and a sticky request/response code rail on the right. Our fixed + 820px + viewport-centering above ignores that rail, so on narrower viewports + the prose slides under it. Scope our centering off for these pages (their + path always contains /api-reference/endpoint/, across all locales) and let + Mintlify's native layout size the prose so the rail keeps its space. */ + html[data-current-path*="/api-reference/endpoint/"] #content-area { + max-width: none !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + /* Taller top navigation bar. Mintlify sets the navbar content row to h-12 (48px) with items-center, and paints the bottom border on an absolute h-full background layer. Growing the From 1e3556fdeee44a83277b89ee184ca7e49ff7a183 Mon Sep 17 00:00:00 2001 From: bcrowther1 Date: Fri, 10 Jul 2026 13:06:50 -0700 Subject: [PATCH 2/2] fix: center API endpoint column within its track instead of viewport The prior fix widened the prose to full width on large screens. Instead keep the same 820px column and, on /api-reference/endpoint/ pages, center it within its own flex track (not the viewport) so it never crosses into the sticky code rail. Verified no overlap from 1440px through 1920px, including the ~1650-1765px band where the collision occurred. Co-authored-by: Cursor --- style.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/style.css b/style.css index 00de472a..5d53248c 100644 --- a/style.css +++ b/style.css @@ -2680,16 +2680,16 @@ margin-right: auto !important; } - /* API endpoint pages (frontmatter `openapi:`) use a two-column body: prose on - the left and a sticky request/response code rail on the right. Our fixed - 820px + viewport-centering above ignores that rail, so on narrower viewports - the prose slides under it. Scope our centering off for these pages (their - path always contains /api-reference/endpoint/, across all locales) and let - Mintlify's native layout size the prose so the rail keeps its space. */ + /* API endpoint pages (frontmatter `openapi:`) render a sticky request/response + code rail (#content-side-layout, ~28rem) as a flex sibling to the right of + the content column. Our viewport-based centering above pushes the column + rightward past ~1650px and overruns that rail. Keep the same 820px column, + but center it within its own flex track instead of the viewport so it never + crosses into the rail. Scoped by path (covers all locales); the plain API + pages (Introduction/Rate Limits/Error Codes) are unaffected. */ html[data-current-path*="/api-reference/endpoint/"] #content-area { - max-width: none !important; - margin-left: 0 !important; - margin-right: 0 !important; + margin-left: auto !important; + margin-right: auto !important; } /* Taller top navigation bar.