Fix issue description list item reordering indentation
What does this MR do and why?
This MR fixes indentation of list items in the issue description caused by the list item reorder feature.
As a result of the discussion in #367693 (comment 1040775469), we decided that we can remove the list-style-position: inside css declaration to fix various styling issues with the tradeoff that users will no longer be able to make the drag icon visible by hovering over the left of the bullet point.
Implementation-wise, we extend the width of the drag icon so that it always overlaps the li element so users can move from the li element to the drag icon without a gap (a gap would make the drag icon disappear).
Changelog: fixed
This MR is the same as !93451 (merged) but also addresses the post-merge regression in #370297 (closed) to ensure drag icons for ordered task lists are positioned correctly.
Screenshots or screen recordings
| before (notice the long text not aligning to the right of the bullet point) | after |
|---|---|
 |
 |
| Screen_Recording_2022-08-16_at_1.54.07_pm | Screen_Recording_2022-08-16_at_2.10.55_pm |
How to set up and validate locally
- Visit any issue such as
http://127.0.0.1:3000/h5bp/html5-boilerplate/-/issues/1 - Create list items in the description and test the MR
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.