(GitHub Toggle Code Wrap) Inline file action button and context-menu cut

[jerone]

The inline file action button and context-menu is cut:

Correct (with "GitHub Toggle Code Wrap" disabled):

See it in action here:
https://github.com/StylishThemes/GitHub-Dark-Script/blob/master/github-script-code-wrap.user.js#L203

That is also the offending line of code, causing this issue.

[Mottie]

Hi @jerone!

Hmm, yeah that's going to be a difficult fix. The file action button and the code table are siblings. If we add the following to remove the overflow setting on the wrapper:

.ghd-code-wrapper {
  overflow: unset !important;
}
.ghd-wrap-table {
  overflow-x: auto !important;
}

It looks okay until you toggle the wrap

Another alternative would be to move the block to the right, but then it overlaps the line number.

.BlobToolbar {
  left: 2px !important;
}

What do you think? cc: @silverwind @the-j0k3r

[jerone]

And what if you add the position: relative and overflow to the table sibling...

[Mottie]

Adding overflow to the table or sibling won't work. Only a parent of the table.

The easiest solution, which is what I went with, was to move the <details> menu up one level in the DOM.

[jerone]

Hi @Mottie,

The solution makes the menu visible again. But it has a side-effect, menu and selected lines are not aligned anymore:

Test with wrapping on: https://github.com/StylishThemes/GitHub-Dark-Script/blob/master/github-script-code-wrap.user.js#L203

[Mottie]

Hmm, I included CSS to move the menu down. Is the ghd-menu class not applied?

[jerone]

It is: margin-top: 45px;. Maybe it's related to GitHub Refined. Let me test.

[jerone]

It's not GitHub Refined or any other UserScript.

When wrapping is disabled the button aligns perfect. But when when wrapping is enabled, then the offset happens.

It's exactly off by the 2 lines above where wrapping happened.

[Mottie]

Hmm, I can't reproduce that. I usually keep the wrapping enabled so it was aligned while I was testing. I just set the default to be disabled and the menu stayed on the correct line.

[Mottie]

The margin-top: 45px definition doesn't include an !important flag. Could that be the issue?

[jerone]

@Mottie commented on Jul 7, 2019, 2:06 PM GMT+2:

The margin-top: 45px definition doesn't include an !important flag. Could that be the issue?

No, just tried.

Maybe you missed my edit:

It's exactly off by the 2 lines above where wrapping happened.

[Mottie]

Ahh, ok I see it now... when you select a line that wraps, it aligns properly. If a non-wrapping line is selected, then the menu appears 2 lines above.

[jerone]

I can reproduce it also the otherway around:

1. Go to https://github.com/StylishThemes/GitHub-Dark-Script/blob/master/github-script-code-wrap.user.js
2. Select line 36
3. Menu is perfectly aligned.
4. Toggle wrapping (doesn't matter which state).
5. See the menu being one line above or below (depending on the wrapping state).

[Mottie]

Ugh. GitHub's code positions that menu by setting a top value on the menu, so now that I've moved it, it doesn't stay lined up. I don't know if there is a better solution. I'm gonna come back to this later... maybe after getting some caffeine in me.

[jerone]

I'm gonna come back to this later... maybe after getting some caffeine in me.

:)

Otherwise your other solution will do with some more padding to the line-numbers:

Another alternative would be to move the block to the right...