Fixes #147 - Resize line changes panel

[hhagenson28]

Related Issue/Keyword:

Closes #147

Description:

After a lot of trial and error, I have been able to adjust the dimensions of the line changes panel so that:

• all line changes are now visible and are not hidden behind the command console
• the horizontal scroll bar is now visible for files with lengthy lines
• the whole panel is wider for better readability of the line changes

In order to achieve this I had to restructure how the repository name and branch name are shown in the header. These are now limited to the top line of the header with ellipsis (...) for the overflow but you can hover over the text to see their full names. This was done to ensure that the sizing of the header, footer and body content remains consistent and nothing is being hidden behind anything else.

Making these changes will make issue #279 easier to achieve as well.

Testing:

Steps for manual testing:

1. Open up a repo with modified files
2. View the line changes of a modified file and check that you can see all of the changes for the following:

• a one line change
• multiple line changes (enough changes that the vertical scroll bar is active)
• a change that occurs on a long line (in order to view the horizontal scroll bar)

3. Ensure that you can see the full repo and branch names by hovering over the text for these

None of the lines in the panel should be hidden behind the command console.

Thank you to @SheepySean for your help with the CSS and providing very helpful solutions!

(Please ignore all of the commits to do with the package-lock file, I don't know what its problem is)

Checklist:

• Latest master merged/rebased into your feature branch
• Tests covering all changes
• Meets the projects coding conventions
• No out of scope changes
• @Mentioned any relevant team members
• No failure when running the linter (npm run lint) - errors but not related to code I changed for this PR
• Included a relevant gif

[liamtbrand]

Note to reviewer(s): This is going to conflict with #315. Resolving these conflicts shouldn't be too bad, just have a look at the files changed and the reasons it should be pretty straight forward to resolve. Let me know if you need help.

[SamuelZheng11]

I have reviewed your file changes and they look clean :D, However graphical problem when I scroll across pass a certain point

Is this expected?

Tested on Windows 10, Chrome

[hhagenson28]

@SamuelZheng11 Yes, this issue with the colours being cut off has been noted in issue #204 and therefore, is not related to my changes.

[SamuelZheng11]

@SamuelZheng11 Yes, this issue with the colours being cut off has been noted in issue #204 and therefore, is not related to my changes.

Ah Ok I approve then

[hhagenson28]

@SamuelZheng11 the conflicts have now been fixed so you can merge this in too!

[SamuelZheng11]

Looks good, Ive run it again my machine and still works.
Ive cross-referenced with PR #315 and almost all changes are accounted for
Ive left a comment regarding changes to styles.css