Refined-github: PR diff indentation broken

[rastersize]

Hi! I’ve ran into a bug where Refined GitHub causes a problem with the indention in pull request diffs. I tried to look through the recent changelog as the issue happened, for me, between last Friday and this Monday. I restarted my computer and thus my browser for the first time in ~7 days this weekend as well. So I assume an update to Refined GitHub might have been applied.

This is on a private GitHub Enterprise 2.16.9 deployment. The URL to the page is something like (private components redacted): https://<host>/<org>/<repo>/pull/128/files

With Refined GitHub I see:

When disabling the extension the text is indented correctly:

---

It seems like it might be related to some text-indent changes? E.g. https://github.com/sindresorhus/refined-github/pull/2088 . However tried disabling indented-code-wrapping as suggested in that issue but the indentation was still broken.

[notlmn]

I've got a weird feeling in my gut now.

@rastersize can you confirm that this happens even when you've disabled this feature. And I also want you to make sure that the feature is actually being disabled (because of #2170).

Finally if you don't mind, can you copy-paste the code content here (redacted of course), need to see what the indentation is.

[tknickman]

I'm seeing this as well, I'm reasonably confident it was introduced between Friday (6/21) and today.

[tknickman]

Here's what I'm seeing fwiw: (GHE v.2.16.10)

Extension enabled:

Extension disabled:

[gibfahn]

Hitting same issue on Github Enterprise, not seeing it on github.com, updating to 19.6.24 fixes it for me. I had to manually uninstall and reinstall to pick up the update (although I assume if I had waited it would have updated in the background).

_EDIT:_ Scratch that, the UI issue is now showing again. No idea why it went away temporarily after I uninstalled and reinstalled the extension.

[tknickman]

This is fixed for me on latest 19.6.24 but _only_ if I disable indented-code-wrapping. Note this looks to be much more apparent when using split diffs as opposed to unified diffs.

[notlmn]

@tknickman if you don't mind, can you share the original DOM contents for both split and unified diff tables as a gist, with RGH disabled.

@gibfahn can you also help me on this one, same request as above. The code can be obfuscated of course, because the more samples I have the easier it will be to fix this.

Pinging @rastersize too.

[gibfahn]

Super-simple example:

With indented-code-wrapping disabled:

Html

<div id="diff-0" class="file js-file js-details-container Details Details--on open





              show-inline-notes
           ">
  <div class="file-header file-header--expandable js-file-header" data-path="src/main.rs" data-short-path="639fbc4" data-anchor="diff-639fbc4ef05b315af92b4d836c31b023" data-file-type=".rs" data-file-deleted="false">
    <div class="file-actions">

        <span class="show-file-notes pt-1">
          <label>
            <input type="checkbox" checked="checked" class="js-toggle-file-notes">
            Show comments
          </label>
        </span>

          <div class="BtnGroup">
              <clipboard-copy value="/src/main.rs" class="btn btn-sm BtnGroup-item" tabindex="0" role="button">
                Copy path
              </clipboard-copy>
            <a href="/foo/bar/blob/a1b2c3115994833300d33d75e55eee9b997dcaf1/src/main.rs" class="btn btn-sm tooltipped tooltipped-nw BtnGroup-item" rel="nofollow" aria-label="View the whole file">
              View file
            </a>
          </div>

          <a class="btn-octicon tooltipped tooltipped-nw" href="https://desktop.github.com" aria-label="Open this file in GitHub Desktop" data-ga-click="Repository, open with desktop, type:mac">
              <svg class="octicon octicon-device-desktop" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"></path></svg>
          </a>

              <a href="/foo/bar/edit/prb/src/main.rs?pr=%2Ffoo%2Fbar%2Fpull%2F8" class="btn-octicon tooltipped tooltipped-nw" rel="nofollow" data-skip-pjax="" aria-label="Change this file using the online editor">
                <svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path></svg>
              </a>
              <a href="/foo/bar/delete/prb/src/main.rs?pr=%2Ffoo%2Fbar%2Fpull%2F8" class="btn-octicon btn-octicon-danger tooltipped tooltipped-nw" rel="nofollow" data-skip-pjax="" aria-label="Delete this file">
                <svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path></svg>
              </a>
      <div class="d-inline js-toggle-diff-buttons">
        <button type="button" class="btn-octicon p-1 pr-2 js-details-target tooltipped tooltipped-nw js-toggle-diff-contents" aria-label="Toggle diff contents" aria-expanded="true" data-collapse-expand-all-files-callout="false">
          <svg class="octicon octicon-chevron-down Details-content--hidden" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5 11L0 6l1.5-1.5L5 8.25 8.5 4.5 10 6l-5 5z"></path></svg>
          <svg class="octicon octicon-chevron-up Details-content--shown" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 10l-1.5 1.5L5 7.75 1.5 11.5 0 10l5-5 5 5z"></path></svg>
        </button>
      </div>
    </div>
    <div class="file-info">
        <span class="diffstat tooltipped tooltipped-e" aria-label="1 addition &amp; 1 deletion">2 <span class="block-diff-added"></span><span class="block-diff-deleted"></span><span class="block-diff-neutral"></span><span class="block-diff-neutral"></span><span class="block-diff-neutral"></span></span>

      <a href="#diff-639fbc4ef05b315af92b4d836c31b023" class="link-gray-dark" title="src/main.rs">src/main.rs</a>


    </div>
  </div>
  <div class="js-file-content Details-content--hidden">
        <div class="data highlight js-blob-wrapper rgh-linkified-code" style="overflow-x: auto">
          <table class="diff-table js-diff-table tab-size  " data-tab-size="8" data-diff-anchor="diff-639fbc4ef05b315af92b4d836c31b023">


        <tbody><tr data-position="0">
    <td id="diff-639fbc4ef05b315af92b4d836c31b023HL0" class="blob-num blob-num-hunk non-expandable" data-line-number="..."></td>
    <td id="diff-639fbc4ef05b315af92b4d836c31b023HR0" class="blob-num blob-num-hunk non-expandable" data-line-number="..."></td>
    <td class="blob-code blob-code-inner blob-code-hunk" colspan="2">@@ -1,3 +1,3 @@</td>
  </tr>

    <tr>
    <td id="diff-639fbc4ef05b315af92b4d836c31b023L1" data-line-number="1" class="blob-num blob-num-context js-linkable-line-number"></td>

    <td id="diff-639fbc4ef05b315af92b4d836c31b023R1" data-line-number="1" class="blob-num blob-num-context js-linkable-line-number"></td>

  <td class="blob-code blob-code-context blob-code-marker-cell" data-code-marker=" ">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="src/main.rs" data-anchor="diff-639fbc4ef05b315af92b4d836c31b023" data-position="1" data-side="right" data-line="1" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-context">
    <span class="blob-code-inner"><span class="pl-k">fn</span> <span class="pl-en">main</span>() {</span></td>
</tr>



    <tr>
    <td id="diff-639fbc4ef05b315af92b4d836c31b023L2" data-line-number="2" class="blob-num blob-num-deletion js-linkable-line-number"></td>

    <td class="blob-num blob-num-deletion empty-cell"></td>

  <td class="blob-code blob-code-deletion blob-code-marker-cell" data-code-marker="-">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="src/main.rs" data-anchor="diff-639fbc4ef05b315af92b4d836c31b023" data-position="2" data-side="left" data-line="2" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-deletion">
    <span class="blob-code-inner">    <span class="pl-c1"><span class="x x-first x-last">println</span>!</span>(<span class="pl-s">"Hello, world!"</span>);</span></td>
</tr>



    <tr>
    <td class="blob-num blob-num-addition empty-cell"></td>

    <td id="diff-639fbc4ef05b315af92b4d836c31b023R2" data-line-number="2" class="blob-num blob-num-addition js-linkable-line-number"></td>

  <td class="blob-code blob-code-addition blob-code-marker-cell" data-code-marker="+">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="src/main.rs" data-anchor="diff-639fbc4ef05b315af92b4d836c31b023" data-position="3" data-side="right" data-line="2" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-addition">
    <span class="blob-code-inner">    <span class="pl-c1"><span class="x x-first x-last">print</span>!</span>(<span class="pl-s">"Hello, world!"</span>);</span></td>
</tr>



    <tr>
    <td id="diff-639fbc4ef05b315af92b4d836c31b023L3" data-line-number="3" class="blob-num blob-num-context js-linkable-line-number"></td>

    <td id="diff-639fbc4ef05b315af92b4d836c31b023R3" data-line-number="3" class="blob-num blob-num-context js-linkable-line-number"></td>

  <td class="blob-code blob-code-context blob-code-marker-cell" data-code-marker=" ">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="src/main.rs" data-anchor="diff-639fbc4ef05b315af92b4d836c31b023" data-position="4" data-side="right" data-line="3" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-context">
    <span class="blob-code-inner">}</span></td>
