### 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](/uploads/727783bc2951b39ff432a93e6d2554f1/Screen_Recording_2023-03-02_at_00.52.50.mov) ([source](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/109846#note_1297826479)) ### Previous work * https://gitlab.com/gitlab-org/gitlab/-/issues/20159+ * 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](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/109846#note_1295842774) ### 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](https://gitlab.com/gitlab-org/gitlab/uploads/9a190f0177e48a33f1cdf03b84651441/video2354417891__1_.mp4) and [thread](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/109846?view=parallel#note_1297569996) for more context. More context, see thread: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/109846#note_1295842774