Fixing the GitHub gist CSS so the editor uses more than 25% of my screen estate
Posted by jpluimers on 2024/06/05
Two years ago I asked [Wayback/Archive] Jeroen Wiert Pluimers on Twitter: “Is there a way to make the @github gist text editor wider and taller? Right now (at 1920×1200) it uses about half the screen width and screen height. That wastes about 25% of screen estate. “.
I still have to figure out how to fix the height, but the width was relatively easy back then. Hopefully this CSS fix still works today.
In the mean time [Wayback/Archive] Add full height gist creation by xthexder · Pull Request #68 · xthexder/wide-github: Conversation permanently fixed my problem.
[Wayback/Archive] Jeroen Wiert Pluimers on Twitter: “I fixed the width by modifying .container-lg and changing max-width from 1018px to 95%.”
Until GitHub fixes it themselves, I started with this fix in the extension [Wayback/Archive] Stylus – Chrome Web Store:
.container-lg { max-width: 100%; }
Or in Mozilla format (not sure yet what that means):
@-moz-document url-prefix("https://gist.github.com/") { .container-lg { max-width: 100%; } }
Searching for [Wayback/Archive] “.container-lg” – Google Search, I figured out that GitHub uses Bootstrap.
[Wayback/Archive] Layout: Overview · Bootstrap indicates I’m in the right direction fiddling with max-width, but it nowhere mentions fiddling with height. That’s too bad as that is needed too.
[Wayback/Archive] “.container-lg” gist – Recherche Google made me find the below links and found out the bottom pull request indeed fixed the height when embedding it in Stylus. I loved the quick response on my raised issue.
- [Wayback/Archive] wide-github-refined.css
- [Wayback/Archive] Edit Wide GitHub | OpenUserJS
- [Wayback/Archive] xthexder/wide-github: Change all github repository pages to be full width and dynamically sized.
- [Wayback/Archive] Apart from making github (and gists) wide, can it also be made tall? · Issue #67 · xthexder/wide-github
- [Wayback/Archive] Add full height gist creation by xthexder · Pull Request #68 · xthexder/wide-github: Conversation
- [Wayback/Archive] Add full height gist creation by xthexder · Pull Request #68 · xthexder/wide-github: Commits
The really cool thing is that Stylus will open and load the script from https://raw.githubusercontent.com/xthexder/wide-github/master/build/wide-github.user.css automagically. That made installing it a breeze.
–jeroen
The Wiert Corner - irregular stream of stuff 
Leave a comment