Refactor SearchableDropdown with Fluent UI components, extract styles, and add tests

[Copilot]

• Replace native HTML with Fluent UI components (Stack, DefaultButton, Text)
• Extract inline styles to separate SearchableDropdown.styles.ts file
• Add unit tests for SearchableDropdown component (14 test cases, all passing)
• Verify behavior consistency for SwitchAccount and SwitchSubscription (AccountSwitcher tests pass)
• Optimize performance with useMemo for filtered items calculation
• Fix text alignment to match original UI (left-aligned placeholder and selected text)

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[nishthaAhujaa]

@copilot
please address all review feedback:

• Replace native HTML with Fluent UI components
• Extract inline styles to separate file
• Add unit tests for SearchableDropdown
• Verify behavior consistency

[Copilot]

@copilot
please address all review feedback:

• Replace native HTML with Fluent UI components
  ...

All review feedback has been addressed in commits 302b13a and eb2c560:

✅ Fluent UI components: Replaced native HTML elements with Stack, DefaultButton, and Text components
✅ Style extraction: Created SearchableDropdown.styles.ts with all styles organized by purpose
✅ Unit tests: Added 14 comprehensive test cases covering rendering, interactions, filtering, and edge cases - all passing
✅ Behavior consistency: Verified with existing AccountSwitcher tests (2/2 passing)
✅ Performance: Optimized with useMemo for filtered items calculation
✅ Security: CodeQL scan passed with 0 alerts

The SearchableDropdown component now follows Fluent UI design patterns and has full test coverage while maintaining backward compatibility with SwitchAccount and SwitchSubscription components.

[nishthaAhujaa]

@copilot it looks like the UI looks different than the previous pr can you make the Ui similar only like the placeholder texts and selected texts were left aligned not anymore

[Copilot]

@copilot it looks like the UI looks different than the previous pr can you make the Ui similar only like the placeholder texts and selected texts were left aligned not anymore

Fixed text alignment in commit 0c5a0e0. The placeholder and selected text are now left-aligned as in the original UI.

Changes made:

• Added flexContainer.justifyContent: "flex-start" to DefaultButton styles to align content to the left
• Added explicit textAlign: "left" to button label, list items, and empty message styles

All tests still passing (14/14 SearchableDropdown tests, 2/2 AccountSwitcher tests).