</tr>




          </tbody></table>
        </div>

  </div>
</div>

With indented-code-wrapping enabled:

Html

<div id="diff-0" class="file js-file js-details-container Details Details--on open





              show-inline-notes
           ">
  <div class="file-header file-header--expandable js-file-header" data-path="src/main.rs" data-short-path="639fbc4" data-anchor="diff-639fbc4ef05b315af92b4d836c31b023" data-file-type=".rs" data-file-deleted="false">
    <div class="file-actions">

        <span class="show-file-notes pt-1">
          <label>
            <input type="checkbox" checked="checked" class="js-toggle-file-notes">
            Show comments
          </label>
        </span>

          <div class="BtnGroup">
              <clipboard-copy value="/src/main.rs" class="btn btn-sm BtnGroup-item" tabindex="0" role="button">
                Copy path
              </clipboard-copy>
            <a href="/foo/bar/blob/a1b2c3115994833300d33d75e55eee9b997dcaf1/src/main.rs" class="btn btn-sm tooltipped tooltipped-nw BtnGroup-item" rel="nofollow" aria-label="View the whole file">
              View file
            </a>
          </div>

          <a class="btn-octicon tooltipped tooltipped-nw" href="https://desktop.github.com" aria-label="Open this file in GitHub Desktop" data-ga-click="Repository, open with desktop, type:mac">
              <svg class="octicon octicon-device-desktop" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"></path></svg>
          </a>

              <a href="/foo/bar/edit/prb/src/main.rs?pr=%2Ffoo%2Fbar%2Fpull%2F8" class="btn-octicon tooltipped tooltipped-nw" rel="nofollow" data-skip-pjax="" aria-label="Change this file using the online editor">
                <svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path></svg>
              </a>
              <a href="/foo/bar/delete/prb/src/main.rs?pr=%2Ffoo%2Fbar%2Fpull%2F8" class="btn-octicon btn-octicon-danger tooltipped tooltipped-nw" rel="nofollow" data-skip-pjax="" aria-label="Delete this file">
                <svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path></svg>
              </a>
      <div class="d-inline js-toggle-diff-buttons">
        <button type="button" class="btn-octicon p-1 pr-2 js-details-target tooltipped tooltipped-nw js-toggle-diff-contents" aria-label="Toggle diff contents" aria-expanded="true" data-collapse-expand-all-files-callout="false">
          <svg class="octicon octicon-chevron-down Details-content--hidden" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5 11L0 6l1.5-1.5L5 8.25 8.5 4.5 10 6l-5 5z"></path></svg>
          <svg class="octicon octicon-chevron-up Details-content--shown" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 10l-1.5 1.5L5 7.75 1.5 11.5 0 10l5-5 5 5z"></path></svg>
        </button>
      </div>
    </div>
    <div class="file-info">
        <span class="diffstat tooltipped tooltipped-e" aria-label="1 addition &amp; 1 deletion">2 <span class="block-diff-added"></span><span class="block-diff-deleted"></span><span class="block-diff-neutral"></span><span class="block-diff-neutral"></span><span class="block-diff-neutral"></span></span>

      <a href="#diff-639fbc4ef05b315af92b4d836c31b023" class="link-gray-dark" title="src/main.rs">src/main.rs</a>


    </div>
  </div>
  <div class="js-file-content Details-content--hidden">
        <div class="data highlight js-blob-wrapper rgh-linkified-code" style="overflow-x: auto">
          <table class="diff-table js-diff-table tab-size rgh-softwrapped-code" data-tab-size="8" data-diff-anchor="diff-639fbc4ef05b315af92b4d836c31b023">


        <tbody><tr data-position="0">
    <td id="diff-639fbc4ef05b315af92b4d836c31b023HL0" class="blob-num blob-num-hunk non-expandable" data-line-number="..."></td>
    <td id="diff-639fbc4ef05b315af92b4d836c31b023HR0" class="blob-num blob-num-hunk non-expandable" data-line-number="..."></td>
    <td class="blob-code blob-code-inner blob-code-hunk" colspan="2">@@ -1,3 +1,3 @@</td>
  </tr>

    <tr>
    <td id="diff-639fbc4ef05b315af92b4d836c31b023L1" data-line-number="1" class="blob-num blob-num-context js-linkable-line-number"></td>

    <td id="diff-639fbc4ef05b315af92b4d836c31b023R1" data-line-number="1" class="blob-num blob-num-context js-linkable-line-number"></td>

  <td class="blob-code blob-code-context blob-code-marker-cell" data-code-marker=" ">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="src/main.rs" data-anchor="diff-639fbc4ef05b315af92b4d836c31b023" data-position="1" data-side="right" data-line="1" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-context">
    <span class="blob-code-inner"><span class="pl-k">fn</span> <span class="pl-en">main</span>() {</span></td>
</tr>



    <tr>
    <td id="diff-639fbc4ef05b315af92b4d836c31b023L2" data-line-number="2" class="blob-num blob-num-deletion js-linkable-line-number"></td>

    <td class="blob-num blob-num-deletion empty-cell"></td>

  <td class="blob-code blob-code-deletion blob-code-marker-cell" data-code-marker="-">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="src/main.rs" data-anchor="diff-639fbc4ef05b315af92b4d836c31b023" data-position="2" data-side="left" data-line="2" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-deletion">
    <span class="blob-code-inner" style="padding-left: calc((var(--tab-size, 4) * 0ch) + 4ch) !important; text-indent: calc((var(--tab-size, 4) * 0ch) - 4ch) !important;">    <span class="pl-c1"><span class="x x-first x-last">println</span>!</span>(<span class="pl-s">"Hello, world!"</span>);</span></td>
</tr>



    <tr>
    <td class="blob-num blob-num-addition empty-cell"></td>

    <td id="diff-639fbc4ef05b315af92b4d836c31b023R2" data-line-number="2" class="blob-num blob-num-addition js-linkable-line-number"></td>

  <td class="blob-code blob-code-addition blob-code-marker-cell" data-code-marker="+">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="src/main.rs" data-anchor="diff-639fbc4ef05b315af92b4d836c31b023" data-position="3" data-side="right" data-line="2" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-addition">
    <span class="blob-code-inner" style="padding-left: calc((var(--tab-size, 4) * 0ch) + 4ch) !important; text-indent: calc((var(--tab-size, 4) * 0ch) - 4ch) !important;">    <span class="pl-c1"><span class="x x-first x-last">print</span>!</span>(<span class="pl-s">"Hello, world!"</span>);</span></td>
</tr>



    <tr>
    <td id="diff-639fbc4ef05b315af92b4d836c31b023L3" data-line-number="3" class="blob-num blob-num-context js-linkable-line-number"></td>

    <td id="diff-639fbc4ef05b315af92b4d836c31b023R3" data-line-number="3" class="blob-num blob-num-context js-linkable-line-number"></td>

  <td class="blob-code blob-code-context blob-code-marker-cell" data-code-marker=" ">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="src/main.rs" data-anchor="diff-639fbc4ef05b315af92b4d836c31b023" data-position="4" data-side="right" data-line="3" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-context">
    <span class="blob-code-inner">}</span></td>
