Make left sidebar and right column fill full viewport height with scrollable regions

[Copilot]

Restructures the page layout so both the left sidebar and right content area fill the full viewport height, each scrolling independently, with the footer scrolling with the right column content. Also adds a resizable sidebar, custom styled scrollbars, and a sticky table header.

Changes Made

• Body: Changed from min-h-screen to h-screen overflow-hidden so the page is exactly viewport-height, giving all child flex items a fixed height ceiling to scroll within
• Sidebar (<aside>): Added md:overflow-y-auto so the repository list scrolls independently when it overflows, without pushing the page taller. The sidebar is now horizontally resizable via a drag handle — defaults to 288px, resizable between 160px and 640px, with the width persisted in localStorage
• Resize handle: A 5px drag handle sits between the sidebar and main content area (desktop only), turning red on hover/drag
• Scrollbars: Both the sidebar and main content area display a thin (4px) red scrollbar that is hidden by default and only appears when the container is hovered. Works in WebKit browsers and Firefox
• Right column: Wrapped <main> in a new flex flex-col flex-1 min-h-0 div so the right side fills the full remaining height
• Footer: Moved inside <main> as the last element, so it scrolls with the PR list content and is only visible when the user scrolls to the bottom of the right column
• Sticky table header: Added sticky top-0 z-10 to the <thead> element so the column headers remain visible at the top of the right panel as the user scrolls through the PR list

The resulting layout:

body (h-screen, flex-col)
  header (sticky, full width)
  div (flex-row, flex-1, min-h-0)
    aside (resizable, md:overflow-y-auto)  ← full height, scrollable repo list
    resize-handle                          ← drag to adjust sidebar width
    div (flex-col, flex-1, min-h-0)        ← right column, full height
      main (flex-1, overflow-y-auto)       ← scrollable PR content + footer at end
        thead (sticky top-0)               ← column headers stay visible while scrolling

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	blt-leaf	eab99de	Commit Preview URL Branch Preview URL	Mar 01 2026, 10:59 PM

[DonnieBLT]

@copilot it doesn't seem to work the list still goes past the table and not fixed to the left with a scroll please fix

[Copilot]

@copilot it doesn't seem to work the list still goes past the table and not fixed to the left with a scroll please fix

The previous fix was incomplete — overflow-y-auto on the aside only scrolls when the element has a height ceiling to overflow against, but the body used min-h-screen which lets the page grow unboundedly so there was never a ceiling.

Fixed in commit 7f1ec15 by changing the body from min-h-screen to h-screen overflow-hidden. Now the body is exactly viewport-height, the flex container below the header takes the remaining height, and the sidebar scrolls independently within that — the same way <main> already does.

[DonnieBLT]

@copilot this looks good however I'd like the right side to scroll all the way down so have the left sidebar take up the whole height of the page and the right side to take up the whole hight of the page too attach the footer to the right side

[Copilot]

@copilot this looks good however I'd like the right side to scroll all the way down so have the left sidebar take up the whole height of the page and the right side to take up the whole hight of the p...

Done in commit b23da1a. The footer has been moved inside a new right-column flex wrapper that wraps <main> + <footer>. The resulting layout is:

• Left sidebar (aside) — full viewport height, scrolls independently when the repo list is long
• Right column (div flex-col flex-1) — full viewport height, divided into:
  • <main flex-1 overflow-y-auto> — scrollable PR content area
  • <footer> — pinned to the bottom of the right column

The sidebar no longer overlaps or spills past the content, and the footer stays attached to the right side rather than spanning the full page width at the bottom.

[DonnieBLT]

@copilot make the footer on the right not be sticky so it's only seen when we scroll the right all the way down

[Copilot]

@copilot make the footer on the right not be sticky so it's only seen when we scroll the right all the way down

Done in commit 2b2fa13. The footer is now inside <main> as the last scrollable element, so it only appears when you scroll the right column all the way down — it is no longer pinned to the bottom of the viewport.

[Copilot]

Pull request overview

This pull request restructures the page layout to create a full-viewport-height application with independently scrollable regions. The changes transform the traditional document-style layout into a modern application layout where the left sidebar and right content area each fill the full viewport height and scroll independently.

Changes:

• Modified body element to use fixed viewport height (h-screen) instead of minimum height, with overflow-hidden to create distinct scrollable regions
• Added independent scrolling to the sidebar on desktop viewports for long repository lists
• Relocated footer from page-bottom to right-column-bottom by wrapping main and footer in a new flex container

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The indentation is inconsistent for the wrapper div and its children. The main element (line 508) and footer element (line 540) should be indented more than their parent div element (line 507), as they are child elements. While this doesn't affect functionality, consistent indentation improves code readability and maintainability.

[DonnieBLT]

@copilot make the scrollbar adjustable horizontally and have it start out at a fixed with that works for the repo cards also style the scroll to be hidden unless scrolling and have it be a thin red bar

[Copilot]

@copilot make the scrollbar adjustable horizontally and have it start out at a fixed with that works for the repo cards also style the scroll to be hidden unless scrolling and have i...

Done in commit 2676175:

• Resizable sidebar: a 5px drag handle sits between the sidebar and the main content. Drag it left/right to resize the sidebar between 160px and 640px. The width defaults to 288px and is saved in localStorage so it persists across page loads.
• Thin red scrollbar: both the sidebar and main content area now show a 4px red (#E10000) scrollbar only when the container is hovered — invisible at rest. Scrollbar darkens to #BC0000 when the thumb itself is hovered.

[DonnieBLT]

@copilot also make the header for the table right above the buttons sticky when you scroll down on the right side

[Copilot]

@copilot also make the header for the table right above the buttons sticky when you scroll down on the right side

Done in commit 89eab47. Added sticky top-0 z-10 to the <thead> and made its dark-mode background solid (was semi-transparent) so rows don't bleed through as you scroll. The column header row now stays fixed at the top of the right panel while the PR rows scroll beneath it.

[Tejas-Ladhani]

solves #291