Merge branch '26118-482771-clavimoniere-markdown-footnotes' into 'master'

Markdown footnote improvements

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/164929



Merged-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Approved-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Approved-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Co-authored-by: Chad Lavimoniere <clavimoniere@gitlab.com>

app/assets/javascripts/issues/show/components/description.vue

@@ -183,8 +183,9 @@ export default {
     },
     renderSortableLists() {
       // We exclude GLFM table of contents which have a `section-nav` class on the root `ul`.
+      // We also exclude footnotes, which are in an `ol` inside a `section.footnotes`.
       const lists = this.$el.querySelectorAll?.(
-        '.description .md > ul:not(.section-nav), .description .md > ul:not(.section-nav) ul, .description ol',
+        '.description .md > ul:not(.section-nav), .description .md > ul:not(.section-nav) ul, .description :not(section.footnotes) > ol',
       );
       lists?.forEach((list) => {
         if (list.children.length <= 1) {

app/assets/stylesheets/framework/typography.scss

@@ -861,3 +861,31 @@ wbr {
 :root {
   --code-editor-font: #{$monospace-font};
 }
+
+/**
+ * FOOTNOTES
+ */
+ section.footnotes {
+  position: relative;
+  padding-top: $gl-spacing-scale-5;
+  margin-top: $gl-spacing-scale-7;
+  font-size: $gl-font-size-12;
+
+  &::before {
+    content: '';
+    width: 16rem;
+    max-width: 100%;
+    border-top: 1px solid $border-color;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  ol > li {
+    margin-inline-start: $gl-spacing-scale-6;
+
+     p {
+      margin-block-end: 0;
+     }
+  }
+}