side-by-side way too wide for wide diffs

jpedrick commented 1 year ago

Step 0: Describe your environment

OS: MacOS 12.6 Safari and Chromium 103.0.5026.0
diff2html version: "https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js" on 2023-01-09
Using diff2html directly or using diff2html-ui helper: directly

Extra flags:

  var configuration = {
        drawFileList: true,
        fileListToggle: false,
        fileListStartVisible: false,
        fileContentToggle: false,
        matching: 'lines',
        outputFormat: 'side-by-side',
        synchronisedScroll: true,
        highlight: true,
        renderNothingWhenEmpty: false,
    };

Step 1: Describe the problem:

A very wide CSV (~100 columns) diff will expand the d2h-files-diff class beyond 100% of the parent element. The d2h-file-wrapper class is the correct width.

Steps to reproduce:

Use side-by-side outputFormat
Load a diff of a CSV with many columns

diff example:

TODO: Will update with generated example in the future

Observed Results:

After inspecting the elements, the 'd2h-files-diff' class is much wider than 100% of it's parent element 'd2h-file-wrapper' in both Safari and Chromium on MacOS.

Expected Results:

The entire content to be constrained to the width of the parent div.

rtfpessoa commented 1 year ago

Can you provide a working example of the problem?

You can use the demo here if it helps https://diff2html.xyz/demo.html?matching=none&matchWordsThreshold=0.25&maxLineLengthHighlight=10000&diffStyle=word&renderNothingWhenEmpty=0&matchingMaxComparisons=2500&maxLineSizeInBlockForComparison=200&outputFormat=line-by-line&drawFileList=1&synchronisedScroll=1&highlight=1&fileListToggle=1&fileListStartVisible=0&highlightLanguages=[object%20Map]&smartSelection=1&fileContentToggle=1&stickyFileHeaders=1&diff=https://github.com/rtfpessoa/diff2html/pull/106

jpedrick commented 1 year ago

Hi @rtfpessoa

I think this should demonstrate the issue: Example

rtfpessoa commented 1 year ago

Thanks for the example, fix on the way.

rtfpessoa / diff2html