diff --git a/app/assets/javascripts/issues/show/components/description.vue b/app/assets/javascripts/issues/show/components/description.vue index 99847ee9232f2d585bfa574f84f317d4a9dc24ed..e98a65605d94ddfffaaa70edfb0fdbd73addbbf9 100644 --- a/app/assets/javascripts/issues/show/components/description.vue +++ b/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) { diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 783b254aa5be274eac74f6a0a8b15d936c1cdb35..35446bbac8665fd3e4c915a9bee94dae34d81710 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/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; + } + } +}