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

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.

Jul 06 '19 11:07 jerone

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

Jul 06 '19 14:07 Mottie

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

Jul 07 '19 10:07 jerone

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.

Jul 07 '19 11:07 Mottie

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

Jul 07 '19 11:07 jerone

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

Jul 07 '19 11:07 Mottie

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

Jul 07 '19 11:07 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.

Jul 07 '19 12:07 jerone

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.

Jul 07 '19 12:07 Mottie

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

Jul 07 '19 12:07 Mottie

@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.

Jul 07 '19 12:07 jerone

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.

Jul 07 '19 12:07 Mottie

I can reproduce it also the otherway around:

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

Jul 07 '19 12:07 jerone

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.

Jul 07 '19 12:07 Mottie

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...

Jul 07 '19 12:07 jerone