☰

Resizable Diff Sidebar (GitHub PR Files)

Make GitHub PR diff sidebar resizable with a visible drag handle

// ==UserScript==
// @name         Resizable Diff Sidebar (GitHub PR Files)
// @namespace    http://tampermonkey.net/
// @version      1.3
// @icon         https://www.google.com/s2/favicons?sz=64&domain=github.com
// @description  Make GitHub PR diff sidebar resizable with a visible drag handle
// @author       Louis Yvelin
// @match        https://github.com/*/*/pull/*/files*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    const parent = document.querySelector("#diff-layout-component")
    const sidebar = document.querySelector("#diff-layout-component > div.Layout-sidebar.overflow-y-auto.hx_Layout--sidebar.diff-sidebar.position-sticky div")

    if (!parent || !sidebar) return

    const handle = document.createElement("div")
    handle.style.width = "5px"
    handle.style.cursor = "col-resize"
    handle.style.position = "absolute"
    handle.style.top = "0"
    handle.style.bottom = "0"
    handle.style.right = "0"
    handle.style.zIndex = "9999"
    handle.style.background = "rgba(0, 123, 255, 0)"
    handle.style.transition = "background 0.2s ease"

    sidebar.style.position = "relative"
    sidebar.appendChild(handle)

    sidebar.addEventListener("mouseenter", () => {
        if (!isDragging) handle.style.background = "rgba(0, 123, 255, 0.5)"
    })
    sidebar.addEventListener("mouseleave", () => {
        if (!isDragging) handle.style.background = "rgba(0, 123, 255, 0)"
    })

    let isDragging = false

    handle.addEventListener("mousedown", e => {
        e.preventDefault()
        isDragging = true
        document.body.style.userSelect = "none"
        handle.style.background = "rgba(0, 123, 255, 0.9)"
    })

    document.addEventListener("mousemove", e => {
        if (!isDragging) return
        const rect = parent.getBoundingClientRect()
        const newWidth = e.clientX - rect.left
        parent.style.setProperty("--Layout-sidebar-width", `${newWidth}px`)
    })

    document.addEventListener("mouseup", () => {
        if (isDragging) {
            isDragging = false
            document.body.style.userSelect = ""
            handle.style.background = "rgba(0, 123, 255, 0.5)"
        }
    })
})()