Feat: Adding mobile resposiveness

[Stpriyasharma]

Brief Title Adding responsiveness to mobile devices for modals

Fixes #942

Video/Screenshots

Recording.2025-02-01.120329.mp4

PR Test Details

Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-943 after approval.

[Spiral-Memory]

Can we please have smaller Emoji box with no search in mobile

[Spiral-Memory]

Also, update your branch with latest changes in develop branch :

It has nothing to do with playwright, why playwright changes are being reflected here

[Spiral-Memory]

Why the same code is being repeated so many times, can we just make modal itself mobile responsive from ui-elements

[Stpriyasharma]

yeah i have tried but changes are not reflecting from there

[dhairyashiil]

Can we please have smaller Emoji box with no search in mobile

Hello @Spiral-Memory , actually, on mobile, we should have a search feature, right? Even more so than on larger screens, because mobile screens are smaller, and it's harder to find emojis there (based on my personal experience). I think we should keep the search feature on mobile as well.

[Stpriyasharma]

I have made the emoji picker small in my recent commit

[Spiral-Memory]

Can we please have smaller Emoji box with no search in mobile

Hello @Spiral-Memory , actually, on mobile, we should have a search feature, right? Even more so than on larger screens, because mobile screens are smaller, and it's harder to find emojis there (based on my personal experience). I think we should keep the search feature on mobile as well.

You are correct @dhairyashiil
But, actually in mobile version, the emoji should take the place of keyboard, with search feature

Not with the popups 😥

[Stpriyasharma]

Can we please have smaller Emoji box with no search in mobile

Hello @Spiral-Memory , actually, on mobile, we should have a search feature, right? Even more so than on larger screens, because mobile screens are smaller, and it's harder to find emojis there (based on my personal experience). I think we should keep the search feature on mobile as well.

You are correct @dhairyashiil But, actually in mobile version, the emoji should take the place of keyboard, with search feature

Not with the popups 😥

should i remove search bar?

[Spiral-Memory]

@Stpriyasharma

We've to look for a emoji alternative, for now, keep it smaller with search

[Spiral-Memory]

See how it is implemented in rocket.chat

@Stpriyasharma @dhairyashiil

[Spiral-Memory]

Anyone can work on that, as a separate PR

In this PR, keep search but make the emoji popup smaller for all screens whichever looks good

[dhairyashiil]

Anyone can work on that, as a separate PR

In this PR, keep search but make the emoji popup smaller for all screens whichever looks good

Okay, Got it. Thanks! I will look into it then

[Stpriyasharma]

Recording.2025-02-02.160003.mp4

i have made changes in recent commit

[Spiral-Memory]

Great @Stpriyasharma

Can you please make the requested changes too ?

There is a lot of code repetition.. there is a package named ui-elements.. that have the modal component I think, you can directly make it mobile responsive

Instead of repeating code everywhere modal is used

[Stpriyasharma]

ok @Spiral-Memory . i will make the changes