MM-51488 Fixed checkboxes position in markdown lists (#30347)

- Special case of ordered lists

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/sass/components/_post.scss

@@ -1410,39 +1410,6 @@
                     font-size: 1em;
                 }
             }
-
-            li.list-item--task-list ul,
-            li.list-item--task-list ol {
-                margin-left: 20px;
-            }
-
-            li.list-item--task-list ul {
-                padding-left: 0;
-            }
-
-            li:not(.list-item--task-list) li.list-item--task-list,
-            li:not(.list-item--task-list) li.list-item--task-list ~ li {
-                margin-left: -20px;
-            }
-
-            li input[type="checkbox"]:disabled {
-                cursor: default;
-                vertical-align: top;
-            }
-        }
-
-        ul li.list-item--task-list,
-        ul li.list-item--task-list ~ li {
-            list-style-type: none;
-        }
-
-        ul li.list-item--task-list ~ li:not(.list-item--task-list) {
-            text-indent: 3px;
-
-            &::before {
-                margin-right: 8px;
-                content: "\2022";
-            }
         }
 
         ul + p,

webapp/channels/src/sass/layout/_markdown.scss

@@ -359,6 +359,23 @@ h6.markdown__heading {
     }
 }
 
+.markdown__list {
+    >li {
+        &.list-item--task-list {
+            list-style-type: none;
+
+            input[type="checkbox"] {
+                margin-left: -17px;
+                vertical-align: top;
+
+                &:disabled {
+                    cursor: default;
+                }
+            }
+        }
+    }
+}
+
 ol.markdown__list {
     display: table;
     padding: 0;
@@ -376,6 +393,18 @@ ol.markdown__list {
             text-align: right;
             word-break: keep-all;
         }
+        // Special rules for task items within ordered lists
+        &.list-item--task-list {
+            &::before {
+                // The counter is erased for task items
+                content: "";
+            }
+            input[type="checkbox"] {
+                // Margins are adjusted to align better the checkbox with the text
+                margin-right: 2px;
+                margin-left: -19px;
+            }
+        }
     }
 }