search

chatscope / chat-ui-kit-react

Build your own chat UI with React components in few minutes. Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.
https://chatscope.io
MIT License
1.34k stars 116 forks source link

How can I make the MessageInput responsive? #31

Closed SuppSoftAdminZ closed 3 years ago

SuppSoftAdminZ commented 3 years ago

The MessageInput component works/looks fine on my desktop. However, once I change my browser (Chrome) to render as an IPhone X, the Input text box shrinks down so far I can hardly see it. And anything you type in there is not viewable. The problem seems to be the Attach and Send buttons as the width of those do not shrink.

Note: For now, I am overriding the css class with this code which works fine. I would just prefer not to have to override the components if possible .cs-button--attachment{ width: 45px; }

.cs-button--send{ width: 45px; }

supersnager commented 3 years ago

@SuppSoftAdminZ I did some tests on Chrome desktop in the iPhone X mode, and also on iPhone X using the BrowserStack. Unfortunately, I can't reproduce it. Can you share a minimal repro example, please?

SuppSoftAdminZ commented 3 years ago

Thanks for looking into it. I'm good with the current solution using css