For the closed dropdown, you have only two options: either make the dropdown wider or use a smaller font. The behavior you are seeing is the native behavior of the browser, so it will always be displayed like that.
Regarding the open dropdown (the list view), you can present it as you currently have it with two rows, or you can make the list wider instead of narrower as you have it now, or alternatively, you can use a smaller font.
This is a general guide, and it's possible that instead of using a <select>
element, you may need to use just a <div>
element with JavaScript for the dropdown effect.
Now, for your specific case, I notice that the toggle takes up a lot of space and seems a bit redundant. So, I think you can use something like this:
<label>Allow Virtual Appointments</label>
<select>
<option>Yes, in-person and virtual appointments</option>
<option>Virtual appointments only</option>
<option>No, do not allow virtual appointments</option>
</select>
This way, you still have the user selection, just getting rid of an additional element, improving usability and pattern recognition, which reduces cognitive load.