repo-header-info - Fix site header overlap#9489
Conversation
|
I don't understand how this fixes the overlap. And it doesn't seem like it does? 
|
GitHub calculates the width of the repo name at load time. This makes it look like the repo name is longer than it really is. Then when our feature is appended, we already have the reserved space for it.
I posted a gif in the issue and screenshots here, so it most definitely does, unless I broke something at the last push. As mentioned |
| > a[class*='prc-Breadcrumbs-Item']:not(.rgh-repo-header-info-updated) { | ||
| /* Matches the `isSmallDevice` JS check */ | ||
| @media (min-width: 500px) { | ||
| padding-right: 4em; |
There was a problem hiding this comment.
The feature stays disabled on small devices because there just isn't any space for it.
| @@ -1,3 +1,5 @@ | |||
| import './repo-header-info.css'; | |||
There was a problem hiding this comment.
The PR only covers this feature. A minor overlap is still seen with the site logo due to repo-avatars
|
Yes, it most definitely still works, especially after disabling
|
|
The race condition of 
|
| > a[class*='prc-Breadcrumbs-Item']:not(.rgh-repo-header-info-updated) { | ||
| /* Matches the `isSmallDevice` JS check */ | ||
| @media (min-width: 500px) { | ||
| padding-right: 4em; |
There was a problem hiding this comment.
Fixing the combined overlap of ci-link and repo-header-info will require some coordination between the two features, for example a shared selector that adds padding-right: calc(var(--rgh-repo-header-info-width) + var(--rgh-ci-link-width)) and just toggling these values as each feature loads. Very messy though
|
Code-wise it's pretty straightforward. The selector comes straight from the feature (unfortunately so long). Merging, but it won't close the issue yet |
Test URLs
Here
Before
After