Rework Merge Request diff layout engine for better elasticity and customisation of viewing preferences

Context

The history of our MR Diffs hlayout as been evolving over the past few years following a very web-native layout model. First table-based then (now) is using CSS Grid. It is built following a very web-friendly approach and not in line with the experience of IDE and other native apps.

Its important to consider that our MR diffs layout currently supports these modes:

• Multiple file diffs
  • Inline
  • Parallel
• One file at a time
  • Inline
  • Parallel

Additionally, some other options that don't affect layout:

• With whitespace changes
• Without white spaces

However, in the future, we might want to allow option that do affect how layout is handled.

• Line wrapping options
• Fullscreen
• ...others?

Some of these might even involve customized behavior like horizontal scrolling for parallel mode of non-wrapped lines. As shown here: Example of Jetbrains (source)

Previous work

• Allow disabling of line wrapping in diff (#20159 - closed)
  • We took a stab at implementing line-wrapping preference but identified blockers while implementing. Reworking the layout engine as described in this epic is required to proceed with anything of the sort.
  • See: thread

Considerations

This effort is quite substantial and currently not immediately top of mind. We're documenting this for clarity and future planning.

Future reworks of diffs as a whole should attempt to address these layout concerns while maintaining the page performant and lightweight.

Known issues/restrictions

• Performance:Laying out the diff lines need to be very lightweight and fast.
• We need to display multiple diff files at once on the screen (listing multiple files at once)
• Each file has more than just diff lines within: notes, draft notes, code quality
• SourceGraph/Code intelligence relies on the current diffs to display reference information
• Current diffs are rendered using CSS Grid. Some limitations for descendants overflowing parents.
• Usability and accessibility challenges arise from introducing scrolling to the mix in a web-native layout flow. Please see this video and thread for more context.

More context, see thread: !109846 (comment 1295842774)