Fixed header overlapping when opening links for code specific lines

[jetersen]

The header has starting overlapping code changes when opening links.
https://github.com/casz/fastlane/blob/9b7ebab16ebbace1178fc6f6d1f1b232372e5419/fastlane/lib/fastlane/actions/set_info_plist_map.rb#L12-L15

With fixed header on

With fixed header off

Don't recall it being a issue, hence this issue was created.

[Mottie]

Hi @Casz!

Please make sure you have v1.1.15 of the style installed. The current version doesn't have this issue, so I would have to guess you might still be using Stylish because it hasn't been updating styles properly. I would recommend you switch to Stylus.

[jetersen]

Before reporting I verified it was updated, already using Stylus

/*! Github Fixed Header Theme v1.1.15 (9/2/2017) *//*
 * https://github.com/StylishThemes/GitHub-FixedHeader
 * https://userstyles.org/styles/124438
 * License: https://creativecommons.org/licenses/by-sa/4.0/
 */

Google Chrome is up to date
Version 61.0.3163.100 (Official Build) (64-bit)

[jetersen]

Perhaps it's combination of refined github and fixed header?

[Mottie]

Oh wait, you're right... I misunderstood you. I'll have to take a closer look later tonight.

[jetersen]

Updated screenshots to show it better 👍

Must be a change Github made, I recall they opened all links with few lines above the specific code line that was referenced on the link.

[Mottie]

Hmm, well it looks like GitHub looks for at the hash #L12-L15, then looks for the table cell that has an id of "LC12" (in this case) and then uses scrollIntoView to set the top.

<tr>
  <td id="L12" class="blob-num js-line-number" data-line-number="12"></td>
  <td id="LC12" class="blob-code blob-code-inner js-file-line highlighted">...</td>
</tr>

I've tried various (CSS only) methods to get it to move, but nothing is working so far 😿

• Reposition code cell pseudo element

  .blob-code-inner:after {
    content: " ";
    position: absolute !important;
    top: -60px !important;
    left: 0 !important;
    pointer-events: none;
  }

• Tweak code cell pseudo element (moves copy button up)

  .blob-code-inner:after {
    content: " ";
    position: absolute !important;
    padding-top: 60px !important;
    margin-top: -60px !important;
    pointer-events: none;
  }

• Last resort: tweak line numbers

  .blob-num:after {
    content: " ";
    display: inline-block !important;
    position: relative !important;
    padding-top: 60px !important;
    margin-top: -60px !important;
    width: 1px !important;
  }

I think this one is going to require a javascript solution; otherwise I'm out of ideas. Any thoughts @silverwind?

[jetersen]

@Mottie seems you fixed it? At least I seen something make it jump back up :)

Easiest to see with one line links: https://github.com/casz/fastlane/blob/9b7ebab16ebbace1178fc6f6d1f1b232372e5419/fastlane/lib/fastlane/actions/set_info_plist_map.rb#L12

[quantumpacket]

Hmm, still not working for me with v1.2.0, it's still overlapping the specified line number.

[Mottie]

It hasn't been fixed.

If you click on a line to select it, the line jumps to the top, but under the fixed header! 🎉

But, if you click a link, like the one @Casz shared, the selected line will be under the fixed header. 😿

[Mottie]

You'll also notice that if you toggle the code wrap (via userscript), the selected line button position won't be accurate any more. Also, I thought I fixed the selected line button so it was no longer being half hidden... I'll look again when I have time.

Anyway, go to https://github.com/StylishThemes/GitHub-Dark/blob/master/github-dark.user.css#L13 and you'll see the selected line (under the fixed header) button position move from line 13 to 27 if you click the toggle code button added by either GitHub Dark script or the Code wrap toggle userscript.

[jetersen]

Well for me it lands on line 10 being out of view while 12 is definitely in view.... I don't what Voodoo is doing it :) However it actually lands on 12 being out of view but then very rapidly it scrolls into view once again.

[the-j0k3r]

This is same issue as StylishThemes/GitHub-Dark#598 Back when we had this fixed header portion built into GHD. Thankfully its gone now.

In short, We never managed to get an acceptable solution that works in most usual circumstances and its was like a wack a mole game, So I dont thinks its possible anyway to fix related issue fully after many hours of banging head on this and trying all sorts, I thought Id share with you guys, =) good luck though.