1 files changed, 39 insertions, 2 deletions
diff --git a/app/assets/stylesheets/page_bundles/issues_show.scss b/app/assets/stylesheets/page_bundles/issues_show.scss
index 9873a0121c0..ade649faaae 100644
--- a/app/assets/stylesheets/page_bundles/issues_show.scss
+++ b/app/assets/stylesheets/page_bundles/issues_show.scss
@@ -3,8 +3,8 @@
 .description {
   ul,
   ol {
-    /* We're changing list-style-position to inside because the default of outside
-     * doesn't move the negative margin to the left of the bullet. */
+    /* We're changing list-style-position to inside because the default of
+     * outside doesn't move negative margin to the left of the bullet. */
     list-style-position: inside;
   }
 
@@ -21,6 +21,43 @@
       inset-block-start: 0.3rem;
       inset-inline-start: 1rem;
     }
+
+    /* The inside bullet aligns itself to the bottom, which we see when text to the right of
+     * a multi-line list item wraps. We fix this by aligning it to the top, and excluding
+     * other elements adversely affected by this. Targeting ::marker doesn't seem to work. */
+    > *:not(code):not(input):not(.gl-label) {
+      vertical-align: top;
+    }
+
+    /* The inside bullet is treated like an element inside the li element, so when we have a
+     * multi-paragraph list item, the text doesn't start on the right of the bullet because
+     * it is a block level p element. We make it inline to fix this. */
+    > p:first-of-type {
+      display: inline-block;
+      max-width: calc(100% - 1.5rem);
+    }
+
+    /* We fix the other paragraphs not indenting to the
+     * right of the bullet due to the inside bullet. */
+    p ~ a,
+    p ~ blockquote,
+    p ~ code,
+    p ~ details,
+    p ~ dl,
+    p ~ h1,
+    p ~ h2,
+    p ~ h3,
+    p ~ h4,
+    p ~ h5,
+    p ~ h6,
+    p ~ hr,
+    p ~ ol,
+    p ~ p,
+    p ~ table:not(.code), /* We need :not(.code) to override typography.scss */
+    p ~ ul,
+    p ~ .markdown-code-block {
+      margin-inline-start: 1rem;
+    }
   }
 
   ul.task-list {