Update focus border thickness on Search components

[kasya]

Updated focus thickness for Search and MultiSearch components.

Checklist

• I read and followed the contributing guidelines
• I ran make check-test locally and all tests passed
• I used AI for code, documentation, or tests in this PR

[coderabbitai]

Summary by CodeRabbit

• Style
  • Simplified focus visuals on search inputs (thinner focus ring, removed explicit focus border) for subtler feedback.
  • Standardized input backgrounds and dark-mode variants for consistent appearance.
  • Adjusted input spacing and preserved clear button/skeleton behavior to maintain interaction consistency.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

Updated Tailwind CSS classes on Search and MultiSearch input elements and adjusted unit test expectations to match the new class composition; changes are purely visual (CSS class edits), no logic or API changes.

Changes

Cohort / File(s)	Summary
Search & MultiSearch components frontend/src/components/Search.tsx, frontend/src/components/MultiSearch.tsx	Modified input element Tailwind classes: removed explicit focus:border utilities, changed focus ring from ring-2 to ring-1 (e.g., focus:ring-1 focus:ring-blue-500), added bg-white, adjusted dark-mode focus ring (dark:focus:ring-blue-300) and reordered padding/utilities. No logic changes.
Search unit test frontend/__tests__/unit/components/Search.test.tsx	Updated test assertions to match new className string for the input (focus ring thickness, bg-white, reordered padding classes) and preserved clear button/skeleton selectors where applicable.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Changes are consistent, low-density CSS edits across a small set of files.
• Pay attention to:
  • Unit test assertions matching exact className strings.
  • Dark-mode class correctness and focus ring color consistency.

Possibly related PRs

• Add unit tests for MultiSearch component #1896: Updates input styling in frontend/src/components/MultiSearch.tsx and adds related unit tests — directly related to these style changes.
• Test: added unit tests for SearchBar Component (#1886) #2023: Adjusts Search component and unit tests (including debounce/cancel behavior) and touches the same test files and class assertions.

Suggested reviewers

• arkid15r

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: updating focus ring thickness from 2px to 1px on Search and MultiSearch components.
Description check	✅ Passed	The description is related to the changeset, stating that focus thickness was updated for Search and MultiSearch components, which matches the actual styling modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch update-focus

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d4cb2de and 0d1858f.

📒 Files selected for processing (3)

• frontend/__tests__/unit/components/Search.test.tsx (1 hunks)
• frontend/src/components/MultiSearch.tsx (1 hunks)
• frontend/src/components/Search.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (3)

• frontend/tests/unit/components/Search.test.tsx
• frontend/src/components/Search.tsx
• frontend/src/components/MultiSearch.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Run backend tests
• GitHub Check: Run frontend unit tests
• GitHub Check: Run frontend e2e tests
• GitHub Check: CodeQL (javascript-typescript)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[arkid15r]

LGTM