Fix some display issues with the ListEditWidget.

Review Request #14462 — Created June 19, 2025 and submitted — Latest diff uploaded

Information

Djblets
release-5.x

Reviewers

This change fixes two things with the list edit widget, which is used
for the diffviewer syntax highlighting file type override configuration.

  1. In the case that the widget is used within a ConfigForms page, the
    30em width for input fields was causing the widget to bust out of the
    60em width of the config forms page. ConfigForms is desperately in
    need of a comprehensive redesign, but for now I've added some style
    overrides to remove the 30em width and instead apply flex-grow: 1.

  2. This change also swaps out the btn class for ink-c-button, giving
    us a better display when running in dark mode. While doing this, I've
    removed role="button" from the element, since that's implicit for
    <button> tags.

  • Viewed the widget in the context of a ConfigForms page and saw that it
    was now fitting nicely into the width of its container, and the "Add
    item" button looked nice in both light and dark modes.
  • Ran js-tests.

Diff Revision 2 (Latest)

orig
1
2

Commits

First Last Summary ID Author
Fix some display issues with the ListEditWidget.
This change fixes two things with the list edit widget, which is used for the diffviewer syntax highlighting file type override configuration. 1. In the case that the widget is used within a ConfigForms page, the 30em width for input fields was causing the widget to bust out of the 60em width of the config forms page. ConfigForms is desperately in need of a comprehensive redesign, but for now I've added some style overrides to remove the 30em width and instead apply `flex-grow: 1`. 2. This change also swaps out the `btn` class for `ink-c-button`, giving us a better display when running in dark mode. While doing this, I've removed `role="button"` from the element, since that's implicit for `<button>` tags. Testing Done: - Viewed the widget in the context of a ConfigForms page and saw that it was now fitting nicely into the width of its container, and the "Add item" button looked nice in both light and dark modes. - Ran js-tests.
74cf91dac2a05d300fb25a486e334ae40ee4dca7 David Trowbridge
djblets/forms/templates/djblets_forms/list_edit_widget.html
djblets/static/djblets/css/forms/list_edit.less
djblets/static/djblets/js/forms/views/tests/listEditViewTests.es6.js
Loading...