uselotus/lotus

UI bug: Misaligned checkboxes on Developer Settings tab

djanda97 opened this issue · 3 comments

djanda97 commented

Describe the bug
The checkboxes on the Webhook URL modal are not aligned

To Reproduce
Steps to reproduce the behavior:

  1. Start the dev server by executing ./scripts/dev.sh
  2. Once the dev server is running, navigate to http://localhost:8000/settings/developer-settings
  3. Click the Add URL button near the Webhooks section of the page
  4. Once the Webhook URL modal appears, notice that the checkboxes are not aligned

Expected behavior
The checkboxes should be vertically and horizontally aligned

Screenshots

image

Desktop

  • OS: MacOS 13.2.1
  • Browser: Firefox
  • Version: 110.0
  • Browser: Safari
  • Version: 16.3
mnida commented

@djanda97 If you don't pick this up, I have another person who can fix it at the start of the week!

djanda97 commented

@mnida I don't have much experience with CSS, but I'd like to try fixing this one!

djanda97 commented

It appears that the Checkbox component provided by the antd library is implicitly applying an 8px left margin to the generated HTML elements:

image

Strangely, the 8px left margin only affects the last three checkboxes.

I was able to get the checkboxes aligned by setting the style prop of the Checkbox components to use a 0px left margin.