Skip to content

UI: Adjust "Add New" search bar layout and provider dropdown caret styling - #125

Merged
robertlordhood merged 1 commit into
Chaptarr:developfrom
jberlyn:fix/add-new-search-layout
Sep 5, 2026
Merged

UI: Adjust "Add New" search bar layout and provider dropdown caret styling#125
robertlordhood merged 1 commit into
Chaptarr:developfrom
jberlyn:fix/add-new-search-layout

Conversation

@jberlyn

@jberlyn jberlyn commented Sep 4, 2026

Copy link
Copy Markdown
Contributor

Problem

On the Add New screen in the UI, the search bar elements were awkwardly arranged:

  • The search text box clear button ("X") was placed after the metadata provider dropdown (Goodreads / Audiobooks / Hardcover) rather than directly attached to the search input it clears.
  • The provider dropdown was sandwiched between the search input and the clear button instead of appearing as a separate filter control to the right.
  • The provider dropdown caret (arrow) was positioned right up against the right border of the box due to native select rendering and fixed width constraints, leaving awkward spacing.

Change summary

  • Reordered search input controls: Moved the clear button (.clearLookupButton) to attach directly to the right side of the search text input (.searchInput), forming a cohesive search box group with the search icon.
  • Separated provider dropdown: Positioned the metadata provider dropdown (.providerSelect) to the right of the search input group with standard spacing and full border radius.
  • Customized dropdown caret:
    • Replaced native select arrow with a styled FontAwesome caret down icon (icons.CARET_DOWN) with pointer-events: none.
    • Set appearance: none on the select input to hide the browser-default menulist arrow.
    • Positioned the caret 16px from the right edge with generous right padding (padding-right: 40px) to prevent text overlap and balance with the 16px left padding.
    • Allowed dynamic width sizing (width: auto) instead of a fixed width.

Screenshots

Before

Screenshot 2026-09-04 at 7 38 50 pm

After

Screenshot 2026-09-04 at 7 54 00 pm

Test summary

  • Built production frontend bundle with Webpack (yarn build) and ran TypeScript typecheck (yarn typecheck).
  • Deployed and tested UI changes live on a local Chaptarr container instance.
  • Verified search input, typing, enter/submit, clear button ("X") functionality, provider selection dropdown, and visual layout/caret alignment across themes.

@jberlyn jberlyn changed the title Fix Add New search bar layout and provider dropdown caret styling UI: Adjust "Add New" search bar layout and provider dropdown caret styling Sep 4, 2026
@robertlordhood
robertlordhood merged commit 25ce89d into Chaptarr:develop Sep 5, 2026
4 checks passed
@robertlordhood

Copy link
Copy Markdown
Contributor

Ty for the screenshot! I pulled it and built it and it looks way better. Appreciate you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants