tl;dr I’ve created a theme component that appears to get around the problem but would like to validate the CSS / approach I’ve used.
Update
An update on this. I’ve created a simple theme component that I’m going to test live tomorrow but it looks like it makes Discourse Chat workable on iOS 12.5.
Shout-out to the good people at BrowserStack who graciously provided debug access to a cloud-based iPad running 12.x under their open-source program.
Whilst this solution seems workable, I’d really appreciate a review by anyone with real CSS knowledge as I’ve simply guessed and Google’d my way to this point.
What was happening?
I mentioned that the issue seemed to be somewhat ‘random’. It turns out that the size of the chat composer entry box is inversely proportionate to the entire height of the scrollable text (not just the visible text) in the chat messages container div.
So, if there aren’t many messages in a particular channel, the chat composer height appears normal. As more messages appear in the channel, so the chat composer height shrinks.
Additional issue
In addition to the shrinking textarea problem, I also noticed that the “back to channels” button (chevron / less than) was slightly out of alignment.
The solution?
For the “back to channels” button, the following CSS places it back in alignment…
div.topic-chat-float-container .chat-drawer .topic-chat-drawer-header {
align-items: center;
}
See…
Using BrowserStack I was able to target the shrinking chat composer container `div. I found that if I applied this CSS…
.chat-composer-container {
flex-shrink: 0;
}
…it maintains the height of the chat composer container no matter what the size of the chat content.
Like so…
I’m happy to maintain the theme component for my iPad users on 12.5, but would just like to know if this CSS approach is valid / optimum / dangerous.
Thanks!