RocketChat / EmbeddedChat

An easy to use full-stack component (ReactJS) embedding Rocket.Chat into your webapp
https://www.npmjs.com/package/@embeddedchat/react
107 stars 214 forks source link

MessageBox is Not Responsive for Minimize mode #513

Open Akshun-01 opened 3 months ago

Akshun-01 commented 3 months ago

The Message Box is not Responsive for Minimized mode of EC

When we use @ or / then the mention and command Modals take space and the message box disappears. This should not happen at least on the default screen sizes of EC (Minimized and Maximized mode)

Steps to reproduce:

  1. Use @ or / to bring up mention or command menu
  2. Observe the Message Box

Expected behavior:

Even on smaller screen Message Box should be visible. image

Actual behavior:

The Message Box disappears when modal is triggered. image

Akshun-01 commented 3 months ago

While fixing this issue, I saw another bug. The mention menu is scrollable and arrow keys can be used to iterate through it but it does not shift, so that the currently selected item is in the modal window

https://github.com/RocketChat/EmbeddedChat/assets/93793691/386ca62f-42c2-4138-b5f5-adea78415f88

Akshun-01 commented 3 months ago

Also unlike the mention menu, the command menu does not have the feature to scroll with the help of arrow keys

image

Spiral-Memory commented 3 months ago

Great issue bro !

Akshun-01 commented 3 months ago

Thanks! ^^ Any feedback or changes? Would be great to have your insights.

Spiral-Memory commented 3 months ago

Not right now. Complete your work, then I'll review it and let you know if we find anything interesting.