Layout updates; widening content div, centering and responsiveness, scrollbar update

[codyde]

TDLR

Our content div was VERY narrow. Many of us have talked about how it feels cramped width wise. Widening that up to give a bit more space. Cleaning up the zone of emptiness that exists on the right in favor of centering the docs content on smaller resolutions, and centering all content on wider resolutions to improve UX.

Also centered header to match content width.

Summary

• Widens the content div to create more readable space so its not
• Centers the main content column and improves large-screen layout.
• Anchors the left sidenav and right TOC to the content edges on wide viewports.
• Adds a minimal, rounded scrollbar to the sidenav.

Motivation

• Improve readability by capping line length and centering.
• Reduce visual noise from the default scrollbar.

Key Changes

• Content

  • Centers content on standard screens; caps width at 100ch via --doc-content-w.
  • Large screens (≥ 2057px): content remains centered at 100ch and gains 5rem
    horizontal padding for sidenav and TOC

• Navigation

  • Large screens: sidenav aligns to content’s left edge; TOC aligns to content’s
    right edge with a 24px gap.
  • Standard screens: current behavior preserved.

• Sidenav scrollbar

  • Thin 8px, rounded thumb, subtle hover/active contrast; respects theme colors.
  • Firefox: scrollbar-width: thin; WebKit: ::-webkit-scrollbar styles.

• Header

  • Centered header to match width of sidebar, content, and TOC

Behavior by Breakpoint

• Standard screens (≤ 2056px)
  • Centered content, max width 100ch; default px-6 pt-6.
  • Sidenav left, TOC right (existing behavior).
• Large screens (≥ 2057px)
  • Centered content at 100ch with 5rem left/right padding.
  • Sidenav pinned to content’s left; TOC pinned to content’s right with ~24px gap.

Before -

Before widescreen -

After -

After widescreen -

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
develop-docs	Ready	Preview	Comment	Aug 29, 2025 11:02pm
sentry-docs	Ready	Preview	Comment	Aug 29, 2025 11:02pm

[codecov]

Bundle Report

Changes will decrease total bundle size by 271.22kB (-1.19%) ⬇️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
sentry-docs-client-array-push	9.9MB	1.54kB (0.02%) ⬆️
sentry-docs-server-cjs	12.26MB	-272.77kB (-2.18%) ⬇️

Affected Assets, Files, and Routes:

view changes for bundle: sentry-docs-client-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
static/chunks/pages/_app-*.js	-3 bytes	882.71kB	-0.0%
static/css/*.css	-70 bytes	745.92kB	-0.01%
static/css/*.css	546 bytes	11.55kB	4.96%
static/chunks/8321-*.js	-3 bytes	425.87kB	-0.0%
static/chunks/4746-*.js	1.07kB	21.4kB	5.27% ⚠️
static/dAnABng6OHI4HZnXzPKzC/_buildManifest.js (New)	684 bytes	684 bytes	100.0% 🚀
static/dAnABng6OHI4HZnXzPKzC/_ssgManifest.js (New)	77 bytes	77 bytes	100.0% 🚀
static/b5VIv0qKYSo4hNALiATv7/_buildManifest.js (Deleted)	-684 bytes	0 bytes	-100.0% 🗑️
static/b5VIv0qKYSo4hNALiATv7/_ssgManifest.js (Deleted)	-77 bytes	0 bytes	-100.0% 🗑️

Files in static/chunks/4746-*.js:

• ./src/components/sidebar/style.module.scss → Total Size: 362 bytes

view changes for bundle: sentry-docs-server-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
1729.js	-33.51kB	1.74MB	-1.89%
../instrumentation.js	-33.8kB	1.07MB	-3.07%
9523.js	-33.51kB	1.04MB	-3.11%
../app/[[...path]]/page.js.nft.json	-57.67kB	722.38kB	-7.39%
../app/platform-redirect/page.js.nft.json	-57.67kB	722.3kB	-7.39%
../app/sitemap.xml/route.js.nft.json	-57.67kB	719.77kB	-7.42%
4873.js	1.22kB	90.92kB	1.36%
7153.js (New)	30.3kB	30.3kB	100.0% 🚀
../app/api/ip-ranges/route.js	-300 bytes	5.79kB	-4.92%
../app/robots.txt/route.js	-300 bytes	5.02kB	-5.64%
2311.js (Deleted)	-29.86kB	0 bytes	-100.0% 🗑️

Files in 4873.js:

• ./src/components/sidebar/style.module.scss → Total Size: 356 bytes

• ./src/components/sidebar/index.tsx → Total Size: 5.24kB

• ./src/components/sidebar/style.module.scss → Total Size: 356 bytes

• ./src/components/docPage/index.tsx → Total Size: 10.68kB

• ./src/components/header.tsx → Total Size: 824 bytes

App Routes Affected:

App Route	Size Change	Total Size	Change (%)
/	447 bytes	2.62MB	0.02%

[nikolovlazar]

This is a much needed improvement! A couple of things though:

• I'm noticing a very light gray background on the sidebar on light mode that appears like it's cut off on its left side. The right side has a border to separate it from the content, but the left side is pretty apparent so we can't leave it like that. Here's a zoomed in screenshot:
  

• The TOC breaks between 1546px and 1296px width. The main content and left sidebar remain the same width, so the TOC gets squeezed. Here's how it looks like on 1400px width:
  

[codyde]

This is a much needed improvement! A couple of things though:

• I'm noticing a very light gray background on the sidebar on light mode that appears like it's cut off on its left side. The right side has a border to separate it from the content, but the left side is pretty apparent so we can't leave it like that. Here's a zoomed in screenshot:
  
• The TOC breaks between 1546px and 1296px width. The main content and left sidebar remain the same width, so the TOC gets squeezed. Here's how it looks like on 1400px width:
  

Added a 1400px breakpoint that looks to have solved it. Would love secondary testing though.

[nikolovlazar]

Looking good!