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
Screenshots or screen recordings
| before (notice the long text not aligning to the right of the bullet point) | after |
|---|---|
 |
 |
Screencast (my GDK is slow so it took a while to update locally after every reorder):
Screen_Recording_2022-07-28_at_12.46.23_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.