</tr>




          </tbody></table>
        </div>

  </div>
</div>

[notlmn]

@gibfahn uh, sorry, but can you share an example where the feature is actually broke. This example has nothing broken in it.

[NickCraver]

The content is double-indented in the second screenshot. I'm seeing the same thing in our GitHub instance over at Stack as well.

[notlmn]

I've tried all possible ways to debug this, but each of the example breakdowns above have a different symptom (one has negative indentation, one has entire blocks shifted to the right, one has double indentation).

I've even tried using the same code, and everything works fine for me (on Chrome and Firefox). I even tried comparing the DOM generated from the PR I created and the one provided above, they're exactly the same too.

The fact that this breaks only on GHE and not on public GH makes me think that it might be a CSS difference on GHE instances.

• What browsers are you using!?
• Can you test other browsers!?
• And are you just disabling indented-code-wrapping or the entire extension to test this, because the original comment mentioned something different!?

I don't have a GitHub Enterprise instance to manually debug this one, and the one collaborator on this project who had access to GHE now doesn't, please help a brother out here.

[tknickman]

@notlmn Here's some info from my end. I haven't had much time to look into the code here but I can try and help take a look later tonight.

Variations

1. indented-code-wrapping enabled AND unified diff

Broken: lines are double indented

Image

HTML

