Skip to content

Commit 2b4ef5c

Browse files
codydegetsantry[bot]nikolovlazar
authored
Layout updates; widening content div, centering and responsiveness, scrollbar update (#14766)
# 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 - <img width="4112" height="2570" alt="CleanShot 2025-08-29 at 12  10 43@2x" src="https://github.com/user-attachments/assets/f686ac5d-d0a2-41eb-989c-49bdedfa96c3" /> Before widescreen - <img width="4112" height="2570" alt="CleanShot 2025-08-29 at 12  12 07@2x" src="https://github.com/user-attachments/assets/45d92030-3faa-4162-8abd-ed034e9bd88c" /> After - <img width="4112" height="2570" alt="CleanShot 2025-08-29 at 12  11 30@2x" src="https://github.com/user-attachments/assets/5f58d5bf-ea88-42b9-a731-31c6bcbd6460" /> After widescreen - <img width="4112" height="2570" alt="CleanShot 2025-08-29 at 12  12 39@2x" src="https://github.com/user-attachments/assets/4116c780-0cb2-415b-9383-0c7447abfd10" /> --------- Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com> Co-authored-by: Lazar Nikolov <[email protected]>
1 parent 8cbdf54 commit 2b4ef5c

File tree

5 files changed

+105
-15
lines changed

5 files changed

+105
-15
lines changed

‎src/components/docPage/index.tsx‎

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,15 @@ export function DocPage({
7070
<main className="main-content flex w-full mt-[var(--header-height)] flex-1 mx-auto">
7171
<div
7272
className={[
73-
'mx-auto lg:mx-0 pt-6 px-6 prose dark:prose-invert max-w-full text-[var(--gray-12)] prose-a:no-underline hover:prose-a:underline',
73+
'mx-auto pt-6 px-6 prose dark:prose-invert max-w-full text-[var(--gray-12)] prose-a:no-underline hover:prose-a:underline',
7474
'prose-code:font-normal prose-code:font-mono marker:text-[var(--accent)] prose-li:my-1',
7575
'prose-headings:mt-0 prose-headings:font-medium prose-headings:relative prose-headings:text-[var(--gray-12)]',
7676
'prose-blockquote:font-normal prose-blockquote:border-l-[3px] prose-em:font-normal prose-blockquote:text-[var(--gray-12)]',
7777
'prose-img:my-2',
7878
'prose-strong:text-[var(--gray-12)]',
79-
fullWidth ? 'max-w-none w-full' : 'w-[75ch] xl:max-w-[calc(100%-250px)]',
79+
fullWidth ? 'max-w-none w-full' : 'w-full',
8080
].join(' ')}
81+
id="doc-content"
8182
>
8283
<div className="mb-4">
8384
<Banner />
@@ -112,17 +113,50 @@ export function DocPage({
112113
{hasGithub && <GitHubCTA />}
113114
</div>
114115
</div>
115-
116-
{hasToc && (
117-
<aside className="sticky h-[calc(100vh-var(--header-height))] top-[var(--header-height)] overflow-y-auto hidden xl:block w-[250px]">
118-
<div className="sidebar">
119-
<SidebarTableOfContents />
120-
<PlatformSdkDetail />
121-
</div>
122-
</aside>
123-
)}
124116
</main>
117+
{hasToc && (
118+
<aside
119+
data-layout-anchor="right"
120+
className="sticky h-[calc(100vh-var(--header-height))] top-[var(--header-height)] overflow-y-auto hidden toc:block w-[250px]"
121+
>
122+
<div className="sidebar">
123+
<SidebarTableOfContents />
124+
<PlatformSdkDetail />
125+
</div>
126+
</aside>
127+
)}
125128
</section>
129+
<style>{`:root { --doc-content-w: 1200px; } #doc-content { max-width: var(--doc-content-w); }`}</style>
130+
<style>{`
131+
@media (min-width: 2057px) {
132+
:root {
133+
--doc-content-w: 1200px;
134+
--toc-w: 250px;
135+
--gap: 24px;
136+
}
137+
/* Cap content width and center (reinforced at this breakpoint) */
138+
#doc-content {
139+
max-width: var(--doc-content-w);
140+
padding-left: 5rem; /* increase from px-6 (24px) to 5rem (80px) */
141+
padding-right: 5rem;
142+
}
143+
/* Cancel default push so content can center */
144+
[data-layout-anchor="left"] + .main-content {
145+
margin-left: 0 !important;
146+
width: 100% !important;
147+
}
148+
/* Anchor sidebars to content edges */
149+
[data-layout-anchor="left"] {
150+
left: calc(50% - (var(--doc-content-w) / 2) - var(--gap) - var(--sidebar-width));
151+
}
152+
[data-layout-anchor="right"] {
153+
position: fixed !important;
154+
left: calc(50% + (var(--doc-content-w) / 2) + var(--gap));
155+
width: var(--toc-w);
156+
}
157+
}
158+
`}</style>
159+
126160
<Mermaid />
127161
<ReaderDepthTracker />
128162
</div>

‎src/components/header.tsx‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export function Header({
3232
<header className="bg-[var(--gray-1)] h-[var(--header-height)] w-full z-50 border-b border-[var(--gray-a3)] fixed top-0">
3333
{/* define a header-height variable for consumption by other components */}
3434
<style>{':root { --header-height: 80px; }'}</style>
35-
<nav className="mx-auto px-6 lg:px-8 py-2 flex items-center">
35+
<nav className="nav-inner mx-auto px-3 py-2 flex items-center">
3636
{pathname !== '/' && (
3737
<button className="lg:hidden mr-3">
3838
<label
@@ -53,7 +53,7 @@ export function Header({
5353
<Link
5454
href="/"
5555
title="Sentry error monitoring"
56-
className="flex flex-shrink-0 items-center lg:w-[calc(var(--sidebar-width,300px)-2rem)] text-2xl font-medium text-[var(--foreground)]"
56+
className="logo-slot flex flex-shrink-0 items-center lg:w-[calc(var(--sidebar-width,300px)-2rem)] text-2xl font-medium text-[var(--foreground)]"
5757
>
5858
<div className="h-full pb-[6px]">
5959
<Image
@@ -91,6 +91,32 @@ export function Header({
9191
<MobileMenu pathname={pathname} searchPlatforms={searchPlatforms} />
9292
</div>
9393
</nav>
94+
<style>{`
95+
/* Align header width with content + sidebars at wide screens */
96+
@media (min-width: 2057px) {
97+
header .nav-inner {
98+
/* total layout width = sidebar + gap + content + gap + toc */
99+
max-width: calc(
100+
var(--sidebar-width, 300px)
101+
+ var(--gap, 24px)
102+
+ var(--doc-content-w, 1200px)
103+
+ var(--gap, 24px)
104+
+ var(--toc-w, 250px)
105+
);
106+
margin-left: auto;
107+
margin-right: auto;
108+
/* center, then compensate if sidebar != toc */
109+
transform: translateX(calc((var(--toc-w, 250px) - var(--sidebar-width, 300px)) / 2));
110+
/* restore small internal padding (≈ Tailwind px-3) */
111+
padding-left: 0.75rem;
112+
padding-right: 0.75rem;
113+
}
114+
/* Ensure the left logo area equals sidebar width */
115+
header .nav-inner .logo-slot {
116+
width: var(--sidebar-width, 300px);
117+
}
118+
}
119+
`}</style>
94120
</header>
95121
);
96122
}

‎src/components/sidebar/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export async function Sidebar({path, versions}: SidebarProps) {
8181
});
8282

8383
return (
84-
<aside className={`${styles.sidebar} py-3`}>
84+
<aside className={`${styles.sidebar} py-3`} data-layout-anchor="left">
8585
<input type="checkbox" id={sidebarToggleId} className="hidden" />
8686
<style>{':root { --sidebar-width: 300px; }'}</style>
8787
<div className="md:flex flex-col items-stretch overflow-auto">

‎src/components/sidebar/style.module.scss‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@
22
.sidebar.sidebar {
33
--sidebar-item-bg-hover: var(--gray-a4);
44
--sidebar-item-color: var(--accent);
5+
/* Keep a darker background in dark mode */
6+
background-color: var(--gray-1);
57
}
68
}
79
.sidebar {
810
--sidebar-item-bg-hover: var(--accent-purple-light);
911
--sidebar-item-color: var(--accent-purple);
10-
background-color: var(--gray-1);
12+
/* Light mode: use pure white background */
13+
background-color: #ffffff;
1114
top: var(--header-height);
1215
bottom: 0;
1316
flex-direction: column;
@@ -20,6 +23,32 @@
2023
height: 100vh;
2124
overflow-y: auto;
2225

26+
/* Minimal, accessible scrollbar styling */
27+
/* Firefox */
28+
scrollbar-width: thin;
29+
scrollbar-color: var(--gray-a6) transparent;
30+
31+
/* WebKit (Chrome, Edge, Safari) */
32+
&::-webkit-scrollbar {
33+
width: 8px;
34+
height: 8px;
35+
}
36+
&::-webkit-scrollbar-track {
37+
background: transparent;
38+
}
39+
&::-webkit-scrollbar-thumb {
40+
background-color: var(--gray-a6);
41+
border-radius: 9999px;
42+
border: 2px solid transparent; /* creates inner padding for a lighter feel */
43+
background-clip: content-box;
44+
}
45+
&:hover::-webkit-scrollbar-thumb {
46+
background-color: var(--gray-a7);
47+
}
48+
&::-webkit-scrollbar-thumb:active {
49+
background-color: var(--gray-a8);
50+
}
51+
2352
@media only screen and (min-width: 768px) {
2453
position: fixed;
2554
left: 0;

‎tailwind.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export default {
5858
},
5959
screens: {
6060
'lg-xl': {min: '1130px'},
61+
toc: '1490px',
6162
},
6263
},
6364
},

0 commit comments

Comments
 (0)