Add sticky header to PR/Issue views

[Copilot]

When scrolling through long PRs or Issues, the header containing critical actions (Checkout, Refresh, etc.) disappears. This adds sticky positioning to keep the header accessible, matching GitHub.com's UX.

Scroll tracking

• Triggers sticky mode at 80px scroll threshold
• Uses requestAnimationFrame with ticking flag to throttle scroll events
• Passive event listener for scroll performance

Compact header mode

• Title compressed from 32px → 18px font size
• Status badge moved inline with action buttons
• Subtitle (author, branches) hidden when sticky
• Non-essential buttons (rename, copy link) hidden

Responsive & accessibility

• Mobile styles adjust font size to 16px when sticky
• High contrast mode removes box-shadow, adds border
• All action buttons remain functional in sticky state

// overview.tsx
const [isSticky, setIsSticky] = React.useState(false);

React.useEffect(() => {
  let ticking = false;
  const handleScroll = () => {
    if (!ticking) {
      window.requestAnimationFrame(() => {
        setIsSticky(window.scrollY > STICKY_THRESHOLD);
        ticking = false;
      });
      ticking = true;
    }
  };
  window.addEventListener('scroll', handleScroll, { passive: true });
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

/* index.css */
.title.sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--vscode-editor-background);
  border-bottom: 1px solid var(--vscode-panel-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

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 microsoft/vscode-pull-request-github#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.