Fix IntersectionObserver to prevent stuck state on page load

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

Author: Copilot

webviews/editorWebview/overview.tsx

@@ -42,20 +42,23 @@ export const Overview = (pr: PullRequest) => {
 			return;
 		}
 
-		// Use IntersectionObserver to detect when the sentinel leaves the viewport
-		// This indicates the title is stuck
+		// Use IntersectionObserver to detect when the title becomes sticky
+		// The sentinel is positioned right above the title
+		// When sentinel scrolls out of view (top of viewport), title becomes stuck
 		const observer = new IntersectionObserver(
 			([entry]) => {
-				// When sentinel is not intersecting, title is stuck
+				// When sentinel is visible, title hasn't become stuck yet
+				// When sentinel is not visible (scrolled past top), title is stuck
 				if (entry.isIntersecting) {
 					title.classList.remove('stuck');
 				} else {
 					title.classList.add('stuck');
 				}
 			},
 			{
-				threshold: [1],
-				rootMargin: '0px'
+				// Use rootMargin to trigger slightly before reaching the top
+				rootMargin: '-1px 0px 0px 0px',
+				threshold: [1]
 			}
 		);
 
@@ -67,8 +70,8 @@ export const Overview = (pr: PullRequest) => {
 	}, []);
 
 	return <>
-		{/* Sentinel element that sits just above the sticky title */}
-		<div ref={sentinelRef} style={{ height: '1px', marginTop: '-1px' }} />
+		{/* Sentinel element positioned just before the sticky title - must have height to be observable */}
+		<div ref={sentinelRef} style={{ height: '1px' }} />
 		<div id="title" className="title" ref={titleRef}>
 			<div className="details">
 				<Header {...pr} />