menu

Questions & Answers

Github Code Review - Full Screen Width

Can anyone tell me how to tell Github, that I want to see code reviews on Pull Requests in full screen width. Code lines are often longer than the area provided by Github and there is a lot of unused screen real estate.

Is there a setting in Github or a Chrome extension or Tamper Monkey or something like that.

Comments:
2023-01-25 00:20:05
fwiw: Appears to me the current width is 127.
Answers(5) :

This is no longer an issue after GitHub introduced side-by-side code review. That really works well.

Comments:
2023-01-25 00:20:05
please read question first. He is not asking about side-by-side view. He is asking how to use smartly the white space wasted because the code section covers just about 80% of screen width. User has to scroll to much
2023-01-25 00:20:05
I am the one who asked the question... and have clarified that it is no longer an issue. So I did read the question ;-)
2023-01-25 00:20:05
Sorry, got it. But side-by-side compare takes 100% of screen width, that is true. But non side-by-side does not; therefore, lots of code is still cut off and you have to scroll to the right to see during PR. Is there a way to set non-side-by-side view to take 100%? No suggestion above worked
2023-01-25 00:20:05
It's astonishing that full-width isn't default on the most popular code repo service! It can't be that hard to change this, can it? Btw above Stylebot doesn't work for me (or doesn't work on our GHE).

Use Stylebot chrome extension

https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en

I use my own style for my favourite websites, I love it.

Plus point is that you can use the styles created by other peoples also. Someone might have already done the things you need there. Or else you can modify on your own.

I have few CSS rules for you,

.repository-with-sidebar .repository-content {
  width: calc(100% - 50px);
}

.container {
  width: 90%;
}
Comments:
2023-01-25 00:20:06
It took no time to find a css stylesheet using their social sharing feature.
2023-01-25 00:20:06
stylebot is not opening for few pages, but the good thing is you can add the above style with url pattern and it rocks.
2023-01-25 00:20:06
what will be the URL pattern for this link (github.com/jquery/jquery/pull/3505/files)
2023-01-25 00:20:06
Any other suggestions now that it looks like StyleBot is dead?
2023-01-25 00:20:06
2023-01-25 00:20:06
For Chrome, the "Wide Github" extension seems to work fine: chrome.google.com/webstore/detail/wide-github/…

Don't know why the OP said it's not a problem anymore, if you're doing a code review of your own work you won't be comparing it against another in side-by-side view.

Fix for full screen:

  • Inspect element on the white space to the left of the code
  • You'll be brought to a tag, expand this
  • Click on the 3rd div child of 'main'
  • Scroll down through the css on the right hand side until you find ".container-xl"
  • Untick this and you'll get the code full screen

If you want to you can write a console script or use one of the plugins mentions above but I find this method the simplest to remember and apply on anyones machine.

Comments:
2023-01-25 00:20:06
A little out of date with GitHub's latest html, but close enough to get us there. Many thanks!

There's a class on the body called full-width for that, so all that's needed currently is:

document.body.classList.add('full-width');

This can also be added as a bookmarklet:

 javascript:(function(){document.body.classList.add('full-width');})();
Comments:
2023-01-25 00:20:06
This works perfectly. I use this as a browser shortcut, which allows to alternate between default and fullscreen view: javascript:(function(){document.body.classList.toggle('full-‌​width');})();
2023-01-25 00:20:06
@BenediktGansinger Added your comment as part of the answer.

Github's CSS has changed, so the new styles should be:

.container-lg {
  max-width: inherit;
}

You can create a shortcut in your browser to automatically apply this style:

javascript:(function(){var a=document.getElementsByClassName("container-lg")[0];a.style.max-width="inherit";})();