github-optimized-layout.user.css

/* ==UserStyle==
@name           Github Optimized Layout
@version        1.0.5
@namespace      github.com/marslo
@description    Optimized layout for github.com and gist.github.com, with a max width of 85vw and full-width diffs/commits. Also includes some minor component fixes for PR lists and merge boxes. Based on the "Github Full Width" style by user 1j01, but with a more targeted approach to avoid breaking pages that rely on the default 100% width (like Actions and Security). The style uses a combination of root-level variables for easy customization and specific selectors to ensure it only affects the intended layout containers. The goal is to provide a more comfortable reading experience without sacrificing functionality or breaking any pages.
@author         marslo
@homepageURL    https://github.com/marslo/github-optimized-layout
@updateURL      https://github.com/marslo/github-optimized-layout/raw/main/github-optimized-layout.user.css
==/UserStyle== */

@-moz-document domain("github.com") {

  /**
   * github.com / gist.github.com
  **/

  /* ╔════════════════════════════════════════════════════════════╗ */
  /* ║                   GITHUB OPTIMIZED LAYOUT                  ║ */
  /* ╚════════════════════════════════════════════════════════════╝ */

  /* centralized management */
  :root {
    --gh-custom-width: min(85vw, 100%);
    --gh-min-width: 900px;
  }

  /* ── 1. Basic layouts: Set the 85vw limit by default ─────────── */
  [class*="PageLayoutRoot"],
  [class*="ContentWrapper-module__contentContainer"],
  .container-xl,
  .container-lg,
  .js-check-all-container.container-xl,
  #gist-pjax-container .container-xl,
  .container-lg:has(.gist-content),
  /* Issue create pane (no PageLayoutRoot, previously relied on turbo-frame cap) */
  [class*="IssueCreatePage-module__createPane"],
  [class*="IssueCreatePage-module__createPaneContainer"],
  [class*="IssueCreatePane-module__createPane"],
  [class*="IssueCreatePane-module__createPaneContainer"] {
    max-width: var(--gh-custom-width) !important;
    min-width: var(--gh-min-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── 2. Force FULL WIDTH for Detail Pages (Diffs/Commits/Code) ─ */
  [class*="PageLayoutRoot"]:has([id^="diff-"]),
  [class*="PageLayoutRoot"]:has([data-testid="commit-header"]),
  [class*="PageLayoutRoot"]:has([class*="CommitHeader-module"]),
  react-app[app-name="commit"] [class*="PageLayoutRoot"],
  /* PR Checks: diff-comparison-viewer-container wraps PageLayoutRoot (not inside it) */
  #diff-comparison-viewer-container [class*="PageLayoutRoot"],
  [class*="DiffComparisonViewer-module"] [class*="PageLayoutRoot"],
  /* Repository file browser (tree & blob view) */
  [class*="PageLayoutRoot"]:has([class*="ReposFileTree"]),
  /* github actions */
  body:has(#actions-tab[aria-current="page"]) .container-xl,
  body:has(#actions-tab[aria-current="page"]) .container-lg,
  .container-xl:has(split-page-layout),
  .container-xl:has([data-url*="/actions/runs/"]),
  /* identity full-width React page automatically - i.e.: Models Tab */
  body:not(:has(react-app[app-name="code-view"])) [class*="PageLayoutRoot"]:not([class*="ThreePanesLayout"]):has([data-width="full"]) {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ── 3. Inner containers: Stretch to fill the parent ─────────── */
  [class*="PageLayoutRoot"] .container-lg,
  [class*="PageLayoutRoot"] .container-xl,
  [class*="PageLayoutRoot"] [class*="PageLayout-"]:not([class*="Pane"]),
  [class*="PageLayoutRoot"] [class*="PageLayoutWrapper"],
  [class*="PageLayoutRoot"] [class*="ThreePanesLayout"],
  [class*="PageLayoutRoot"] [data-width="large"],
  [class*="PageLayoutRoot"] [data-width="xlarge"],
  [class*="PageLayoutRoot"] [data-width="full"],
  [class*="Layout-main-centered"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* deep-dive structure fixes */
  :is([class*="IssueCreatePage-module"], [class*="IssueCreatePane-module"], [class*="ThreePanesLayout"]) > div {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* PR Conversation specific fix */
  [class*="Conversations-module__wrapper"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ── 4. Settings & Centered Layout ───────────────────────────── */
  [class*="Layout-main-centered"] [class*="container-"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ── 5. Component fine-tuning ────────────────────────────────── */
  /* PR list metadata line layout fix */
  .js-check-all-container div[style*="word-break: break-all"] {
    word-break: normal !important;
    flex-wrap: nowrap !important;
    /* ensure that text, labels, and branch names are vertically aligned. */
    align-items: center !important;
  }
  .js-check-all-container .opened-by {
    flex: 0 1 auto !important;
    /* allow it to be compressed to a size smaller than the content width */
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    /* show as ... when overflow */
    text-overflow: ellipsis !important;
  }
  /* prevent subsequent sibling nodes (review required, update time, branch name) being squeezed or forced to wrap to a newline */
  .js-check-all-container div[style*="word-break: break-all"] > *:not(.opened-by) {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* PR merge input box width */
  [class*="MergeBox-module"] :is(span[class*="TextInputWrapper"], input[class*="Input"]) {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Copilot / Releases / Gist Sidebars */
  [class*="__markersWrapper__"], [class*="AutomatedReviewDiffEntry"] { max-width: 45vw !important; width: 45vw !important; }
  .col-md-2.flex-md-column { flex: 0 0 auto !important; max-width: 200px !important; }
  .gistsearch-aside, #gist-pjax-container .h-card { flex: 0 0 300px !important; max-width: 300px !important; }
  .container-xl .col-3:has(experimental-action-list) { flex: 0 0 auto !important; max-width: 300px !important; }

  /* ── 6. Accessibility ────────────────────────────────────────── */
  [class*="rgh-"] .flash.flash-error { display: none !important; }
  /* Hide RGH whitespace markers on non-diff pages */
  /* csslint ignore:start */
  body:not(:has(#diff-comparison-viewer-container)) [data-rgh-whitespace="space"] { background-image: none !important; }
  /* csslint ignore:end */

  /* ── 7. Contribution Calendar ─────────────── */
  .activity-listing,
  .ContributionCalendar .graph-canvas,
  .ContributionCalendar .graph-canvas > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* auto layout */
  table.ContributionCalendar-grid.js-calendar-graph-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    table-layout: auto !important;
  }
  /* protect the left label column -  weekday labels */
  table.ContributionCalendar-grid td.ContributionCalendar-label,
  table.ContributionCalendar-grid thead td:first-child {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    white-space: nowrap !important;
  }
  /* extremely brute-force "maximum" scale-up hack */
  /* exact average - set a maximum and equal absolute value for all cells (200px). The cell will be forced to shrink proportionally because of the outer layer is 100% locked */
  table.ContributionCalendar-grid td.ContributionCalendar-day {
    width: 200px !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 11px !important;
    aspect-ratio: auto !important;
    border-radius: 3px !important;
  }
  /* lock row height to maintain the visual layout of the blocks */
  table.ContributionCalendar-grid tbody tr {
    height: 11px !important;
  }
  table.ContributionCalendar-grid thead tr {
    height: 15px !important;
  }

} /* @-moz-document: github.com */