Fix flickering with IntersectionObserver and pure CSS approach

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

Author: Copilot

webviews/components/header.tsx

@@ -32,9 +32,8 @@ export function Header({
 	owner,
 	repo,
 	busy,
-	stateReason,
-	isCompact
-}: PullRequest & { isCompact?: boolean }) {
+	stateReason
+}: PullRequest) {
 	const [currentTitle, setCurrentTitle] = useStateProp(title);
 	const [inEditMode, setEditMode] = useState(false);
 	const codingAgentEvent = mostRecentCopilotEvent(events);
@@ -52,16 +51,9 @@ export function Header({
 				canEdit={canEdit}
 				owner={owner}
 				repo={repo}
-				isCompact={isCompact}
 			/>
-			{!isCompact && <Subtitle state={state} stateReason={stateReason} head={head} base={base} author={author} isIssue={isIssue} isDraft={isDraft} codingAgentEvent={codingAgentEvent} />}
+			<Subtitle state={state} stateReason={stateReason} head={head} base={base} author={author} isIssue={isIssue} isDraft={isDraft} codingAgentEvent={codingAgentEvent} />
 			<div className="header-actions">
-				{isCompact && (
-					<div id="status" className={`status-badge-${getStatus(state, !!isDraft, isIssue, stateReason).color}`}>
-						<span className='icon'>{getStatus(state, !!isDraft, isIssue, stateReason).icon}</span>
-						<span>{getStatus(state, !!isDraft, isIssue, stateReason).text}</span>
-					</div>
-				)}
 				<ButtonGroup
 					isCurrentlyCheckedOut={isCurrentlyCheckedOut}
 					isIssue={isIssue}
@@ -88,10 +80,9 @@ interface TitleProps {
 	canEdit: boolean;
 	owner: string;
 	repo: string;
-	isCompact?: boolean;
 }
 
-function Title({ title, titleHTML, number, url, inEditMode, setEditMode, setCurrentTitle, canEdit, owner, repo, isCompact }: TitleProps): JSX.Element {
+function Title({ title, titleHTML, number, url, inEditMode, setEditMode, setCurrentTitle, canEdit, owner, repo }: TitleProps): JSX.Element {
 	const { setTitle, copyPrLink } = useContext(PullRequestContext);
 
 	const titleForm = (
@@ -129,24 +120,22 @@ function Title({ title, titleHTML, number, url, inEditMode, setEditMode, setCurr
 	context['github:copyMenu'] = true;
 
 	const displayTitle = (
-		<div className={`overview-title ${isCompact ? 'compact' : ''}`}>
+		<div className="overview-title">
 			<h2>
 				<span dangerouslySetInnerHTML={{ __html: titleHTML }} />
 				{' '}
 				<a href={url} title={url} data-vscode-context={JSON.stringify(context)}>
 					#{number}
 				</a>
 			</h2>
-			{!isCompact && canEdit ?
+			{canEdit ?
 				<button title="Rename" onClick={() => setEditMode(true)} className="icon-button">
 					{editIcon}
 				</button>
 				: null}
-			{!isCompact && (
-				<button title="Copy Link" onClick={copyPrLink} className="icon-button" aria-label="Copy Pull Request Link">
-					{copyIcon}
-				</button>
-			)}
+			<button title="Copy Link" onClick={copyPrLink} className="icon-button" aria-label="Copy Pull Request Link">
+				{copyIcon}
+			</button>
 		</div>
 	);
 

webviews/editorWebview/index.css

@@ -48,50 +48,57 @@ textarea:focus,
 }
 
 .title {
+	position: sticky;
+	top: 0;
+	z-index: 100;
 	display: flex;
 	align-items: flex-start;
 	margin: 20px 0 24px;
 	padding-bottom: 24px;
 	border-bottom: 1px solid var(--vscode-list-inactiveSelectionBackground);
-	transition: all 0.2s ease;
+	background: var(--vscode-editor-background);
 }
 
-.title.sticky {
-	position: sticky;
+/* Shadow effect when stuck */
+.title::before {
+	content: '';
+	position: absolute;
 	top: 0;
-	z-index: 100;
+	left: -32px;
+	right: -32px;
+	bottom: 0;
 	background: var(--vscode-editor-background);
-	margin: 0;
-	padding: 8px 0;
-	border-bottom: 1px solid var(--vscode-panel-border);
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	opacity: 0;
+	transition: opacity 0.2s ease;
+	pointer-events: none;
+	z-index: -1;
 }
 
-.title.sticky .details {
-	width: 100%;
+.title.stuck::before {
+	opacity: 1;
 }
 
-.title.sticky .overview-title h2 {
-	font-size: 18px;
-	margin: 0;
+/* Hide subtitle when stuck */
+.title .subtitle {
+	transition: opacity 0.2s ease, max-height 0.2s ease;
+	max-height: 100px;
+	overflow: hidden;
 }
 
-.title.sticky .header-actions {
-	padding-top: 0;
+.title.stuck .subtitle {
+	opacity: 0;
+	max-height: 0;
+	pointer-events: none;
 }
 
-.overview-title.compact {
-	display: flex;
-	align-items: center;
-	gap: 8px;
+/* Adjust title size when stuck */
+.title .overview-title h2 {
+	transition: font-size 0.2s ease;
 }
 
-.overview-title.compact h2 {
+.title.stuck .overview-title h2 {
 	font-size: 18px;
-	margin: 0;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
 }
 
 .title .pr-number {
@@ -605,15 +612,6 @@ small-button {
 	align-items: center;
 }
 
-.title.sticky .header-actions {
-	flex-wrap: nowrap;
-}
-
-.title.sticky .header-actions #status {
-	margin-right: 0;
-	flex-shrink: 0;
-}
-
 .header-actions>div:first-of-type {
 	flex: 1;
 }
@@ -1261,9 +1259,9 @@ code {
 	border-bottom: 1px solid var(--vscode-contrastBorder);
 }
 
-.vscode-high-contrast .title.sticky {
-	border: 1px solid var(--vscode-contrastBorder);
+.vscode-high-contrast .title.stuck::before {
 	box-shadow: none;
+	border: 1px solid var(--vscode-contrastBorder);
 }
 
 .vscode-high-contrast .diff .diffLine {
@@ -1292,19 +1290,10 @@ code {
 		padding-bottom: 0px;
 	}
 
-	.title.sticky {
-		padding: 8px 0;
-		border-bottom: 1px solid var(--vscode-panel-border);
-	}
-
-	.title.sticky .overview-title h2 {
+	.title.stuck .overview-title h2 {
 		font-size: 16px;
 	}
 
-	.title.sticky .button-group {
-		flex-wrap: nowrap;
-	}
-
 	#app {
 		display: block;
 	}

webviews/editorWebview/overview.tsx

@@ -29,49 +29,49 @@ const useMediaQuery = (query: string) => {
 	return matches;
 };
 
-const STICKY_THRESHOLD = 80;
-const STICKY_THRESHOLD_BUFFER = 10;
-
 export const Overview = (pr: PullRequest) => {
 	const isSingleColumnLayout = useMediaQuery('(max-width: 768px)');
-	const [isSticky, setIsSticky] = React.useState(false);
-	const isStickyRef = React.useRef(isSticky);
-
-	// Keep ref in sync with state
-	React.useEffect(() => {
-		isStickyRef.current = isSticky;
-	}, [isSticky]);
+	const titleRef = React.useRef<HTMLDivElement>(null);
+	const sentinelRef = React.useRef<HTMLDivElement>(null);
 
 	React.useEffect(() => {
-		let ticking = false;
+		const sentinel = sentinelRef.current;
+		const title = titleRef.current;
+		
+		if (!sentinel || !title) {
+			return;
+		}
 
-		const handleScroll = () => {
-			if (!ticking) {
-				window.requestAnimationFrame(() => {
-					const scrollY = window.scrollY;
-					const currentSticky = isStickyRef.current;
-					// Use hysteresis to prevent flickering at the threshold
-					// When not sticky, activate when scrollY > threshold
-					// When sticky, deactivate when scrollY < (threshold - buffer)
-					if (!currentSticky && scrollY > STICKY_THRESHOLD) {
-						setIsSticky(true);
-					} else if (currentSticky && scrollY < STICKY_THRESHOLD - STICKY_THRESHOLD_BUFFER) {
-						setIsSticky(false);
-					}
-					ticking = false;
-				});
-				ticking = true;
+		// Use IntersectionObserver to detect when the sentinel leaves the viewport
+		// This indicates the title is stuck
+		const observer = new IntersectionObserver(
+			([entry]) => {
+				// When sentinel is not intersecting, title is stuck
+				if (entry.isIntersecting) {
+					title.classList.remove('stuck');
+				} else {
+					title.classList.add('stuck');
+				}
+			},
+			{
+				threshold: [1],
+				rootMargin: '0px'
 			}
-		};
+		);
+
+		observer.observe(sentinel);
 
-		window.addEventListener('scroll', handleScroll, { passive: true });
-		return () => window.removeEventListener('scroll', handleScroll);
+		return () => {
+			observer.disconnect();
+		};
 	}, []);
 
 	return <>
-		<div id="title" className={`title ${isSticky ? 'sticky' : ''}`}>
+		{/* Sentinel element that sits just above the sticky title */}
+		<div ref={sentinelRef} style={{ height: '1px', marginTop: '-1px' }} />
+		<div id="title" className="title" ref={titleRef}>
 			<div className="details">
-				<Header {...pr} isCompact={isSticky} />
+				<Header {...pr} />
 			</div>
 		</div>
 		{isSingleColumnLayout ?