I think I have found the answer. I have been studying the template.css file, it has the following line:-
select.form-control:not([multiple]), select.inputbox:not([multiple]), select:not([multiple]) {
height: calc(2.25rem + 2px);
}
by changing the 2px to 24px, the size of the select box now matches the rest of the input fields and the names now appear as expected.
I have added this line to the custom CSS files in the front end of the template manager
select.form-control:not([multiple]), select.inputbox:not([multiple]), select:not([multiple]) {
height: calc(2.25rem + 24px);
}