Skip to content

[fix][render preview] docs bouncing #327

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brandonkachen merged 8 commits into from
Oct 1, 2025
Merged

[fix][render preview] docs bouncing #327

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
df2eda0
fix attempt: layout
brandonkachen Sep 30, 2025
62b058d
docs(layout): fix sidebar bounce on short pages by stabilizing scroll…
brandonkachen Sep 30, 2025
9681fcc
Simplify sidebar positioning to prevent bouncing
brandonkachen Sep 30, 2025
daf7040
Fix sidebar scroll jank by removing overflow-x-hidden
brandonkachen Sep 30, 2025
2198226
Fix sidebar positioning with CSS-only solution
brandonkachen Sep 30, 2025
917df21
Add container ref and sticky top constant for docs sidebar
brandonkachen Oct 1, 2025
2ddcef3
docs(layout): align docs sidebar with main content by reducing top pa…
brandonkachen Oct 1, 2025
60a951c
docs(layout): improve sidebar spacing and fade effects
brandonkachen Oct 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 14 additions & 25 deletions web/src/app/docs/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,24 +17,9 @@ 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<HTMLDivElement>(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
if (window.scrollY > 72) {
setIsFixed(true)
} else {
setIsFixed(false)
}
}

window.addEventListener('scroll', handleScroll)
return () => window.removeEventListener('scroll', handleScroll)
}, [])
const containerRef = useRef<HTMLDivElement>(null)
const stickyTop = 64 // navbar height

// Handle sidebar scroll for dynamic fade effects
useEffect(() => {
Expand All @@ -59,31 +44,35 @@ export default function DocsLayout({

return (
<div className="pt-8">
<div className="container flex md:space-x-8 overflow-x-hidden">
<div ref={containerRef} className="container flex md:space-x-8">
<div className="hidden lg:block w-64 shrink-0">
<div
className={`w-64 z-40 transition-all duration-200 ease-in-out ${
isFixed ? 'fixed top-4 h-[calc(100vh-2rem)]' : 'relative'
}`}
className="w-64 sticky z-40"
style={{
top: `${stickyTop}px`,
height: `calc(100vh - ${stickyTop}px - 3rem)`,
}}
>
{/* Dynamic gradient fade indicators */}
{showTopFade && (
<div className="absolute top-0 left-0 right-0 h-6 bg-gradient-to-b from-background to-transparent pointer-events-none z-10 rounded-t-lg transition-opacity duration-200" />
<div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-background via-background/60 to-transparent pointer-events-none z-10 rounded-t-lg transition-opacity duration-200" />
)}
{showBottomFade && (
<div className="absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-t from-background to-transparent pointer-events-none z-10 rounded-b-lg transition-opacity duration-200" />
<div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-background via-background/60 to-transparent pointer-events-none z-10 rounded-b-lg transition-opacity duration-200" />
)}

{/* Enhanced scrollable container */}
<div
ref={sidebarRef}
className="relative h-full overflow-y-auto pr-4 pl-4 pt-6 pb-6 custom-scrollbar bg-background/95 backdrop-blur-sm rounded-lg border border-border/50 shadow-lg"
className="relative h-full overflow-y-auto pr-4 pl-4 pt-4 pb-6 custom-scrollbar bg-background/95 backdrop-blur-sm rounded-lg border border-border/50 shadow-lg"
>
<DocSidebar className="" onNavigate={() => setOpen(false)} />
</div>
</div>
</div>
<main className="flex-1 mx-auto pb-36 md:px-8 min-w-0">{children}</main>
<main className="flex-1 mx-auto pb-36 md:px-8 min-w-0 pt-8">
{children}
</main>
</div>
<div className="flex items-center lg:hidden sticky bottom-0 z-50 bg-background/80 backdrop-blur-sm container p-4 rounded-t-lg border-t">
<Sheet
Expand Down