Ensure checkboxes in ProseMirror are display: block
What does this MR do and why?
Ensure checkboxes in ProseMirror are display: block.
As of Chrome 144, task item checkboxes in the editor are appearing as (unusable) vertical bars. This had been affecting Firefox users for a while, but now none are spared. Turns out the input is inheriting a display: inline from somewhere, somehow, only in ProseMirror. We use all: unset and some other fun things, and I think PM may even bring its own CSS. DevTools did not elucidate on why — just noticed the different computed display property and figured that might be it — but this does fix it.
References
Fixes Checkboxes are shown as quotation in rich text ... (#558265).
Screenshots or screen recordings
| Before | After |
|---|---|
|
|
The regular (non-editor) display is unaffected and looks like this before and after:
How to set up and validate locally
- Open the rich-text editor on your favourite test issue, MR or comment, and add some task items using the
button. Note they are unusable. - Check out this branch. Your dev server hot-loads the new CSS. Everything works!
Or maybe it doesn't and you need to restart some things, but either way it should be fixed.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.