Skip to content

Last row line number overflows in diff2html diff blocks #3198

@ZhipengHe

Description

@ZhipengHe

Have you checked that your issue isn't already filed?

  • I read through FAQ and searched through the past issues, none of which addressed my issue.
  • Yes, I have checked that this issue isn't already filed.

Bug description

When using diff2html to generate diff blocks in posts, there's a visual issue where the last row line number overflows at the end of files. This creates a confusing display where the final line number extends beyond its intended container within the diff view.

How to reproduce the bug

This issue can be observed in practice at: https://alshedivat.github.io/al-folio/blog/2024/code-diff/#d2h-575068

In this live example, you can see an extra line number "183" appearing as an overflow element for scripts/hulk.js diff block, demonstrating the exact visual problem where line numbers duplicate or appear in unintended positions within the diff display. Multiple other examples of this overflow issue can be found throughout the same page in various diff blocks.

Image

Error messages and logs

Please see attached image above.

What operating system are you using?

Not applicable (e.g. you're using GitHub Pages or other hosting)

Where are you seeing the problem on?

Deployed site

More info

Related Issue

I searched for similar issues and found this appears to be related to the known issue in rtfpessoa/diff2html#381, but the specific manifestation may vary depending on the diff content and css setup.

That issue suggests some CSS workarounds and indicates there is no official fix planned due to potential breaking changes with existing functionality.

I have tested the workarounds mentioned in rtfpessoa/diff2html#381 (comment) and found that the visual issue can be fixed by adding:

.d2h-diff-table {
    position: relative;
}

After fixing:

Image

I will create a PR to fix this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions