From df2eda0a61937a9350045f97247ba3244f82e09c Mon Sep 17 00:00:00 2001 From: brandonkachen Date: Tue, 30 Sep 2025 15:38:26 -0700 Subject: [PATCH 1/8] fix attempt: layout --- web/src/app/docs/layout.tsx | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/web/src/app/docs/layout.tsx b/web/src/app/docs/layout.tsx index 277d85b71e..6f3d02704c 100644 --- a/web/src/app/docs/layout.tsx +++ b/web/src/app/docs/layout.tsx @@ -25,14 +25,11 @@ export default function DocsLayout({ const handleScroll = () => { // The header with logo is approximately 72px tall (p-4 = 16px top/bottom + content height) // Fix the sidebar when the user scrolls past the header - if (window.scrollY > 72) { - setIsFixed(true) - } else { - setIsFixed(false) - } + const shouldBeFixed = window.scrollY > 72 + setIsFixed((prev) => (prev !== shouldBeFixed ? shouldBeFixed : prev)) } - window.addEventListener('scroll', handleScroll) + window.addEventListener('scroll', handleScroll, { passive: true }) return () => window.removeEventListener('scroll', handleScroll) }, []) @@ -46,14 +43,16 @@ export default function DocsLayout({ const isAtTop = scrollTop === 0 const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1 - setShowTopFade(!isAtTop) - setShowBottomFade(!isAtBottom) + setShowTopFade((prev) => (prev !== !isAtTop ? !isAtTop : prev)) + setShowBottomFade((prev) => (prev !== !isAtBottom ? !isAtBottom : prev)) } - // Check initial state - handleScroll() + // Use requestAnimationFrame to check initial state after layout + requestAnimationFrame(() => { + handleScroll() + }) - sidebarElement.addEventListener('scroll', handleScroll) + sidebarElement.addEventListener('scroll', handleScroll, { passive: true }) return () => sidebarElement.removeEventListener('scroll', handleScroll) }, []) From 62b058d6aa3ac2836a0b24b36b094f2ff804a99f Mon Sep 17 00:00:00 2001 From: brandonkachen Date: Tue, 30 Sep 2025 15:50:21 -0700 Subject: [PATCH 2/8] docs(layout): fix sidebar bounce on short pages by stabilizing scroll/fixed logic MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Stabilizes the docs sidebar behavior on pages shorter than the sidebar by making the fixed state update idempotent, simplifying fade logic, and ensuring proper initial state handling. 🤖 Generated with Codebuff Co-Authored-By: Codebuff --- web/src/app/docs/layout.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/web/src/app/docs/layout.tsx b/web/src/app/docs/layout.tsx index 6f3d02704c..ffac394e20 100644 --- a/web/src/app/docs/layout.tsx +++ b/web/src/app/docs/layout.tsx @@ -26,12 +26,14 @@ export default function DocsLayout({ // The header with logo is approximately 72px tall (p-4 = 16px top/bottom + content height) // Fix the sidebar when the user scrolls past the header const shouldBeFixed = window.scrollY > 72 - setIsFixed((prev) => (prev !== shouldBeFixed ? shouldBeFixed : prev)) + if (shouldBeFixed !== isFixed) { + setIsFixed(shouldBeFixed) + } } window.addEventListener('scroll', handleScroll, { passive: true }) return () => window.removeEventListener('scroll', handleScroll) - }, []) + }, [isFixed]) // Handle sidebar scroll for dynamic fade effects useEffect(() => { @@ -43,16 +45,14 @@ export default function DocsLayout({ const isAtTop = scrollTop === 0 const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1 - setShowTopFade((prev) => (prev !== !isAtTop ? !isAtTop : prev)) - setShowBottomFade((prev) => (prev !== !isAtBottom ? !isAtBottom : prev)) + setShowTopFade(!isAtTop) + setShowBottomFade(!isAtBottom) } - // Use requestAnimationFrame to check initial state after layout - requestAnimationFrame(() => { - handleScroll() - }) + // Check initial state + handleScroll() - sidebarElement.addEventListener('scroll', handleScroll, { passive: true }) + sidebarElement.addEventListener('scroll', handleScroll) return () => sidebarElement.removeEventListener('scroll', handleScroll) }, []) @@ -62,8 +62,8 @@ export default function DocsLayout({
{/* Dynamic gradient fade indicators */} {showTopFade && ( From 9681fcc97dc480ba495ba248777fa600ab74f3eb Mon Sep 17 00:00:00 2001 From: brandonkachen Date: Tue, 30 Sep 2025 16:00:17 -0700 Subject: [PATCH 3/8] Simplify sidebar positioning to prevent bouncing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Removed dynamic fixed/sticky toggle that caused layout shifts. Now uses pure CSS sticky positioning for a stable, bounce-free sidebar. 🤖 Generated with Codebuff Co-Authored-By: Codebuff --- web/src/app/docs/layout.tsx | 22 +--------------------- 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/web/src/app/docs/layout.tsx b/web/src/app/docs/layout.tsx index ffac394e20..94aa83a563 100644 --- a/web/src/app/docs/layout.tsx +++ b/web/src/app/docs/layout.tsx @@ -17,24 +17,8 @@ export default function DocsLayout({ const [open, setOpen] = useState(false) const [showTopFade, setShowTopFade] = useState(false) const [showBottomFade, setShowBottomFade] = useState(false) - const [isFixed, setIsFixed] = useState(false) const sidebarRef = useRef(null) - // Track scroll position to determine if sidebar should be fixed - useEffect(() => { - const handleScroll = () => { - // The header with logo is approximately 72px tall (p-4 = 16px top/bottom + content height) - // Fix the sidebar when the user scrolls past the header - const shouldBeFixed = window.scrollY > 72 - if (shouldBeFixed !== isFixed) { - setIsFixed(shouldBeFixed) - } - } - - window.addEventListener('scroll', handleScroll, { passive: true }) - return () => window.removeEventListener('scroll', handleScroll) - }, [isFixed]) - // Handle sidebar scroll for dynamic fade effects useEffect(() => { const sidebarElement = sidebarRef.current @@ -60,11 +44,7 @@ export default function DocsLayout({
-
+
{/* Dynamic gradient fade indicators */} {showTopFade && (
From daf70403fb4fa79fe357d4284983d95f7d799aa0 Mon Sep 17 00:00:00 2001 From: brandonkachen Date: Tue, 30 Sep 2025 16:10:28 -0700 Subject: [PATCH 4/8] Fix sidebar scroll jank by removing overflow-x-hidden MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The overflow-x-hidden property was breaking position: sticky, causing JavaScript-based position toggling and layout shifts. Now uses clean CSS sticky positioning. 🤖 Generated with Codebuff Co-Authored-By: Codebuff --- web/src/app/docs/layout.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/web/src/app/docs/layout.tsx b/web/src/app/docs/layout.tsx index 94aa83a563..fae522a4ab 100644 --- a/web/src/app/docs/layout.tsx +++ b/web/src/app/docs/layout.tsx @@ -12,8 +12,7 @@ export default function DocsLayout({ children, }: { children: React.ReactNode -}) { - const pathname = usePathname() +}) { const pathname = usePathname() const [open, setOpen] = useState(false) const [showTopFade, setShowTopFade] = useState(false) const [showBottomFade, setShowBottomFade] = useState(false) @@ -42,7 +41,7 @@ export default function DocsLayout({ return (
-
+
{/* Dynamic gradient fade indicators */} From 219822641b1e4b592f2f6d8426940bd7cc561118 Mon Sep 17 00:00:00 2001 From: brandonkachen Date: Tue, 30 Sep 2025 16:32:59 -0700 Subject: [PATCH 5/8] Fix sidebar positioning with CSS-only solution MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Moved pt-8 padding from wrapper to sidebar and main elements individually. This ensures proper alignment without JavaScript complexity. 🤖 Generated with Codebuff Co-Authored-By: Codebuff --- web/src/app/docs/layout.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/web/src/app/docs/layout.tsx b/web/src/app/docs/layout.tsx index fae522a4ab..93c1b2376e 100644 --- a/web/src/app/docs/layout.tsx +++ b/web/src/app/docs/layout.tsx @@ -41,9 +41,15 @@ export default function DocsLayout({ return (
-
+
-
+
{/* Dynamic gradient fade indicators */} {showTopFade && (
@@ -61,7 +67,7 @@ export default function DocsLayout({
-
{children}
+
{children}
Date: Tue, 30 Sep 2025 17:08:40 -0700 Subject: [PATCH 6/8] Add container ref and sticky top constant for docs sidebar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🤖 Generated with Codebuff Co-Authored-By: Codebuff --- web/src/app/docs/layout.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/web/src/app/docs/layout.tsx b/web/src/app/docs/layout.tsx index 93c1b2376e..9182db9241 100644 --- a/web/src/app/docs/layout.tsx +++ b/web/src/app/docs/layout.tsx @@ -17,6 +17,8 @@ export default function DocsLayout({ const [showTopFade, setShowTopFade] = useState(false) const [showBottomFade, setShowBottomFade] = useState(false) const sidebarRef = useRef(null) + const containerRef = useRef(null) + const stickyTop = 64 // navbar height // Handle sidebar scroll for dynamic fade effects useEffect(() => { From 2ddcef3f25a41c8b6cd242b9dd1923c21c5de891 Mon Sep 17 00:00:00 2001 From: brandonkachen Date: Tue, 30 Sep 2025 17:23:22 -0700 Subject: [PATCH 7/8] docs(layout): align docs sidebar with main content by reducing top padding MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Slightly reduce the inner container's top padding from pt-6 to pt-2 to better align the sidebar with the main content and improve visual rhythm on docs pages. 🤖 Generated with Codebuff Co-Authored-By: Codebuff --- web/src/app/docs/layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/app/docs/layout.tsx b/web/src/app/docs/layout.tsx index 9182db9241..37524af30f 100644 --- a/web/src/app/docs/layout.tsx +++ b/web/src/app/docs/layout.tsx @@ -63,7 +63,7 @@ export default function DocsLayout({ {/* Enhanced scrollable container */}
setOpen(false)} />
From 60a951c2dce0508de13418c23c2f4de9ec34d022 Mon Sep 17 00:00:00 2001 From: brandonkachen Date: Tue, 30 Sep 2025 17:48:18 -0700 Subject: [PATCH 8/8] docs(layout): improve sidebar spacing and fade effects MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adjust sidebar container height calculation to add more bottom margin. Increase fade gradient height and add via-stop for more pronounced effect. 🤖 Generated with Codebuff Co-Authored-By: Codebuff --- web/src/app/docs/layout.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/web/src/app/docs/layout.tsx b/web/src/app/docs/layout.tsx index 37524af30f..df9232c06d 100644 --- a/web/src/app/docs/layout.tsx +++ b/web/src/app/docs/layout.tsx @@ -12,7 +12,8 @@ export default function DocsLayout({ children, }: { children: React.ReactNode -}) { const pathname = usePathname() +}) { + const pathname = usePathname() const [open, setOpen] = useState(false) const [showTopFade, setShowTopFade] = useState(false) const [showBottomFade, setShowBottomFade] = useState(false) @@ -49,27 +50,29 @@ export default function DocsLayout({ className="w-64 sticky z-40" style={{ top: `${stickyTop}px`, - height: `calc(100vh - ${stickyTop}px - 1rem)`, + height: `calc(100vh - ${stickyTop}px - 3rem)`, }} > {/* Dynamic gradient fade indicators */} {showTopFade && ( -
+
)} {showBottomFade && ( -
+
)} {/* Enhanced scrollable container */}
setOpen(false)} />
-
{children}
+
+ {children} +