Simplify stick scroll in overview (#8336)

* undo sticky scroll revert

* Simplify stick scroll in overview

Author: alexr00

webviews/editorWebview/index.css

@@ -48,7 +48,7 @@ textarea:focus,
 }
 
 .title {
-	/* position: sticky; */
+	position: sticky;
 	top: 0;
 	z-index: 100;
 	display: flex;
@@ -63,33 +63,6 @@ textarea:focus,
 	flex: 1;
 }
 
-/* Shadow effect when stuck - only on bottom */
-.title.stuck::after {
-	content: '';
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	height: 1px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-	pointer-events: none;
-}
-
-/* Hide subtitle when stuck */
-.title.stuck .subtitle {
-	display: none;
-}
-
-/* Hide edit button when stuck */
-.title.stuck #edit-title-button {
-	display: none;
-}
-
-/* Adjust title size when stuck */
-.title.stuck .overview-title h2 {
-	font-size: 18px;
-}
-
 .title .pr-number {
 	margin-left: 5px;
 }

webviews/editorWebview/overview.tsx

@@ -31,98 +31,9 @@ const useMediaQuery = (query: string) => {
 
 export const Overview = (pr: PullRequest) => {
 	const isSingleColumnLayout = useMediaQuery('(max-width: 768px)');
-	const titleRef = React.useRef<HTMLDivElement>(null);
-	const stickyHeightRef = React.useRef(0);
-	const collapseDeltaRef = React.useRef(0);
-
-	React.useEffect(() => {
-		const title = titleRef.current;
-
-		if (!title) {
-			return;
-		}
-
-		// Small threshold to account for sub-pixel rendering
-		const STICKY_THRESHOLD = 1;
-
-		const measureStickyMetrics = () => {
-			const wasStuck = title.classList.contains('stuck');
-			if (!wasStuck) {
-				title.classList.remove('stuck');
-			}
-
-			const unstuckHeight = title.getBoundingClientRect().height;
-			// title.classList.add('stuck');
-			const stuckHeight = title.getBoundingClientRect().height;
-			stickyHeightRef.current = stuckHeight;
-			collapseDeltaRef.current = Math.max(0, unstuckHeight - stuckHeight);
-
-			if (!wasStuck) {
-				title.classList.remove('stuck');
-			}
-		};
-
-		const hasEnoughScroll = () => {
-			const doc = document.documentElement;
-			const body = document.body;
-			const scrollHeight = Math.max(doc.scrollHeight, body.scrollHeight);
-			const availableScroll = scrollHeight - window.innerHeight;
-			const adjustment = title.classList.contains('stuck') ? collapseDeltaRef.current : 0;
-			return availableScroll + adjustment >= stickyHeightRef.current;
-		};
-
-		// Use scroll event with requestAnimationFrame to detect when title becomes sticky
-		// Check if the title's top position is at the viewport top (sticky position)
-		let ticking = false;
-		const handleScroll = () => {
-			if (ticking) {
-				return;
-			}
-
-			ticking = true;
-			window.requestAnimationFrame(() => {
-				if (!hasEnoughScroll()) {
-					title.classList.remove('stuck');
-					ticking = false;
-					return;
-				}
-
-				const rect = title.getBoundingClientRect();
-				// Title is stuck when its top is at position 0 (sticky top: 0)
-				if (rect.top <= STICKY_THRESHOLD) {
-					// title.classList.add('stuck');
-				} else {
-					title.classList.remove('stuck');
-				}
-				ticking = false;
-			});
-		};
-
-		const handleResize = () => {
-			measureStickyMetrics();
-			handleScroll();
-		};
-
-		measureStickyMetrics();
-
-		// Check initial state after a brief delay to ensure layout is settled
-		const timeoutId = setTimeout(() => {
-			measureStickyMetrics();
-			handleScroll();
-		}, 100);
-
-		window.addEventListener('scroll', handleScroll, { passive: true });
-		window.addEventListener('resize', handleResize);
-
-		return () => {
-			clearTimeout(timeoutId);
-			window.removeEventListener('scroll', handleScroll);
-			window.removeEventListener('resize', handleResize);
-		};
-	}, []);
 
 	return <>
-		<div id="title" className="title" ref={titleRef}>
+		<div id="title" className="title">
 			<div className="details">
 				<Header {...pr} />
 			</div>