React+TS+Firebase聊天应用移动端部署后sendMessage组件显示异常求助

问题详情 #

我用React、TypeScript和Firebase开发了一款聊天应用，本地环境下不管是桌面还是移动端视图，运行都完全正常。但部署上线后，移动端出现了明显的布局问题：

• 未选择聊天用户时，sendMessage消息输入组件完全不可见；
• 一旦选中某个用户开始聊天，这个输入组件就会显示出来，直接把页面上的其他组件向上顶起，最后导致顶部的navbar被挤出屏幕视野。

本地正常状态、部署后移动端未选用户及选用户后的状态可以通过截图对比查看。

我试过用visibility: visible、flex-shrink: 0这类CSS属性强制让输入组件显示，但都没解决问题。

我知道可以给应用设置一个默认会话来绕过这个问题，但对于首次使用且还没有任何会话的新用户，该怎么处理才合理？

相关地址：

• 仓库：github.com/jisokoo/TS-React-Chat
• 线上版本：ts-react-chat.web.app

内容的提问来源于stack exchange，提问作者aubarb