Apply responsive note styles to parallel diffs

What does this MR do?

• Apply responsive note styles to parallel diffs
  • Add notes-media mixin that inserts a side by side CSS rule that applies to notes in a parallel layout.

Inspired while working on https://gitlab.com/gitlab-org/gitlab-ce/issues/32801

Are there points in the code the reviewer needs to double check?

• Where should the notes-media mixin live?

Why was this MR needed?

• We only had a few response bare-necessities applied to parallel diff notes compared to normal notes. Things kicked in way too late given they are side by side.

Screenshots (if relevant)

.	Screenshot
Before
After

Does this MR meet the acceptance criteria?

• Tests
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

mentioned in merge request !11702 (merged)

marked the checklist item All builds are passing as completed

assigned to @annabeldunstone

changed the description

added 142 commits

• 821a8681...8e2fefc6 - 141 commits from branch master
• e797aba2 - Apply responsive note styles to parallel diffs

Compare with previous version

resolved all discussions

added 70 commits

• e797aba2...3605e430 - 69 commits from branch master
• ea504a71 - Apply responsive note styles to parallel diffs

Compare with previous version

resolved all discussions

mentioned in issue #32985 (closed)

resolved all discussions

approved this merge request

changed milestone to %9.3

merged

mentioned in commit 3ae070c9