[32766] Align checkboxes correctly (#8445)

* Align checkboxes correctly with long texts: prevent texts to wrap into a new line

* Take care of hierarchical todo items; use grid instead of flex layout

* Handle possible line breaks and text formatting

* Fix checkboxes alignment in comment section

* Align checkboxes to enumerations

* Break long words after checkboxes also in edit view

* Align enumerations in comment editor

app/assets/stylesheets/content/editor/_ckeditor.sass

@@ -119,6 +119,8 @@ label.todo-list__label
   margin-bottom: 0
   display: initial
   font-size: initial
+  float: left
+  width: 0
 
   > input
     margin-top: 0
@@ -128,6 +130,7 @@ label.todo-list__label
   margin-bottom: 0
   li
     list-style: none
+    word-break: break-word
 
 .ck-editor__editable[dir="rtl"]
   ol, ul

app/assets/stylesheets/content/editor/_markdown.sass

@@ -23,26 +23,15 @@ div.ck-editor__preview
 
   ul.task-list
     list-style: none
-    margin-left: 25px
+    margin-left: 40px
 
     .task-list-item
-      display: flex
-      flex-wrap: wrap
-      white-space: pre-wrap
-
+      *
+        vertical-align: top
       input
         height: 25px
-        margin-right: 5px
-
-      // Ensure nested task lists are wrapped
-      // by making nested lists 100% row width
-      ul.task-list
-        flex-basis: 100%
-        white-space: nowrap
-
-  // remove indentation of top-level task-list
-  > ul.task-list
-    margin-left: 0
+        position: absolute
+        margin-left: -25px
 
   // Style tables within figure.table
   figure.table

app/assets/stylesheets/content/work_packages/tabs/_activities.sass

@@ -65,7 +65,6 @@
 
 .comment ul
   list-style-type: disc !important
-  margin: 10px 0 0 12px !important
 
   li
     padding: 0 !important