Fix no spacing after lists in documentation text

This commit adds missing vertical margin paragraphs that appear after
lists. It also changes vertical margin gap to match the font size along
with refactoring that makes paragraph gap modification easier to
understand.

src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue

@@ -100,20 +100,27 @@ $text-size: 0.75em; // Lower looks bad on Firefox
       }
     }
   }
-  /*
-    Different browsers have different <p>, we should even this out.
-    See CSS 2.1 specification https://www.w3.org/TR/CSS21/sample.html.
-  */
-  p {
+  @mixin set-paragraph-vertical-gap($paragraph-vertical-gap) {
+    p {
+      /*
+        Remove default browser margin on paragraphs to ensure:
+          1. A markdown text represented as a list (e.g. <ul>, <ol>) has same vertical spacing as a standalone paragraph (</p>).
+          2. The first paragraph in a sequence (first `<p>` usage) does not introduce top spacing.
+          3. Uniformity, so margin can be set consistently across browsers.
+      */
+      margin: 0;
+    }
     /*
-      Remove surrounding padding so a markdown text that is a list (e.g. <ul>)
-      has same outer padding as a paragraph (</p>).
+      Introduce spacing between successive elements and paragraphs.
+      E.g., spacing between two paragraphs (`p`), paragraphs after lists (<ul>, <ol>)...
     */
-    margin: 0;
-    + p {
-      margin-top: 1em;
+    * {
+      + p {
+        margin-top: $paragraph-vertical-gap;
+      }
     }
   }
+  @include set-paragraph-vertical-gap($text-size);
   ul {
     // CSS default is 40px, if the text is a bulletpoint, it leads to unexpected padding.
     padding-inline-start: 1em;