Code diff UI goes misalignment with code review comments

[wxiaoguang]

Description

https://jsfiddle.net/ob0y2x83/

The padding inside td makes the widths of td become larger.

<table style="width: 100%">
  <tr>
    <td style="width: 10px;">a</td>
    <td style="width: 0"></td>
    <td style="width: 10px;">b</td>
    <td style="width: 49%">long content</td>
    
    <td style="width: 10px;">a</td>
    <td style="width: 0"></td>
    <td style="width: 10px;">b</td>
    <td style="width: 49%">long content</td>
  </tr>
  <tr>
    <td colspan="4">
      <div style="width: 30%"> 
        <div style="padding-left: 100px;">
          with padding
        </div>
      </div>
    </td>
    <td colspan="4">
      <div style="width: 30%"> 
        <div style="padding-left: 100px;">
          with padding
        </div>
      </div>
    </td>
  </tr>
</table>

<hr>

<table style="width: 100%">
  <tr>
    <td style="width: 10px;">a</td>
    <td style="width: 0"></td>
    <td style="width: 10px;">b</td>
    <td style="width: 49%">long content</td>
    
    <td style="width: 10px;">a</td>
    <td style="width: 0"></td>
    <td style="width: 10px;">b</td>
    <td style="width: 49%">long content</td>
  </tr>
  <tr>
    <td colspan="4">
      <div style="width: 30%"> 
        <div style="padding-left: 0;">
          no padding
        </div>
      </div>
    </td>
    <td colspan="4">
      <div style="width: 30%"> 
        <div style="padding-left: 0;">
          no padding
        </div>
      </div>
    </td>
  </tr>
</table>

[wxiaoguang]

Move the milestone to 1.20 or 1.x ? I am not working on it. Welcome to pick it.

Update: I proposed a draft #23096 , welcome to test & review.

[lunny]

Move the milestone to 1.20 or 1.x ? I am not working on it. Welcome to pick it.

When we are releasing 1.19.1 if there is no PR to fix it. We can move it to 1.19.2

[wxiaoguang]

I think there needs a document to explain how the milestone works.

In my mind, only necessary/blocker issues should be on the stable release milestones.

[lunny]

I think there needs a document to explain how the milestone works.

In my mind, only necessary/blocker issues should be on the stable release milestones.

Yes, we need one. I think since it has been marked bug so that it could be put in a minor version if 1.19 has been affected.

[wxiaoguang]

This problem is very complicated. I don't think it could be backported easily even if it gets resolved in 1.20

[lunny]

OK. So let's move it to 1.20

[jpraet]

I do think fixing this UX regression deserves some attention though. This incorrect alignment in the side-by-side diff for review comments is quite annoying. Especially for the + button to add a new review comment. Personally, I switched to the unified diff view on my company instance just to work around this issue.

Does this seem like something in your wheelhouse maybe @silverwind, as you've been tackling some other UI issues related to the PR diff view lately?

[silverwind]

Possible, but personally I do not use side-by-side ever, so it's not a priority for me.

[wxiaoguang]

@jpraet I made more improvements in #23096 , I guess it's good enough now (I haven't fully tested it with various browsers), and I think it's safe for you to test it in your production environment.

If it looks good to you, please help to review. Thank you.