There was nothing wrong with GitHub's UI before, it was probably the closest thing to "perfect" I'd ever encountered.
Alongside that incredibly irritating "navigate to code definition" popup, it feels GitHub has too many designers with too little to do, so they're desperately scrounging around for things to change to fill their day. Either that, or there's some monetization angle (ala the Reddit redesign) that we haven't seen yet.
It seems to me Github from the Microsoft acquisition is going into a wrong direction.
I'm talking about "natural" eye movement being a well-known design principle. This means that eyes very naturally follow a Z pattern that doesn't exceed the periphery of your focus. So if you load up a fresh page, your eyes will naturally look top left -> top right -> bottom left -> bottom right, bounded by your standard viewbox (which is about 800px-1200px wide at 96dpi and 1-2ft, the standard distance most people sit from their monitor). So you usually stick your most important information along that pattern. Anything outside this boundary requires an extra "look", which means a slight hesitation/delay on the part of the user. That's not to say the space is unusable, just that you put your most common/important features/information along this flow.
It's also not an ironclad rule, but it does work very well. When I went to the old GitHub, my eyes always followed the same pattern: repository name (top-left, to make sure I was on the right page), account (verifying that I'm logged in), branch, clone/download, then file list or more commonly, the README (bottom-left). It was a very quick, natural way to navigate a random GitHub page.
Now, I literally have to move my head to do this. The weighting also feels completely unbalanced, like there's too much information on the left it's all slanting in one direction.
This is the css I'm running now to fix this, as well as extend the width of the main content. The 1600px is such that when using i3 and having my browser be half the screen it consumes most of the screen space on my 4k monitor.
:root {
--width: 1600px;
}
.container-xl {
max-width: var(--width);
}
.pagehead {
padding-left: calc(50% - (var(--width) / 2));
padding-right: calc(50% - (var(--width) / 2));
} .col-md-9 {
width: 100%;
margin-top: 1em;
}
.col-md-3 {
width: 100% !important;
margin-bottom: 1em;
}
.flex-md-row {
flex-direction: column!important;
}
.flex-md-row {
flex-direction: column-reverse!important;
}
.BorderGrid--spacious .BorderGrid-cell {
padding-top: .2em;
padding-bottom: .2em;
}
div.BorderGrid.BorderGrid--spacious > div:not(:first-child) {
display: none;
}https://superuser.com/a/319322/1173126 (be sure to read the comments of that answer too, these days you need to switch a flag in Ff settings to enable this feature)
Some of us like to code with git / bitbucket / gitlab side by side with our IDE so we can reference existing issues more directly while writing code. Which reminds me I need a better screen resolution... 1080p is so 2016.
It's 30cm/1ft between the Issues button and the main table.
I hate that it centers it with giant gutters wasting over half the width of a 4K monitor, should I choose to maximize a browser window. I'd much rather see everything shifted to the left. I'd even be OK with some soft margin still causing regular README text to wrap at a typical width.
But, if there are long code or raw text lines, or any embedded image or markdown table or other structure that is inherently wide, I want it to overflow and use that extra screen space, not get clipped into this ridiculously narrow bowling lane. That's my instinctual desire and the only reason I would expand the browser to full screen, and it is an utter disappointment to try that and be told, "no space for you."
You really need CSS that accounts for resolution and pixel density these days.
I am not sure if they changed anything from how it was previously in the beta.
I don't think the new design is bad, it's just different. It's fine tbh, but these top bars are pretty bad on a big screen.
Hopefully they'll change that soon enough.
Honestly - pretty refreshing, designers typically forget to test on low end monitors - not high end ones!
Example: https://twitter.com/JahedDEV/status/1275532988772683776
I don't know why they think it's good design, it would be nice to know. All of their previews for it squash the window so it looks perfect, like their mockups I assume. Similarly, I have to have a dedicated, half-width window just for GitHub to workaround this.