side-by-side diff: Info lines shrunk in the right panel

Step 0: Describe your environment

OS: Linux Mint 20
diff2html version: 3.4.22
Using diff2html directly or using diff2html-ui helper: I reproduced with both

Extra flags:

drawFileList: false, 
matching: 'lines', 
highlight: true,
outputFormat: 'side-by-side'

Step 1: Describe the problem:

When using side-by-side mode, lines corresponding to @@ ... @@ sections are shrinked in the right panel, causing misalignement.

diff example:

--- Schema
+++ Schema
@@ -1,5 +1,5 @@
 id INT
-c1 STRING
-c2 STRING
+c1 INT
+c3 STRING
 c4!.a INT
-c4!.b STRING
+c4!.d STRING

Observed Results:

Lines are misaligned because lines corresponding to @@ ... @@ section are shrinked in the right panel

Expected Results:

All lines should be correctly aligned

Relevant Code:

I made a minimal HTML file to reproduce the problem.

<html>
  <head>
    <title>Diff2Html Example</title>
    <!-- Include the diff2html library -->
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html@3.4.22/bundles/css/diff2html.min.css" />
    <!-- Javascripts -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html@3.4.22/bundles/js/diff2html-ui.min.js"></script>
  <body>
    <!-- The container element for the diff output -->
    <div id="diff"></div>

    <script>
      // The input data for the diff, in this case the output of the 'git diff' command
      var diffString = `
--- Schema
+++ Schema
@@ -1,5 +1,5 @@
 id INT
-c1 STRING
-c2 STRING
+c1 INT
+c3 STRING
 c4!.a INT
-c4!.b STRING
+c4!.d STRING
`;

        const targetElement = document.getElementById('diff');
        const configuration = { 
          drawFileList: false, 
          matching: 'lines', 
          highlight: true,
          outputFormat: 'side-by-side' 
        };
        const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
        diff2htmlUi.draw();
        diff2htmlUi.highlightCode();
    </script>
  </body>
</html>

Investigation:

I found out that the issue appeared between version 3.4.17 and 3.4.18. I traced it back to this commit.

More precisely, it comes from this .css property :

    .d2h-files-diff {
      display: flex;
    }

The bug disappear when I change it to display: table;

rtfpessoa / diff2html

side-by-side diff: Info lines shrunk in the right panel #462