Markdown Code Blocks - Graph becomes misaligned with commits

[eladavron]

It's hard to explain in words, just see the screenshots below.
This only started recently (or maybe I didn't notice it before, which seems unlikely).
The lower you go on the graph, the farther apart the dots and their corresponding lines are.

I've attempted to change my screen's DPI and the apps' zoom levels - nothing seems to solve it, at any scale, it always remains unaligned.

Environment

• Git Graph Extension Version: 1.29.0
• Visual Studio Code Version: 1,54,3
• Operating System: Windows 10

Screenshots

I've blurred out the text because it contains proprietary information, but you can tell it's not aligned with the dots (I've even highlighted a row so you can see it more clearly)

[mhutchie]

Hi @eladavron,

This is quite unusual, no one else had reported this!

The commits themselves are rendered in a table, and the graph is rendered such that the commits should align with the table rows. In order to do this, the vertical separation between commit dots is calculated by dividing the total height of the table by the number of commits. After experimenting with a variety of options, this approach proved to be the most reliable (and handles monitor DPI & Visual Studio Code zooming well), although it does make the assumption that all commit table rows are the same height (which should be true).

It's hard to tell due to the blurring, but it seems as though not all commit table rows are the same height. After some experimentation of my own, it appears like rows with commit messages that contain code blocks are taller than other rows. This slight inconsistency in commit table row height could definitely accumulate and cause the graph to not be aligned with commits. Can you try disabling git-graph.markdown, to see if the code blocks are causing the misalignment for you? (they are in a test repo for me)

This wasn't a problem historically, so I suspect this has come from a style change to code block's in a recent version of Visual Studio Code / Electron / Chromium.

[eladavron]

Thanks for the quick response.
I had the suspicion this was because of my pet peeve of using markdown in commit messages, but didn't know you could disable it in Git Graph.
Once I set "git-graph.markdown": false everything aligns again, so it's definitely because of that, good catch!
Looking forward for a possible fix :-)
Thanks!

[mhutchie]

I've worked out a one-line style change on code blocks to prevent them from impacting the commit table row height, however I'll need to test it on multiple platforms to ensure the style change doesn't cause any other issues. Even just in testing the current behaviour on Windows vs Mac, on Windows the height inconsistency is twice as much as it is on Mac's.

I'll see how I go with testing it, either it will be in a beta release in the next day or two, or I might just leave it for the Git Graph 1.30.0 release this Friday (as it's so close).

---

In the meantime, if you're another user who is affected by this, please just disable Markdown formatting until the fix is released.

[mhutchie]

This fix will be included in v1.30.0.

Would you please download & install v1.30.0-beta.4, add check to confirm that the Markdown inline code blocks no longer cause the graph to become misaligned with the commits. The change has fixed it for me, but it would be great if you can confirm it as well.

The "Manual Installation" instructions provided here outline the process to manually install a beta release.

[eladavron]

Can confirm the issue is fixed in the beta.
Thanks for quick turnaround!