From 6cea197928bbbe1902debc207b993630b86a3037 Mon Sep 17 00:00:00 2001
From: forcetrainer <bryan@inagaki.us>
Date: Sat, 3 Jan 2026 19:07:20 -0500
Subject: [PATCH] fix(css): use fixed width layout to prevent content shifting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apply React Native docs approach: set both width and max-width at
largest breakpoint (1400px) so content area maintains consistent
size regardless of content length. Switches to fluid 100% below
1416px breakpoint.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 website/css/custom.css | 45 ++++++++++++++++++++++++++++++++++++++----
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/website/css/custom.css b/website/css/custom.css
index dc7f230c..445cec4e 100644
--- a/website/css/custom.css
+++ b/website/css/custom.css
@@ -201,20 +201,57 @@
 }
 
 /* ============================================
-   LAYOUT - Only max-width for very wide viewports
+   LAYOUT - Fixed width at large viewport, fluid below
    ============================================ */
+:root {
+  --doc-sidebar-width: 266px;
+}
+
 .main-wrapper {
-  max-width: 1600px;
+  max-width: 1400px;
+  width: 1400px;
+  align-self: center;
   margin: 0 auto;
 }
 
+@media (max-width: 1416px) {
+  .main-wrapper {
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+/* Doc main container accounts for sidebar */
+@media (min-width: 997px) {
+  main[class*='docMainContainer'] {
+    max-width: calc(100% - var(--doc-sidebar-width));
+  }
+}
+
+/* Fix content width resizing based on content length */
+.docMainContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Main-styles-module,
+[class*='docMainContainer'] {
+  min-width: 0; /* Override flexbox default min-width: auto */
+}
+
+article {
+  width: 100%;
+  min-width: 0;
+}
+
+.markdown {
+  min-width: 0;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
 .navbar__inner {
-  max-width: 1600px;
+  max-width: 1400px;
   margin: 0 auto;
 }
 
 .footer__container {
-  max-width: 1600px;
+  max-width: 1400px;
   margin: 0 auto;
 }