[Bug]: fix styling of verison select (cross-platform)

[kgryte]

Description

Encountered a bug when viewing the API documentation on an iOS device where the styling of the version <select> element was incorrect.

Could consider a common approach to style a wrapper underneath the <select> element and thus allowing a custom (and consistent) arrow across devices.

Because we'd still be using the <select> element to display options, we'd retain web accessibility, while also ensuring that the <select> element has similar styling irrespective of view context.

Related Issues

No.

Questions

No.

Demo

N/A

Reproduction

- view API docs on an iOS device and attempt to use the side menu version filter.

Expected Results

Consistent styling.

Actual Results

Inconsistent styling.

Environments

N/A

Browser Version

No response

Node.js / npm Version

No response

Platform

No response

Checklist

• Read and understood the Code of Conduct.
• Searched for existing issues and pull requests.

[kgryte]

In the settings menu, we use the custom select technique described above. Could use it for reference.

www/src/components/top-nav/settings/index.jsx

Lines 197 to 207 in 8d4a50a

	<div className="settings-select-wrapper">
	<select
	className="settings-select"
	onChange={ this._onThemeChange }
	>
	<option value="light">Light</option>
	<option value="dark">Dark</option>
	</select>
	<div className="settings-select-custom">
	<ChevronDownIcon className="settings-select-custom-icon"/>
	</div>