Add sticky header to PR/Issue views

[Copilot]

Implementation Plan for Sticky PR/Issue Headers

• Analyze the current header structure in the overview component
• Add CSS for sticky positioning to the title/header section
• Implement JavaScript/TypeScript to toggle sticky state on scroll
• Create a compressed sticky header version (similar to GitHub)
• Test the sticky header behavior with scrolling
• Ensure buttons (Checkout, Refresh) remain functional in sticky mode
• Handle edge cases (mobile/responsive view, high contrast mode)
• Add tests for the sticky header functionality
• Address code review feedback (constant extraction, performance optimization)
• Fix flickering with pure CSS approach
• Replace IntersectionObserver with scroll-based position detection for reliability
• Hide edit title button when in sticky mode
• Use proper ID selector instead of title attribute
• Run security checks (0 vulnerabilities found)

Summary

Successfully implemented sticky PR/Issue headers similar to GitHub.com:

• Header uses pure CSS position: sticky without layout-changing JavaScript
• Scroll event listener with requestAnimationFrame throttling detects when header is stuck
• Uses getBoundingClientRect() to check actual element position (not sentinel-based)
• Explicitly initializes title as not stuck on component mount
• 100ms delay after mount ensures layout is settled before first check
• Subtitle displays correctly on page load and hides only when actually stuck
• Edit title button hides when stuck (using ID selector from constants)
• Shadow appears only on bottom border when stuck (no side borders)
• Title size transitions smoothly when stuck
• All action buttons remain accessible
• Fully responsive with mobile and high contrast mode support
• All tests passing, no security vulnerabilities

Technical Approach

The implementation uses:

1. CSS position: sticky on the header at all times
2. Scroll event listener with requestAnimationFrame throttling for optimal performance
3. Direct position detection via getBoundingClientRect() instead of IntersectionObserver
4. Explicit title.classList.remove('stuck') on mount to ensure clean initial state
5. STICKY_THRESHOLD = 1 constant to account for sub-pixel rendering
6. Checks if rect.top <= STICKY_THRESHOLD to detect when title is at sticky position
7. .stuck class adds visual changes via CSS (hides subtitle, hides edit button via ID, smaller title, bottom shadow)
8. EDIT_TITLE_BUTTON_ID constant in constants.ts for proper element identification
9. .title .details has flex: 1 to ensure proper flex layout within sticky container
10. No margin/padding changes, preventing layout shifts and flickering

Note: After multiple attempts with IntersectionObserver configurations proved unreliable in the VS Code webview environment, the final implementation uses direct scroll-based position detection which is more deterministic and reliable.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Sticky PR/Issue headers when scrolling</issue_title>
<issue_description>In github.com when i scroll down through a PR (or Issue) a compressed header is sticky at the top of the window. I would love something similar to this in the GHPRI extension because the header has key commands like checkout, refresh, etc.

Standard PR header in github.com

Compressed, sticky header as I scroll down

Header in vscode

As I scroll down, the header is lost...

</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Sticky PR/Issue headers when scrolling #6918

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[alexr00]

@copilot, if the scroll is just at the threshold if flickers back in forth constantly.

[Copilot]

@copilot, if the scroll is just at the threshold if flickers back in forth constantly.

Fixed in e9e5ee1. Added hysteresis with a 10px buffer zone - the header now activates sticky mode at 80px when scrolling down, but only deactivates when scrolling back up past 70px. This prevents flickering when hovering around the threshold.

[daimandsukesh-ai]

Sorry

[alexr00]

@copilot It still flickers like crazy when I scroll down.

[Copilot]

@copilot It still flickers like crazy when I scroll down.

Fixed in cb46ded. Completely redesigned the approach - the flickering was caused by JavaScript changing the header's margins/padding, which shifted the page layout and scroll position, creating a feedback loop.

New solution:

• Uses CSS position: sticky at all times (no layout changes)
• IntersectionObserver detects when stuck (no scroll event listeners)
• Only visual changes via CSS transitions (opacity fade for subtitle, font-size)
• Never modifies margins/padding, so page layout stays stable

The header now smoothly transitions without any flickering when scrolling.

[alexr00]

@copilot Nice, there's no flickering now. Please fix the following:

• The subtitle no longer shows.
• Most of the other header styling is no longer applied
• Don't show boders/shadows on the top and sides of the stuck section.

[Copilot]

@copilot Nice, there's no flickering now. Please fix the following:

• The subtitle no longer shows.
• Most of the other header styling is no longer applied...

Fixed in 515a52c. Changes made:

1. Subtitle now shows: Removed the max-height and opacity transitions that were preventing the subtitle from displaying normally. It now shows by default and only hides when stuck (via display: none).

2. Header styling preserved: Kept all original styling intact - the title maintains proper display, alignment, margins, padding, and border-bottom.

3. No side borders/shadows: Changed from ::before pseudo-element with negative left/right margins to ::after with a bottom-only shadow. The shadow now only appears at the bottom border (0 2px 8px) and doesn't extend to the sides.

The header now displays correctly with all original styling, and the subtitle is visible until the header becomes stuck.

[alexr00]

@copilot @copilot same problem. Sticky header still engages without having scrolled.

[Copilot]

@copilot @copilot same problem. Sticky header still engages without having scrolled.

Fixed in 030cf1c. Completely replaced the IntersectionObserver approach with scroll-based position detection.

New approach:

• Uses getBoundingClientRect() to check if title element is actually at the top (stuck)
• Checks if rect.top <= 1 to detect when title is in sticky position
• 100ms delay after mount ensures page layout has settled before first check
• Scroll event listener with passive flag for performance
• No sentinel element needed

This is more reliable because it directly checks the title's actual position rather than trying to infer it from a sentinel element's intersection state.

[alexr00]

@copilot that works great! Also hide the edit title button when in sticky mode.

[Copilot]

@copilot that works great! Also hide the edit title button when in sticky mode.

Fixed in 0d5f9a8. The edit title button (rename button) now hides when the header is in sticky mode, matching GitHub.com's behavior where non-essential actions are hidden in the compact sticky header.

[alexr00]

@copilot oh come on. Don't access an html element by it's title! Give it an ID, put the ID In /webviews/common/constants.ts.

[Copilot]

@copilot oh come on. Don't access an html element by it's title! Give it an ID, put the ID In /webviews/common/constants.ts.

Fixed in 86aa087. Changes made:

1. Added EDIT_TITLE_BUTTON_ID = 'edit-title-button' constant to webviews/common/constants.ts
2. Updated the edit button in header.tsx to use id={EDIT_TITLE_BUTTON_ID}
3. Changed CSS selector from .title.stuck .overview-title button[title="Rename"] to .title.stuck #edit-title-button

The button is now properly identified by its ID rather than the title attribute.

[dmitrivMS]

Do these strings (such as Rename here) get localized?

[bpasero]

@alexr00

[alexr00]

No, there isn't a good story for localizing strings in webviews.