Fixed incorrect pairing of revisions fields & revision CSS (#4608)

<!--
Thanks for contributing to Hypha!

Please ensure your contributions pass all necessary linting/testing and
that the appropriate documentation has been updated.
-->

<!--
Describe briefly what your pull request changes. If this is resolving an
issue, please specify below via "Fixes #<Github Issue ID>"
-->
Fixes #I4607. Some basic improvements to the revision view, ensures that
fields are always in order and makes the CSS more consistent through the
revisions. This is the first of a few enhancements to the revision view.


## Test Steps
<!-- 
If step does not require manual testing, skip/remove this section.

Give a brief overview of the steps required for a user/dev to test this
contribution. Important things to include:
 - Required user roles for where necessary (ie. "As a Staff Admin...")
- Clear & validatable expected results (ie. "Confirm the submit button
is now not clickable")
- Language that can be understood by non-technical testers if being
tested by users
-->

- [ ] Ensure fields in the application revision view are in order and
paired correctly with their header
- [ ] Ensure the "altered" yellow margin appears on all relevant
elements, not just `<p>`

Author: wes-otf

hypha/apply/funds/views/revisions.py

@@ -75,6 +75,17 @@ class RevisionCompareView(DetailView):
     template_name = "funds/revisions_compare.html"
     pk_url_kwarg = "submission_pk"
 
+    # Specified to ensure template block order always aligns
+    named_block_order = [
+        "title",
+        "full_name",
+        "email",
+        "address",
+        "duration",
+        "value",
+        "organization",
+    ]
+
     def compare_revisions(self, from_data, to_data):
         self.object.form_data = from_data.form_data
         from_rendered_text_fields = self.object.render_text_blocks_answers()
@@ -99,9 +110,15 @@ def compare_revisions(self, from_data, to_data):
         return (required_fields, stream_fields)
 
     def render_required(self):
+        # Ensure named blocks are ordered according to the template
+        ordered_name_blocks = [
+            block
+            for block in self.named_block_order
+            if block in self.object.named_blocks
+        ]
         return [
             getattr(self.object, "get_{}_display".format(field))()
-            for field in self.object.named_blocks
+            for field in ordered_name_blocks
         ]
 
     def get_context_data(self, **kwargs):

hypha/static_src/tailwind/components/html-diff.css

@@ -1,8 +1,14 @@
 .html-diff {
-  --marker-border-width: 0.2em;
-  --marker-ms: -0.6em;
-  --marker-ps: 0.5em;
+  --marker-border-width: 3px;
+  --marker-ms: -10px;
+  --marker-ps: 8px;
 
+  :is(h1, h2, h3, h4, h5, h6):has(ins),
+  :is(h1, h2, h3, h4, h5, h6):has(del),
+  ul:has(ins),
+  ul:has(del),
+  ol:has(ins),
+  ol:has(del),
   p:has(ins),
   p:has(del) {
     border-inline-start: var(--marker-border-width) solid var(--color-warning);
@@ -36,7 +42,8 @@
     border-inline-start: var(--marker-border-width) solid var(--color-success);
   }
 
-  del {
+  del,
+  del * {
     @apply bg-error text-error-content;
   }