fix: ChatInput Formatter Tool UI for small screens

[abirc8010]

Brief Title

Moved formatters, video and file attachment to popover menu for small screens

Acceptance Criteria fulfillment

• Implemented a media query (@media(max-width: 400px)) to render the VideoMessageRecorder inside the popover.
• Wrapped the formatters (bold, italic, strike, code, multiline) inside the popover when screen width is below 400px.
• Adjusted the chatToolMap logic to move the file upload into the popover for smaller screens.

Video/Screenshots

Screencast.from.2024-12-19.00-36-52.webm

Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-693 after approval. Contributors are requested to replace <pr_number> with the actual PR number.

[devanshkansagra]

Hey @abirc8010 it looks very good, but a suggestion you just put only formatters in that 3 dot menu. it would be better for user to find audio, video, and file upload buttons if they are displayed and visible on chatformatting toolbar. also you can see in layout editor, the formatters are not adjustable, and audio video and file upload are adjustable. the code I shared to you in that merged pr is based on this feature

[abirc8010]

@devanshkansagra I have considered moving the video and files to 3-dot menu so that clicking the audio message does not cause other icons (video, file) to be shifted outside the toolbar.

Screencast.from.2024-12-18.11-16-22.webm

[devanshkansagra]

then it might be difficult to edit layout of embeddedchat using layout_editor, or else do one thing, try to remove the margins from sides(left and right) of chat input box on small screen keeping only formatters in 3 dots. just for visualization how it would look, whether it will look consistent or not?

[abirc8010]

Screencast.from.2024-12-19.00-36-52.webm

@devanshkansagra @Spiral-Memory will it be ok to make the message box occupy the entire width ?

[Spiral-Memory]

Hi @abirc8010 and @devanshkansagra ,

Let’s make it configurable. In mobile mode, let the user (the one setting up EC) decide what they want to keep visible and which options should go into the three-dot menu, similar to how this is configurable in the theme object.

@devanshkansagra , maybe you can connect with @abirc8010 to guide him on this or collaborate together on it.

[devanshkansagra]

Sure

[abirc8010]

Hey @devanshkansagra @Spiral-Memory
Would this kind of behaviour be better ?
I am keeping the emoji fixed , and by default the formatters will be inside the popOver menu , user can shuffle the ordering , I am keeping 5 items inside the menu and 3 items outside to maintain consistency.
One can drag out an item from the popOver menu to outside.
Functionality is achieved using dnd-kit as in layout_editor

Screencast.from.2024-12-24.14-18-10.webm