fix(ui): improve alignment of clear and dropdown indicator buttons in select based fields

[danicaleroo]

What / Why

Clear buttons (X) and dropdown indicators in select-based fields had alignment issues. They were neither vertically centered within their containers nor aligned with adjacent icons, creating inconsistent visual appearance across different field types that use select inputs (date fields, relationship fields, number fields with hasMany, etc.).

Changes introduced

• packages/ui/src/elements/ReactSelect/ClearIndicator/index.scss
  • Added display: flex to .clear-indicator for proper button alignment
• packages/ui/src/elements/DatePicker/index.scss
  • Added display: flex to &__clear-button for consistent alignment
• packages/ui/src/elements/[DropdownPath]/index.scss
  • Added display: flex to dropdown indicator class for consistent alignment

Behavior after the fix

• Clear buttons (X) in all select-based fields are now properly centered vertically
• Dropdown indicators are now properly aligned with other field elements
• Consistent visual appearance across all field types that utilize select inputs
• Improved user experience with better visual hierarchy and professional appearance

How to test manually

1. Run pnpm dev fields
2. Test various select-based field types:
   • Date fields
   • Relationship fields
   • Number fields with hasMany
   • Any other fields using select components
3. Observe that both X buttons and dropdown arrows are now properly centered vertically
4. Verify consistent alignment across different field types and screen sizes

Screenshots

[JarrodMFlesch]

@danicaleroo can you merge main into this so the tests will pass. Looks good though, thanks!

[danicaleroo]

My bad. Everything should be ok now 🙌🏻

[JarrodMFlesch]

We had another hiccup with flaky tests. Merging main again will resolve the upload test suite. Then we can merge and get this into the next release!