Skip to content

Fix alignment of description diff history delete button

Chad Lavimoniere requested to merge 476552-remove-description-history-button-alignment-is-off-for-work-item-description-diff into master

What does this MR do and why?

Replace custom scss with tailwind util classes and fix alignment of "Remove description hustory" button (it seems to have been put out of alignment when top and bottom margin was added to its sibling <pre>).

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Description Before After
Legacy issue or MR image image
Legacy issue or MR (description is only 1 line long and delete button is shown) image image.png
Legacy issue or MR (description is only 1 line long and delete button is not shown) image image
Legacy issue or MR (hover) image image
Work item image image
Work item (description is only 1 line long and delete button is shown) image image.png
Work item (description is only 1 line long and delete button is not shown) image image
Work item (hover) image image

How to set up and validate locally

Work items

  1. Create a new task on a issue
  2. Open the task in a new tab
  3. Add a "hello world" to the task's description
  4. Click Compare with previous version on the Activity feed item about the description edit
  5. The button will be 4px from the top, right and bottom edges of the gray diff box. The diff box is only tall enough to accommodate the single line of text.
  6. Copy the URL and open it in an incognito window
  7. Repeat step 4 above
  8. You will see that the delete button does not appear, and the diff box is only tall enough to contain the single line of diff text.
  9. Close the incognito window.
  10. In the tab you were in for steps 3-6, edit the description again and add several lines of text.
  11. Repeat step 4 above.
  12. You will see that the remove button is the same distance from the top and right edges of the gray diff box.

Legacy issuables and MRs

Legacy issueables and MRs use the same component, so it is not necessary to test in both places.

Create either a legacy issuable or an MR with a blank description, then repeat steps 3 through 12 above with the legacy issuable or MR.

Related to #476552

Edited by Chad Lavimoniere

Merge request reports