Update from code changes: Document sidebar and content width CSS variables

customize/custom-scripts.mdx

@@ -413,6 +413,52 @@
   </Accordion>
 </AccordionGroup>
 
+### Change the sidebar width
+
+Set the `--sidebar-width` CSS variable to change the width of the sidebar on desktop. The content area, header, and footer adjust to the new width, so you don't need to override `#sidebar` or offset other elements yourself.
+
+```css style.css
+:root {
+  --sidebar-width: 20rem;
+}
+```
+
+If you don't set the variable, each theme uses its default sidebar width:
+
+| Theme | Default width |
+| :--- | :--- |
+| Mint, Linden, Willow, Aspen, Sequoia | `18rem` |
+| Maple, Palm | `19rem` |
+| Almond | `16.5rem` |
+| Luma | `14rem` |
+
+In the Palm theme, the variable sets the width of the expanded sidebar. The collapsed sidebar keeps its fixed width.
+
+### Change the content width
+
+Set the `--content-width` CSS variable to change the maximum width of the text column on pages that use the default [page mode](/organize/pages#page-mode). The value sets the width of the text itself. Each theme adds its own padding around the text, so the same value produces the same text width in every theme.
+
+```css style.css
+:root {
+  --content-width: 768px;
+}
+```
+
+The text column never grows wider than the space between the sidebar and the table of contents. If you set a large value, the column fills the available space without overlapping other elements.
+
+If you don't set the variable, each theme uses its default content width:
+
+| Theme | Default width |
+| :--- | :--- |
+| Mint, Palm, Aspen | No maximum. The text fills the available space. |
+| Linden | No maximum on smaller screens. `35.75rem` on extra-large screens. |
+| Maple | `36rem`. `42rem` on the largest screens. |
+| Willow | `600px` |
+| Almond | `36rem` |
+| Sequoia, Luma | `40.5rem` |
+
+`--content-width` does not affect pages in `wide`, `center`, `custom`, or `frame` mode.
+
 ## Custom JavaScript
 
 Custom JavaScript lets you add custom executable code globally. It is the equivalent of adding a `<script>` tag with JavaScript code into every page.
@@ -472,7 +518,7 @@
 
 If your site uses [authentication](/deploy/authentication-setup) or [personalization](/create/personalization), custom scripts can read the identified visitor from `window.mintlify.user`. This is the same object exposed to MDX pages as the [`user` variable](/create/personalization#dynamic-mdx-content), so it reflects the `content` field of your user data.
 
 Because custom scripts run before user info resolves, listen for the `mintlify:user` event to identify when the user object is available. The event fires when user info resolves and again on any change. Its `detail` is the user object, or `null` when the visitor is signed out or unidentified.
 
 ```js Read the user after it resolves
 window.addEventListener('mintlify:user', (event) => {
@@ -492,7 +538,7 @@
 }
 ```
 
 `window.mintlify.user` is `undefined` until user info resolves and when the visitor is signed out or unidentified. Use optional chaining when reading nested fields.
 
 <Warning>
   Client-side scripts can access anything you place in the user `content` field. Do not include secrets or credentials that shouldn't be readable in the browser.