Describe the bug
When tapping on the people picker component on mobile iOS devices (doesn't seem to repro on tablet), the device zooms in to the people picker search box, which can take the user out of the flow of work.

Some research on the issue suggests that this occurs because the font-size of the input is less than 16px (https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone). Since there's no css custom property for font-size for the people picker, I'm unable to verify if this would fix the issue.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Tap on the people picker on an iOS mobile device and notice the zoom. Please reach out to me on Teams and I can provide a video and snapshots of this occurring.

Expected behavior
A clear and concise description of what you expected to happen.

There should be no zooming in on the people picker input as it cuts off part of the field and is distracting to the user.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS: [e.g. iOS] iOS
• Browser [e.g. edge, chrome, safari]
• Framework [e.g. react, vue, none] React
• Context [e.g. Microsoft Teams, SharePoint, Office Add-ins, Web] Teams
• Version [e.g. 0.1]
• Provider [e.g. Msal2Provider] (bonus if you share the provider config)

Additional context
Add any other context about the problem here.

If changing the font size to 16px or higher fixes the problem, a solution could be just to add a font-size css custom property so that folks can control their own destiny.