GitHub's views are too narrow -- here's how to fix it

"container-lg" and "container-xl" are not my friends

·

3 min read

As a technical lead, I frequently review and approve pull requests, so I spend a lot of my time working with the GitHub interface. For the most part, I really like the way that the code review process works in GitHub, but there's one issue that I find quite annoying, and it eventually bothered me enough that I decided to try to find a solution. It's not perfect, but it's still a big improvement for me, and I hope to improve it in the near future.

The problem that I encounter most of the time when I review code is that the GitHub interface isn't wide enough to take advantage of the horizontal space that is available on most displays, which means that I have to scroll horizontally to see all of the code that is in the file that I'm viewing:

Wasted horizontal space in GitHub file view

All of the blank space that is indicated by the black arrows on each side of the main view could be used to display the code that is instead wrapped to the next line

Users hate horizontal scrolling, and horizontal scrolling makes it more difficult to understand the code that I'm reading because I have to keep scrolling back and forth horizontally to see everything.

One day, I'd finally had enough of it, and opened the Chrome Dev Tools to see if I could figure out what was causing the wide margins, and find a way to disable it. About twenty minutes later, I had identified the problem and found a way to fix it, at least temporarily.

Chrome Dev Tools showing div element with container-xl class

The div element highlighted in grey has the "container-xl" class assigned to it, which is the reason why the window has so much wasted space on the sides:

container-xl declaration

In the version of GitHub Enterprise that I use in my day job, the div instead has the "container-lg" class assigned to it, which makes the wasted space even larger. If you instead see a div element with the "container-lg" class assigned to it instead of "container-xl", simply follow the same steps for "container-lg" instead.

The max-width declaration of the container-xl class imposes an arbitrary limit of 1280 pixels for the width of the code container. Conveniently, though, there's a checkbox next to it that can be unchecked to disable the use of this declaration!

container-xl with max-width disabled

With the container-xl declaration disabled, the code view window takes up almost all of the horizontal space on the screen. Much better!

GitHub file view without wasted horizontal space

It's still on my to-do list to write a browser extension to automate this process so that I don't have to use the developer tools every time I want to do a code review, so perhaps that will be the subject of a future post.

Thanks for reading!