Fix spacing and alignment issues within the search fields.

Review Request #13920 — Created June 3, 2024 and submitted — Latest diff uploaded

Information

Review Board
release-7.x

Reviewers

The Search field at the top of the page and the Filter field on the New
Review Request page both had their own visual alignment and spacing
issues, in part due to altered styling in Ink and bad browser defaults.

The styling for rb-c-search-field now uses a more appropriate font
size for the FontAwesome-based icon, and a more appropriate spacing
between it and the text.

The issues in the Filter field were due to the lack of a type=
attribute, and the lack of default styling for an <input> without
type=. As fixing this globally for all type-less inputs would alter
precedence rules for other styles, I've opted not to touch those for
now. Instead, we now set the Filter field to type="search" explicitly.

Tested in light and dark modes for both of these fields.

Diff Revision 1 (Latest)

Commits

First Last Summary ID Author
Fix spacing and alignment issues within the search fields.
The Search field at the top of the page and the Filter field on the New Review Request page both had their own visual alignment and spacing issues, in part due to altered styling in Ink and bad browser defaults. The styling for `rb-c-search-field` now uses a more appropriate font size for the FontAwesome-based icon, and a more appropriate spacing between it and the text. The issues in the Filter field were due to the lack of a `type=` attribute, and the lack of default styling for an `<input>` without `type=`. As fixing this globally for all type-less inputs would alter precedence rules for other styles, I've opted not to touch those for now. Instead, we now set the Filter field to `type="search"` explicitly.
3bddd24f73bf957e408ab5d9217ee4cfd6d0eee3 Christian Hammond
reviewboard/static/rb/css/ui/search-field.less
reviewboard/static/rb/js/newReviewRequest/views/repositorySelectionView.es6.js
Loading...