Cracked it:
/* 'height' set the height of the textbox on mobile. Will appear next to the keyboard. */
@media screen and (max-width: 540px) and (max-width: 780px) {
.wideInputPromptInputEl {
width: 30rem;
max-width: 100%;
height: 3rem;
}
}
At the moment I’m syncing appearance and snippets with Sync, so the snippet is turned on everywhere. I wasn’t really familiar with ‘screen’ - I only use basic css on simple web pages - but I guess the selector is casing the screen size and that block defines a size that’s smaller than my mobile screen width. So I’ve not really solved the platform specific bit directly, rather coincidentally.
I’ll leave the thread open in case someone has the patience to write out how to case for platform, or if I get a moment to dig into it more myself.