github-optimized-layout.user.css

/* ==UserStyle==
@name           Github Optimized Layout
@version        1.1.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"],
  /* hashed css-module names ( `createPane__*` / `createPaneContainer__*`, GitHub caps the container at 1280px ) */
  [class*="createPane__"],
  [class*="createPaneContainer__"],
  [class*="PageLayoutRoot"]:has([data-testid="commit-header"]),
  react-app[app-name="commit"] [class*="PageLayoutRoot"],
  react-app[app-name="branches"] [class*="PageLayoutRoot"],
  [class*="PageLayoutRoot"]:has([data-testid="branches-page"]) {
    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/Code) ─ */
  /* Diff */
  [class*="PageLayoutRoot"]:has([id^="diff-"]),
  /* PR Checks */
  #diff-comparison-viewer-container [class*="PageLayoutRoot"],
  [class*="DiffComparisonViewer-module"] [class*="PageLayoutRoot"],
  /* Repository file browser (tree & blob view): file tree expanded ( `#repos-file-tree` ) or collapsed ( `expand-file-tree-button` ), breadcrumbs; repo overview shares `react-app[app-name="code-view"]`, so excluded via `.overview-ref-selector` */
  [class*="PageLayoutRoot"]:has(#repos-file-tree, [data-testid="expand-file-tree-button"], [data-testid="breadcrumbs"]):not(:has(.overview-ref-selector)),
  /* 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: - includes: Models Tab, ...; - excludes: branches page ( url contains `/branches/` )/commit pages, repo overview ( `.overview-ref-selector` ) and issue detail ( `issue-header` ), both now rendered by `react-app[app-name="repo"]` */
  body:not(:has(react-app[app-name^="commit"])):not(:has(react-app[app-name="branches"])):not(:has(react-app[app-name="code-view"])) [class*="PageLayoutRoot"]:not([class*="ThreePanesLayout"]):not(:has(.overview-ref-selector, [data-testid="issue-header"])):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"]):not([class*="Sidebar"]),
  [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*="createPane__"], [class*="createPaneContainer__"], [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;
  }

  /* Issue detail content container ( hashed `contentContainer__*`, formerly `ContentWrapper-module__contentContainer` ) carries its own 1280px cap */
  [data-testid="issue-artifacts-panel-layout"] [class*="contentContainer__"] {
    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 */
  /* max-width overrides RGH suggest-commit-title-limit's `max-width: min-content` on the title wrapper span; without it the span collapses to ~content width once the input's 72ch is dropped to 100% */
  [class*="MergeBox-module"] :is(span[class*="TextInputWrapper"], input[class*="Input"]) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Issue detail header title width fix */
  /* (a) PageHeader grid pins the `title-area` column and lets the `actions` column absorb free space, so the title stays narrow while the page widens. reassign the flexible track to `title-area` (1fr) and shrink `actions` to content width. column order maps to grid-template-areas: leading-action breadcrumbs title-area trailing-action actions */
  [data-component="PageHeader"][class*="HeaderViewer-module__headerContainer"] {
    grid-template-columns: auto auto 1fr auto auto !important;
  }
  /* (b) the title h1 itself carries a fixed max-width that caps the visible text even after the column is widened. release it to fill the title-area */
  [data-component="PH_Title"][class*="HeaderViewer-module__PageHeader_Title"] {
    max-width: 100% !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;
  }

  /* ── 8. Branch List Selection ─────────────── */
  /* outer container: absolutely single row, horizontally arranged, vertically centered */
  button.overview-ref-selector [data-component="buttonContent"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important; /* uniform spacing */
    justify-content: flex-start !important;
  }
  /* the front and back icons (if present) are of fixed size, vertically centered, and do not stretch */
  button.overview-ref-selector [data-component="leadingVisual"],
  button.overview-ref-selector [data-component="trailingVisual"] {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    height: 100% !important;
  }
  /* remove unnecessary height and use flex to center all elements vertically to prevent ghost heights */
  button.overview-ref-selector [data-component="text"],
  button.overview-ref-selector [data-component="text"] > div,
  button.overview-ref-selector .ref-selector-button-text-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }
  /* don't hide the header (because it contains the icon), but flatten it and center it vertically */
  button.overview-ref-selector [class*="RefSelectorOverlayHeader"] {
    display: flex !important;
    align-items: center !important; /* force vertical centering within the Header */
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    line-height: normal !important;
  }
  /* make sure the icons in the header are also vertically centered. */
  button.overview-ref-selector [class*="RefSelectorOverlayHeader"] svg {
    display: block !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  /* ensure that the lowest-level text nodes are correctly punctuated. */
  button.overview-ref-selector .ref-selector-button-text-container span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    line-height: normal !important;
  }

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