<div class="js-file-content Details-content--hidden">
        <div class="data highlight js-blob-wrapper rgh-linkified-code" style="overflow-x: auto">
          <table class="diff-table js-diff-table tab-size rgh-softwrapped-code" data-tab-size="8" data-diff-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5">


        <tbody><tr class="js-expandable-line" data-position="0">
    <td class="blob-num blob-num-expandable" colspan="2">
      <a href="#diff-2af4f6c640fe3921a4d860e54f0c2fb5" class="diff-expander js-expand" title="Expand" aria-label="Expand" data-url="/webplatform/smweb/blob_excerpt/d5270a1beb8a0c35f84d71765a5dea405dd3ece6?diff=unified&amp;in_wiki_context=&amp;left_hunk_size=6&amp;mode=100644&amp;next_line_num_left=3&amp;next_line_num_right=3&amp;path=apps%2Fcoreweb%2Fsrc%2Fapp%2Fpages%2Faudience%2FStatus%2FOverview%2FMessageCard%2FErrorMessage%2FEndedProject%2Fended-project.scss&amp;prev_line_num_left=&amp;prev_line_num_right=&amp;right_hunk_size=10" data-left-range="1-2" data-right-range="1-2">
        <svg class="octicon octicon-unfold" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.5 7.5L14 10c0 .55-.45 1-1 1H9v-1h3.5l-2-2h-7l-2 2H5v1H1c-.55 0-1-.45-1-1l2.5-2.5L0 5c0-.55.45-1 1-1h4v1H1.5l2 2h7l2-2H9V4h4c.55 0 1 .45 1 1l-2.5 2.5zM6 6h2V3h2L7 0 4 3h2v3zm2 3H6v3H4l3 3 3-3H8V9z"></path></svg>
      </a>
    </td>
    <td class="blob-code blob-code-inner blob-code-hunk" colspan="2">@@ -3,6 +3,10 @@</td>
  </tr>

    <tr>
    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L3" data-line-number="3" class="blob-num blob-num-context js-linkable-line-number"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R3" data-line-number="3" class="blob-num blob-num-context js-linkable-line-number"></td>

  <td class="blob-code blob-code-context blob-code-marker-cell" data-code-marker=" ">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="1" data-side="right" data-line="3" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-context">
    <span class="blob-code-inner"><span class="pl-e">.sm-ended-project</span> {</span></td>
</tr>



    <tr>
    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L4" data-line-number="4" class="blob-num blob-num-context js-linkable-line-number"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R4" data-line-number="4" class="blob-num blob-num-context js-linkable-line-number"></td>

  <td class="blob-code blob-code-context blob-code-marker-cell" data-code-marker=" ">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="2" data-side="right" data-line="4" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-context">
    <span class="blob-code-inner">  <span class="pl-e">&amp;__cta</span> {</span></td>
</tr>



    <tr>
    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L5" data-line-number="5" class="blob-num blob-num-context js-linkable-line-number"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R5" data-line-number="5" class="blob-num blob-num-context js-linkable-line-number"></td>

  <td class="blob-code blob-code-context blob-code-marker-cell" data-code-marker=" ">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="3" data-side="right" data-line="5" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-context">
    <span class="blob-code-inner" style="padding-left: calc((var(--tab-size, 4) * 0ch) + 4ch) !important; text-indent: calc((var(--tab-size, 4) * 0ch) - 4ch) !important;">    <span class="pl-c1"><span class="pl-c1">margin-top</span></span>: <span class="pl-smi">$space--4</span>;</span></td>
</tr>



    <tr>
    <td class="blob-num blob-num-addition empty-cell"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R6" data-line-number="6" class="blob-num blob-num-addition js-linkable-line-number"></td>

  <td class="blob-code blob-code-addition blob-code-marker-cell" data-code-marker="+">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="4" data-side="right" data-line="6" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-addition">
    <span class="blob-code-inner"><br></span></td>
</tr>



    <tr>
    <td class="blob-num blob-num-addition empty-cell"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R7" data-line-number="7" class="blob-num blob-num-addition js-linkable-line-number"></td>

  <td class="blob-code blob-code-addition blob-code-marker-cell" data-code-marker="+">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="5" data-side="right" data-line="7" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-addition">
    <span class="blob-code-inner" style="padding-left: calc((var(--tab-size, 4) * 0ch) + 4ch) !important; text-indent: calc((var(--tab-size, 4) * 0ch) - 4ch) !important;">    <span class="pl-k">@include</span> <span class="pl-c1">breakpoint-down</span>(<span class="pl-v">md</span>) {</span></td>
</tr>



    <tr>
    <td class="blob-num blob-num-addition empty-cell"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R8" data-line-number="8" class="blob-num blob-num-addition js-linkable-line-number"></td>

  <td class="blob-code blob-code-addition blob-code-marker-cell" data-code-marker="+">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="6" data-side="right" data-line="8" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-addition">
    <span class="blob-code-inner" style="padding-left: calc((var(--tab-size, 4) * 0ch) + 6ch) !important; text-indent: calc((var(--tab-size, 4) * 0ch) - 6ch) !important;">      <span class="pl-c1"><span class="pl-c1">text-align</span></span>: <span class="pl-c1">center</span>;</span></td>
</tr>



    <tr>
    <td class="blob-num blob-num-addition empty-cell"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R9" data-line-number="9" class="blob-num blob-num-addition js-linkable-line-number"></td>

  <td class="blob-code blob-code-addition blob-code-marker-cell" data-code-marker="+">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="7" data-side="right" data-line="9" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-addition">
    <span class="blob-code-inner">    }</span></td>
</tr>



    <tr>
    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L6" data-line-number="6" class="blob-num blob-num-context js-linkable-line-number"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R10" data-line-number="10" class="blob-num blob-num-context js-linkable-line-number"></td>

  <td class="blob-code blob-code-context blob-code-marker-cell" data-code-marker=" ">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="8" data-side="right" data-line="10" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-context">
    <span class="blob-code-inner">  }</span></td>
</tr>



    <tr>
    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L7" data-line-number="7" class="blob-num blob-num-context js-linkable-line-number"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R11" data-line-number="11" class="blob-num blob-num-context js-linkable-line-number"></td>

  <td class="blob-code blob-code-context blob-code-marker-cell" data-code-marker=" ">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="9" data-side="right" data-line="11" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-context">
    <span class="blob-code-inner"><br></span></td>
</tr>



    <tr>
    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L8" data-line-number="8" class="blob-num blob-num-context js-linkable-line-number"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R12" data-line-number="12" class="blob-num blob-num-context js-linkable-line-number"></td>

  <td class="blob-code blob-code-context blob-code-marker-cell" data-code-marker=" ">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="10" data-side="right" data-line="12" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-context">
    <span class="blob-code-inner">  <span class="pl-e">&amp;__paragraph</span> {</span></td>
</tr>



  <tr class="js-expandable-line">
   <td class="blob-num blob-num-expandable" colspan="2">
     <a href="#diff-2af4f6c640fe3921a4d860e54f0c2fb5" class="diff-expander js-expand" title="Expand" aria-label="Expand" data-url="/webplatform/smweb/blob_excerpt/d5270a1beb8a0c35f84d71765a5dea405dd3ece6?diff=unified&amp;in_wiki_context=&amp;mode=100644&amp;path=apps%2Fcoreweb%2Fsrc%2Fapp%2Fpages%2Faudience%2FStatus%2FOverview%2FMessageCard%2FErrorMessage%2FEndedProject%2Fended-project.scss&amp;prev_line_num_left=8&amp;prev_line_num_right=12" data-left-range="9-15" data-right-range="13-15">
       <svg class="octicon octicon-unfold" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.5 7.5L14 10c0 .55-.45 1-1 1H9v-1h3.5l-2-2h-7l-2 2H5v1H1c-.55 0-1-.45-1-1l2.5-2.5L0 5c0-.55.45-1 1-1h4v1H1.5l2 2h7l2-2H9V4h4c.55 0 1 .45 1 1l-2.5 2.5zM6 6h2V3h2L7 0 4 3h2v3zm2 3H6v3H4l3 3 3-3H8V9z"></path></svg>
     </a>
   </td>
   <td class="blob-code blob-code-expandable"></td>
  </tr>

          </tbody></table>
        </div>

  </div>

2. indented-code-wrapping enabled AND split diff

Broken: blocks are shifted right

Image

HTML

<div class="js-file-content Details-content--hidden">
        <div class="data highlight js-blob-wrapper rgh-linkified-code" style="overflow-x: auto">
          <table class="diff-table js-diff-table tab-size file-diff-split js-file-diff-split rgh-softwrapped-code" data-tab-size="8" data-diff-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5">
              <colgroup>
                <col width="40">
                <col>
                <col width="40">
                <col>
              </colgroup>


        <tbody><tr class="js-expandable-line" data-position="0">
    <td class="blob-num blob-num-expandable" colspan="1">
      <a href="#diff-2af4f6c640fe3921a4d860e54f0c2fb5" class="diff-expander js-expand" title="Expand" aria-label="Expand" data-url="/webplatform/smweb/blob_excerpt/d5270a1beb8a0c35f84d71765a5dea405dd3ece6?diff=split&amp;in_wiki_context=&amp;left_hunk_size=6&amp;mode=100644&amp;next_line_num_left=3&amp;next_line_num_right=3&amp;path=apps%2Fcoreweb%2Fsrc%2Fapp%2Fpages%2Faudience%2FStatus%2FOverview%2FMessageCard%2FErrorMessage%2FEndedProject%2Fended-project.scss&amp;prev_line_num_left=&amp;prev_line_num_right=&amp;right_hunk_size=10" data-left-range="1-2" data-right-range="1-2">
        <svg class="octicon octicon-unfold" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.5 7.5L14 10c0 .55-.45 1-1 1H9v-1h3.5l-2-2h-7l-2 2H5v1H1c-.55 0-1-.45-1-1l2.5-2.5L0 5c0-.55.45-1 1-1h4v1H1.5l2 2h7l2-2H9V4h4c.55 0 1 .45 1 1l-2.5 2.5zM6 6h2V3h2L7 0 4 3h2v3zm2 3H6v3H4l3 3 3-3H8V9z"></path></svg>
      </a>
    </td>
    <td class="blob-code blob-code-inner blob-code-hunk" colspan="3">@@ -3,6 +3,10 @@</td>
  </tr>


    <tr>
    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L3" data-line-number="3"></td>

    <td class="code-review blob-code blob-code-context ">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="deletion" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="1" data-original-line=" .sm-ended-project {" data-line="3" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" "><span class="pl-e">.sm-ended-project</span> {</span>

    </td>

    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R3" data-line-number="3"></td>

    <td class="code-review blob-code blob-code-context">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="1" data-original-line=" .sm-ended-project {" data-line="3" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" "><span class="pl-e">.sm-ended-project</span> {</span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L4" data-line-number="4"></td>

    <td class="code-review blob-code blob-code-context ">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="deletion" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="2" data-original-line="   &amp;__cta {" data-line="4" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" ">  <span class="pl-e">&amp;__cta</span> {</span>

    </td>

    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R4" data-line-number="4"></td>

    <td class="code-review blob-code blob-code-context">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="2" data-original-line="   &amp;__cta {" data-line="4" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" ">  <span class="pl-e">&amp;__cta</span> {</span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L5" data-line-number="5"></td>

    <td class="code-review blob-code blob-code-context ">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="deletion" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="3" data-original-line="     margin-top: $space--4;" data-line="5" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" " style="padding-left: calc((var(--tab-size, 4) * 0ch) + 4ch) !important; text-indent: calc((var(--tab-size, 4) * 0ch) - 4ch) !important;">    <span class="pl-c1"><span class="pl-c1">margin-top</span></span>: <span class="pl-smi">$space--4</span>;</span>

    </td>

    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R5" data-line-number="5"></td>

    <td class="code-review blob-code blob-code-context">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="3" data-original-line="     margin-top: $space--4;" data-line="5" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" " style="padding-left: calc((var(--tab-size, 4) * 0ch) + 4ch) !important; text-indent: calc((var(--tab-size, 4) * 0ch) - 4ch) !important;">    <span class="pl-c1"><span class="pl-c1">margin-top</span></span>: <span class="pl-smi">$space--4</span>;</span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-empty empty-cell"></td>
    <td class="blob-code blob-code-empty empty-cell"></td>

    <td class="blob-num blob-num-addition js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R6" data-line-number="6"></td>

    <td class="code-review blob-code blob-code-addition">
        <button class="btn-link add-line-comment js-add-line-comment js-add-split-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="4" data-original-line="+" data-line="6" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker="+"><br></span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-empty empty-cell"></td>
    <td class="blob-code blob-code-empty empty-cell"></td>

    <td class="blob-num blob-num-addition js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R7" data-line-number="7"></td>

    <td class="code-review blob-code blob-code-addition">
        <button class="btn-link add-line-comment js-add-line-comment js-add-split-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="5" data-original-line="+    @include breakpoint-down(md) {" data-line="7" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker="+" style="padding-left: calc((var(--tab-size, 4) * 0ch) + 4ch) !important; text-indent: calc((var(--tab-size, 4) * 0ch) - 4ch) !important;">    <span class="pl-k">@include</span> <span class="pl-c1">breakpoint-down</span>(<span class="pl-v">md</span>) {</span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-empty empty-cell"></td>
    <td class="blob-code blob-code-empty empty-cell"></td>

    <td class="blob-num blob-num-addition js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R8" data-line-number="8"></td>

    <td class="code-review blob-code blob-code-addition">
        <button class="btn-link add-line-comment js-add-line-comment js-add-split-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="6" data-original-line="+      text-align: center;" data-line="8" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker="+" style="padding-left: calc((var(--tab-size, 4) * 0ch) + 6ch) !important; text-indent: calc((var(--tab-size, 4) * 0ch) - 6ch) !important;">      <span class="pl-c1"><span class="pl-c1">text-align</span></span>: <span class="pl-c1">center</span>;</span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-empty empty-cell"></td>
    <td class="blob-code blob-code-empty empty-cell"></td>

    <td class="blob-num blob-num-addition js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R9" data-line-number="9"></td>

    <td class="code-review blob-code blob-code-addition">
        <button class="btn-link add-line-comment js-add-line-comment js-add-split-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="7" data-original-line="+    }" data-line="9" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker="+">    }</span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L6" data-line-number="6"></td>

    <td class="code-review blob-code blob-code-context ">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="deletion" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="8" data-original-line="   }" data-line="10" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" ">  }</span>

    </td>

    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R10" data-line-number="10"></td>

    <td class="code-review blob-code blob-code-context">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="8" data-original-line="   }" data-line="10" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" ">  }</span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L7" data-line-number="7"></td>

    <td class="code-review blob-code blob-code-context ">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="deletion" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="9" data-original-line=" " data-line="11" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" "><br></span>

    </td>

    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R11" data-line-number="11"></td>

    <td class="code-review blob-code blob-code-context">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="9" data-original-line=" " data-line="11" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" "><br></span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L8" data-line-number="8"></td>

    <td class="code-review blob-code blob-code-context ">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="deletion" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="10" data-original-line="   &amp;__paragraph {" data-line="12" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" ">  <span class="pl-e">&amp;__paragraph</span> {</span>

    </td>

    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R12" data-line-number="12"></td>

    <td class="code-review blob-code blob-code-context">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="10" data-original-line="   &amp;__paragraph {" data-line="12" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" ">  <span class="pl-e">&amp;__paragraph</span> {</span>

    </td>
</tr>



  <tr class="js-expandable-line">
   <td class="blob-num blob-num-expandable" colspan="1">
     <a href="#diff-2af4f6c640fe3921a4d860e54f0c2fb5" class="diff-expander js-expand" title="Expand" aria-label="Expand" data-url="/webplatform/smweb/blob_excerpt/d5270a1beb8a0c35f84d71765a5dea405dd3ece6?diff=split&amp;in_wiki_context=&amp;mode=100644&amp;path=apps%2Fcoreweb%2Fsrc%2Fapp%2Fpages%2Faudience%2FStatus%2FOverview%2FMessageCard%2FErrorMessage%2FEndedProject%2Fended-project.scss&amp;prev_line_num_left=8&amp;prev_line_num_right=12" data-left-range="9-15" data-right-range="13-15">
       <svg class="octicon octicon-unfold" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.5 7.5L14 10c0 .55-.45 1-1 1H9v-1h3.5l-2-2h-7l-2 2H5v1H1c-.55 0-1-.45-1-1l2.5-2.5L0 5c0-.55.45-1 1-1h4v1H1.5l2 2h7l2-2H9V4h4c.55 0 1 .45 1 1l-2.5 2.5zM6 6h2V3h2L7 0 4 3h2v3zm2 3H6v3H4l3 3 3-3H8V9z"></path></svg>
     </a>
   </td>
   <td class="blob-code blob-code-expandable" colspan="3"></td>
  </tr>

          </tbody></table>
        </div>

  </div>

3. indented-code-wrapping disabled AND unified diff

Working

Image

HTML

<div class="js-file-content Details-content--hidden">
        <div class="data highlight js-blob-wrapper rgh-linkified-code" style="overflow-x: auto">
          <table class="diff-table js-diff-table tab-size  " data-tab-size="8" data-diff-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5">


        <tbody><tr class="js-expandable-line" data-position="0">
    <td class="blob-num blob-num-expandable" colspan="2">
      <a href="#diff-2af4f6c640fe3921a4d860e54f0c2fb5" class="diff-expander js-expand" title="Expand" aria-label="Expand" data-url="/webplatform/smweb/blob_excerpt/d5270a1beb8a0c35f84d71765a5dea405dd3ece6?diff=unified&amp;in_wiki_context=&amp;left_hunk_size=6&amp;mode=100644&amp;next_line_num_left=3&amp;next_line_num_right=3&amp;path=apps%2Fcoreweb%2Fsrc%2Fapp%2Fpages%2Faudience%2FStatus%2FOverview%2FMessageCard%2FErrorMessage%2FEndedProject%2Fended-project.scss&amp;prev_line_num_left=&amp;prev_line_num_right=&amp;right_hunk_size=10" data-left-range="1-2" data-right-range="1-2">
        <svg class="octicon octicon-unfold" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.5 7.5L14 10c0 .55-.45 1-1 1H9v-1h3.5l-2-2h-7l-2 2H5v1H1c-.55 0-1-.45-1-1l2.5-2.5L0 5c0-.55.45-1 1-1h4v1H1.5l2 2h7l2-2H9V4h4c.55 0 1 .45 1 1l-2.5 2.5zM6 6h2V3h2L7 0 4 3h2v3zm2 3H6v3H4l3 3 3-3H8V9z"></path></svg>
      </a>
    </td>
    <td class="blob-code blob-code-inner blob-code-hunk" colspan="2">@@ -3,6 +3,10 @@</td>
  </tr>

    <tr>
    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L3" data-line-number="3" class="blob-num blob-num-context js-linkable-line-number"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R3" data-line-number="3" class="blob-num blob-num-context js-linkable-line-number"></td>

  <td class="blob-code blob-code-context blob-code-marker-cell" data-code-marker=" ">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="1" data-side="right" data-line="3" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-context">
    <span class="blob-code-inner"><span class="pl-e">.sm-ended-project</span> {</span></td>
</tr>



    <tr>
    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L4" data-line-number="4" class="blob-num blob-num-context js-linkable-line-number"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R4" data-line-number="4" class="blob-num blob-num-context js-linkable-line-number"></td>

  <td class="blob-code blob-code-context blob-code-marker-cell" data-code-marker=" ">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="2" data-side="right" data-line="4" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-context">
    <span class="blob-code-inner">  <span class="pl-e">&amp;__cta</span> {</span></td>
</tr>



    <tr>
    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L5" data-line-number="5" class="blob-num blob-num-context js-linkable-line-number"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R5" data-line-number="5" class="blob-num blob-num-context js-linkable-line-number"></td>

  <td class="blob-code blob-code-context blob-code-marker-cell" data-code-marker=" ">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="3" data-side="right" data-line="5" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-context">
    <span class="blob-code-inner">    <span class="pl-c1"><span class="pl-c1">margin-top</span></span>: <span class="pl-smi">$space--4</span>;</span></td>
</tr>



    <tr>
    <td class="blob-num blob-num-addition empty-cell"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R6" data-line-number="6" class="blob-num blob-num-addition js-linkable-line-number"></td>

  <td class="blob-code blob-code-addition blob-code-marker-cell" data-code-marker="+">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="4" data-side="right" data-line="6" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-addition">
    <span class="blob-code-inner"><br></span></td>
</tr>



    <tr>
    <td class="blob-num blob-num-addition empty-cell"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R7" data-line-number="7" class="blob-num blob-num-addition js-linkable-line-number"></td>

  <td class="blob-code blob-code-addition blob-code-marker-cell" data-code-marker="+">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="5" data-side="right" data-line="7" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-addition">
    <span class="blob-code-inner">    <span class="pl-k">@include</span> <span class="pl-c1">breakpoint-down</span>(<span class="pl-v">md</span>) {</span></td>
</tr>



    <tr>
    <td class="blob-num blob-num-addition empty-cell"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R8" data-line-number="8" class="blob-num blob-num-addition js-linkable-line-number"></td>

  <td class="blob-code blob-code-addition blob-code-marker-cell" data-code-marker="+">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="6" data-side="right" data-line="8" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-addition">
    <span class="blob-code-inner">      <span class="pl-c1"><span class="pl-c1">text-align</span></span>: <span class="pl-c1">center</span>;</span></td>
</tr>



    <tr>
    <td class="blob-num blob-num-addition empty-cell"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R9" data-line-number="9" class="blob-num blob-num-addition js-linkable-line-number"></td>

  <td class="blob-code blob-code-addition blob-code-marker-cell" data-code-marker="+">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="7" data-side="right" data-line="9" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-addition">
    <span class="blob-code-inner">    }</span></td>
</tr>



    <tr>
    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L6" data-line-number="6" class="blob-num blob-num-context js-linkable-line-number"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R10" data-line-number="10" class="blob-num blob-num-context js-linkable-line-number"></td>

  <td class="blob-code blob-code-context blob-code-marker-cell" data-code-marker=" ">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="8" data-side="right" data-line="10" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-context">
    <span class="blob-code-inner">  }</span></td>
</tr>



    <tr>
    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L7" data-line-number="7" class="blob-num blob-num-context js-linkable-line-number"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R11" data-line-number="11" class="blob-num blob-num-context js-linkable-line-number"></td>

  <td class="blob-code blob-code-context blob-code-marker-cell" data-code-marker=" ">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="9" data-side="right" data-line="11" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-context">
    <span class="blob-code-inner"><br></span></td>
</tr>



    <tr>
    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L8" data-line-number="8" class="blob-num blob-num-context js-linkable-line-number"></td>

    <td id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R12" data-line-number="12" class="blob-num blob-num-context js-linkable-line-number"></td>

  <td class="blob-code blob-code-context blob-code-marker-cell" data-code-marker=" ">
      <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="10" data-side="right" data-line="12" type="button" aria-label="Add line comment">
        <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
      </button>
  </td>

  <td class="blob-code blob-code-context">
    <span class="blob-code-inner">  <span class="pl-e">&amp;__paragraph</span> {</span></td>
</tr>



  <tr class="js-expandable-line">
   <td class="blob-num blob-num-expandable" colspan="2">
     <a href="#diff-2af4f6c640fe3921a4d860e54f0c2fb5" class="diff-expander js-expand" title="Expand" aria-label="Expand" data-url="/webplatform/smweb/blob_excerpt/d5270a1beb8a0c35f84d71765a5dea405dd3ece6?diff=unified&amp;in_wiki_context=&amp;mode=100644&amp;path=apps%2Fcoreweb%2Fsrc%2Fapp%2Fpages%2Faudience%2FStatus%2FOverview%2FMessageCard%2FErrorMessage%2FEndedProject%2Fended-project.scss&amp;prev_line_num_left=8&amp;prev_line_num_right=12" data-left-range="9-15" data-right-range="13-15">
       <svg class="octicon octicon-unfold" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.5 7.5L14 10c0 .55-.45 1-1 1H9v-1h3.5l-2-2h-7l-2 2H5v1H1c-.55 0-1-.45-1-1l2.5-2.5L0 5c0-.55.45-1 1-1h4v1H1.5l2 2h7l2-2H9V4h4c.55 0 1 .45 1 1l-2.5 2.5zM6 6h2V3h2L7 0 4 3h2v3zm2 3H6v3H4l3 3 3-3H8V9z"></path></svg>
     </a>
   </td>
   <td class="blob-code blob-code-expandable"></td>
  </tr>

          </tbody></table>
        </div>

  </div>

4. indented-code-wrapping disabled AND split diff

Working

Image

HTML

<div class="js-file-content Details-content--hidden">
        <div class="data highlight js-blob-wrapper rgh-linkified-code" style="overflow-x: auto">
          <table class="diff-table js-diff-table tab-size  file-diff-split js-file-diff-split" data-tab-size="8" data-diff-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5">
              <colgroup>
                <col width="40">
                <col>
                <col width="40">
                <col>
              </colgroup>


        <tbody><tr class="js-expandable-line" data-position="0">
    <td class="blob-num blob-num-expandable" colspan="1">
      <a href="#diff-2af4f6c640fe3921a4d860e54f0c2fb5" class="diff-expander js-expand" title="Expand" aria-label="Expand" data-url="/webplatform/smweb/blob_excerpt/d5270a1beb8a0c35f84d71765a5dea405dd3ece6?diff=split&amp;in_wiki_context=&amp;left_hunk_size=6&amp;mode=100644&amp;next_line_num_left=3&amp;next_line_num_right=3&amp;path=apps%2Fcoreweb%2Fsrc%2Fapp%2Fpages%2Faudience%2FStatus%2FOverview%2FMessageCard%2FErrorMessage%2FEndedProject%2Fended-project.scss&amp;prev_line_num_left=&amp;prev_line_num_right=&amp;right_hunk_size=10" data-left-range="1-2" data-right-range="1-2">
        <svg class="octicon octicon-unfold" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.5 7.5L14 10c0 .55-.45 1-1 1H9v-1h3.5l-2-2h-7l-2 2H5v1H1c-.55 0-1-.45-1-1l2.5-2.5L0 5c0-.55.45-1 1-1h4v1H1.5l2 2h7l2-2H9V4h4c.55 0 1 .45 1 1l-2.5 2.5zM6 6h2V3h2L7 0 4 3h2v3zm2 3H6v3H4l3 3 3-3H8V9z"></path></svg>
      </a>
    </td>
    <td class="blob-code blob-code-inner blob-code-hunk" colspan="3">@@ -3,6 +3,10 @@</td>
  </tr>


    <tr>
    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L3" data-line-number="3"></td>

    <td class="code-review blob-code blob-code-context">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="deletion" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="1" data-original-line=" .sm-ended-project {" data-line="3" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" "><span class="pl-e">.sm-ended-project</span> {</span>

    </td>

    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R3" data-line-number="3"></td>

    <td class="code-review blob-code blob-code-context">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="1" data-original-line=" .sm-ended-project {" data-line="3" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" "><span class="pl-e">.sm-ended-project</span> {</span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L4" data-line-number="4"></td>

    <td class="code-review blob-code blob-code-context ">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="deletion" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="2" data-original-line="   &amp;__cta {" data-line="4" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" ">  <span class="pl-e">&amp;__cta</span> {</span>

    </td>

    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R4" data-line-number="4"></td>

    <td class="code-review blob-code blob-code-context">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="2" data-original-line="   &amp;__cta {" data-line="4" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" ">  <span class="pl-e">&amp;__cta</span> {</span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L5" data-line-number="5"></td>

    <td class="code-review blob-code blob-code-context ">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="deletion" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="3" data-original-line="     margin-top: $space--4;" data-line="5" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" ">    <span class="pl-c1"><span class="pl-c1">margin-top</span></span>: <span class="pl-smi">$space--4</span>;</span>

    </td>

    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R5" data-line-number="5"></td>

    <td class="code-review blob-code blob-code-context">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="3" data-original-line="     margin-top: $space--4;" data-line="5" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" ">    <span class="pl-c1"><span class="pl-c1">margin-top</span></span>: <span class="pl-smi">$space--4</span>;</span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-empty empty-cell"></td>
    <td class="blob-code blob-code-empty empty-cell"></td>

    <td class="blob-num blob-num-addition js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R6" data-line-number="6"></td>

    <td class="code-review blob-code blob-code-addition">
        <button class="btn-link add-line-comment js-add-line-comment js-add-split-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="4" data-original-line="+" data-line="6" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker="+"><br></span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-empty empty-cell"></td>
    <td class="blob-code blob-code-empty empty-cell"></td>

    <td class="blob-num blob-num-addition js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R7" data-line-number="7"></td>

    <td class="code-review blob-code blob-code-addition">
        <button class="btn-link add-line-comment js-add-line-comment js-add-split-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="5" data-original-line="+    @include breakpoint-down(md) {" data-line="7" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker="+">    <span class="pl-k">@include</span> <span class="pl-c1">breakpoint-down</span>(<span class="pl-v">md</span>) {</span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-empty empty-cell"></td>
    <td class="blob-code blob-code-empty empty-cell"></td>

    <td class="blob-num blob-num-addition js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R8" data-line-number="8"></td>

    <td class="code-review blob-code blob-code-addition">
        <button class="btn-link add-line-comment js-add-line-comment js-add-split-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="6" data-original-line="+      text-align: center;" data-line="8" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker="+">      <span class="pl-c1"><span class="pl-c1">text-align</span></span>: <span class="pl-c1">center</span>;</span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-empty empty-cell"></td>
    <td class="blob-code blob-code-empty empty-cell"></td>

    <td class="blob-num blob-num-addition js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R9" data-line-number="9"></td>

    <td class="code-review blob-code blob-code-addition">
        <button class="btn-link add-line-comment js-add-line-comment js-add-split-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="7" data-original-line="+    }" data-line="9" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker="+">    }</span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L6" data-line-number="6"></td>

    <td class="code-review blob-code blob-code-context">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="deletion" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="8" data-original-line="   }" data-line="10" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" ">  }</span>

    </td>

    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R10" data-line-number="10"></td>

    <td class="code-review blob-code blob-code-context">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="8" data-original-line="   }" data-line="10" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" ">  }</span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L7" data-line-number="7"></td>

    <td class="code-review blob-code blob-code-context ">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="deletion" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="9" data-original-line=" " data-line="11" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" "><br></span>

    </td>

    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R11" data-line-number="11"></td>

    <td class="code-review blob-code blob-code-context">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="9" data-original-line=" " data-line="11" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" "><br></span>

    </td>
</tr>




    <tr>
    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5L8" data-line-number="8"></td>

    <td class="code-review blob-code blob-code-context">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="deletion" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="10" data-original-line="   &amp;__paragraph {" data-line="12" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" ">  <span class="pl-e">&amp;__paragraph</span> {</span>

    </td>

    <td class="blob-num blob-num-context js-linkable-line-number" id="diff-2af4f6c640fe3921a4d860e54f0c2fb5R12" data-line-number="12"></td>

    <td class="code-review blob-code blob-code-context">
        <button class="btn-link add-line-comment js-add-line-comment js-add-single-line-comment" data-type="addition" data-path="apps/coreweb/src/app/pages/audience/Status/Overview/MessageCard/ErrorMessage/EndedProject/ended-project.scss" data-anchor="diff-2af4f6c640fe3921a4d860e54f0c2fb5" data-position="10" data-original-line="   &amp;__paragraph {" data-line="12" data-side="right" type="button" aria-label="Add line comment">
           <svg class="octicon octicon-plus" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>
         </button>

      <span class="blob-code-inner blob-code-marker" data-code-marker=" ">  <span class="pl-e">&amp;__paragraph</span> {</span>

    </td>
</tr>



  <tr class="js-expandable-line">
   <td class="blob-num blob-num-expandable" colspan="1">
     <a href="#diff-2af4f6c640fe3921a4d860e54f0c2fb5" class="diff-expander js-expand" title="Expand" aria-label="Expand" data-url="/webplatform/smweb/blob_excerpt/d5270a1beb8a0c35f84d71765a5dea405dd3ece6?diff=split&amp;in_wiki_context=&amp;mode=100644&amp;path=apps%2Fcoreweb%2Fsrc%2Fapp%2Fpages%2Faudience%2FStatus%2FOverview%2FMessageCard%2FErrorMessage%2FEndedProject%2Fended-project.scss&amp;prev_line_num_left=8&amp;prev_line_num_right=12" data-left-range="9-15" data-right-range="13-15">
       <svg class="octicon octicon-unfold" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.5 7.5L14 10c0 .55-.45 1-1 1H9v-1h3.5l-2-2h-7l-2 2H5v1H1c-.55 0-1-.45-1-1l2.5-2.5L0 5c0-.55.45-1 1-1h4v1H1.5l2 2h7l2-2H9V4h4c.55 0 1 .45 1 1l-2.5 2.5zM6 6h2V3h2L7 0 4 3h2v3zm2 3H6v3H4l3 3 3-3H8V9z"></path></svg>
     </a>
   </td>
   <td class="blob-code blob-code-expandable" colspan="3"></td>
  </tr>

          </tbody></table>
        </div>

  </div>

[notlmn]

Perfect, that's all I needed @tknickman ❤.

I've debugged to this being .rgh-code-wrapping-enabled probably not being applied to the parent table elements.

The screenshots you've provided are exact symptoms when display: block not being applied to span.blob-code-inner elements that I was able to reproduce. I manually add that CSS rule and everything came back to being normal.

The main issue here is text-indent only work for block level elements, span is not a block level element so all it does is respect padding-left applied to it and moves forward (carrying diff markers along with it in split diffs, causing entire block shifts && leaving them being in unified diffs, cause double indentation).

@tknickman I would ask you to do one last favor for me and test if this is gets fixed for you by adding that class back in.

[notlmn]

Wait, @bfred-it is this #2174. CSS not being injected on GHE. 😱

[tknickman]

Ah that looks like it. I can see the fix is working when adding display: block to the span.blob-code-inner elements. However if I add the rgh-code-wrapping-enabled class to the table, I don't get the changes.

I am also seeing other missing css (I have the exact issue described in https://github.com/sindresorhus/refined-github/issues/2174 and I'm just now noticing that I don't have other adjustments like the left aligned labels in the pr view anymore).

So looks like this is just GHE missing css.

[rastersize]

Confirmed it works in GHE 2.16.9 as well. Thanks for fixing it so quickly @bfred-it!