[BUG] Colour indicators cut off with horizontal scroll

[Jess-Alcantara]

Describe the bug
When checking changes in a file additions and deletions are highlighted in green and red. When scrolling across the colour cuts off so that it only fills the original size of the screen.

To reproduce
Steps to reproduce the behavior:

1. Open a repository with changes
2. Click on a file with changes so you are able to see coloured lines
3. Scroll horizontally - you should be able to see a cut off

Expected behavior / Acceptance criteria
The colour should fill the whole screen, even when scrolling horizontally.

Screenshots

Desktop (please complete the following information):

• MacOS

Related issues
#147

[lukethompsxn]

Could you please add a size estimation 😄

[hhagenson28]

Approved!

[lukethompsxn]

I can reproduce this on macOS.

Approved!

[emipeanz]

Approved

[KelseyRM]

Playing around with this I've discovered a few things that may be useful:

• each line is rendered inside its own div, but since these must fit inside the diff-panel div (despite usually being significantly longer) the div cuts off where the colour cuts off - the text past this is technically just overflow hence the lack of colour.
• if the overflow is set to 'auto' or 'scroll' for each line the colour reaches the end of the text, but each line is scrollable within itself (you cannot scroll the whole diff panel but rather each individual line can be horizontally scrolled to see all of the content). This isn't nice at all to use, but suggests that the current component structure doesn't allow for both the panel to be scrollable so that the ends of all lines of code can be seen, AND the div i.e. colour to extend to the end of the respective lines.

This means this fix will likely require reworking how the lines are rendered inside the diff panel, e.g. not having each one in it's own div or having a more nested div structure, with the end goal being the line divs all have the same length to match the longest line.