← All posts

Tutorials

GitHub and developer site tweaks with JustZix

17 May 2026 · by JustZix Team

If you read code all day, GitHub\'s default layout wastes space: narrow diff columns, file headers that scroll away, sidebars you never use. JustZix rules scoped to github.com let you tune the reading experience without browser flags or extensions you cannot audit.

Use the full window width

GitHub caps content width on many pages. On a wide monitor that leaves huge empty margins around a thin column of code. Create a CSS rule matching *://github.com/* and reclaim the space.

/* Let repo and code pages span the viewport */
.container-xl,
.container-lg,
.repository-content {
  max-width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

This is a layout-only change. Nothing about navigation or functionality moves — you simply stop staring at empty gutters.

Pin the file header while you scroll

When you scroll through a long file, the header with the filename, blame and raw links disappears. A sticky header keeps your context. GitHub already marks the file action bar, so you only need positioning.

/* Keep the file action bar visible */
.file-header,
.react-blob-header-edit-and-raw-actions {
  position: sticky !important;
  top: 0;
  z-index: 20;
  background: var(--bgColor-default, #fff) !important;
}

On the diff view, the same idea pins each file\'s header so you always know which file a hunk belongs to:

/* Sticky per-file headers in pull request diffs */
.file.js-file .file-header {
  position: sticky !important;
  top: 0;
  z-index: 5;
}

Bigger, more readable code

Default code font size is fine for skimming, less so for review. Bump it and tighten line height in one rule.

/* Comfortable code typography */
.blob-code-inner,
.react-code-text,
.CodeMirror,
pre code {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

Pick a size that suits your display. Because the rule is scoped to GitHub, it never touches code blocks on other sites.

Hide what you do not use

Many GitHub panels are pure noise for day-to-day work — the "Used by" badge, sponsor buttons, the activity feed on your dashboard. Trim them.

/* Repo sidebar clutter */
.BorderGrid-cell:has(a[href$="/network/dependents"]),
.js-sponsors-button,
.flash-warn.flash-full { display: none !important; }

Adjust the list to taste — every line is independent, so removing one selector only un-hides that panel.

Jump to the diff with one keypress

A small JavaScript rule can add a shortcut. Scope a JS rule to *://github.com/*/pull/* and press d to scroll straight to the "Files changed" tab.

document.addEventListener('keydown', (e) => {
  // Ignore typing in inputs and textareas.
  const tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) {
    return;
  }
  if (e.key === 'd') {
    const filesTab = document.querySelector('a[href$="/files"]');
    if (filesTab) filesTab.click();
  }
});

It only reads key events and clicks an existing link — no network requests, nothing written anywhere. Pure convenience.

Build your own dev profile

The same approach works on GitLab, MDN, Stack Overflow or any docs site: scope a CSS rule to the domain, widen the content, fix the typography, hide the chrome. Keep each site\'s rules separate so a redesign on one never breaks another.

Find more developer-focused recipes in our ready-made examples, and if you are coming from a userscript manager, read migrating from Tampermonkey to JustZix. Ready to start? Download JustZix and paste the full-width rule first.