From 58438c362f2eb0d5cc300543b501dd5cda457f16 Mon Sep 17 00:00:00 2001
From: Lauryn Menard <lauryn.menard@gmail.com>
Date: Tue, 7 Dec 2021 18:09:52 +0100
Subject: [PATCH] documentation: Fix text wrapping and alignment of ordered
 lists.

Moves CSS rules that rely on list items in an ordered list being
wrapped in a `<p>` tag so that they apply to the list item itself.
Uses `position: absolute` to set the `::before` pseudo-element in
place and `position: relative` to adjust the list items so that they
do not overlap.

Ideally, when Safari supports the `content` property for `::marker`
pseudo-elements, this issue can be revisited.

Fixes #20440.
---
 static/styles/portico/markdown.css | 26 ++++++++++----------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/static/styles/portico/markdown.css b/static/styles/portico/markdown.css
index 7ba37ea96d..bdd796c1ad 100644
--- a/static/styles/portico/markdown.css
+++ b/static/styles/portico/markdown.css
@@ -112,10 +112,17 @@
         list-style: none;
 
         & > li {
+            position: relative;
+            vertical-align: top;
+            /* This needs to be wide enough for 2-digit numbers. */
+            padding-left: 33px;
+            top: -2px;
             counter-increment: item;
-            margin-bottom: 5px;
 
             &::before {
+                position: absolute;
+                top: 0;
+                left: 0;
                 content: counter(item);
                 display: inline-block;
                 vertical-align: top;
@@ -129,15 +136,6 @@
                 text-align: center;
             }
 
-            & > p {
-                display: inline-block;
-                vertical-align: top;
-                /* This needs to be wide enough for 2-digit numbers. */
-                max-width: calc(100% - 40px);
-                position: relative;
-                top: -2px;
-            }
-
             & > .codehilite,
             & > p:not(:first-child) {
                 padding-left: 24px;
@@ -149,7 +147,7 @@
             }
 
             & > ul {
-                padding-left: 20px;
+                margin-bottom: 5px;
             }
 
             .warn,
@@ -159,10 +157,6 @@
             }
         }
 
-        p {
-            margin: 0 0 2px;
-        }
-
         @media (width <= 500px) {
             margin-left: 0;
         }
@@ -189,7 +183,7 @@
             margin: 15px 10px;
 
             & > li {
-                margin: 5px 0;
+                margin: 2.5px 0;
             }
         }