RocketChat
Feat: Adding mobile resposiveness
Brief Title Adding responsiveness to mobile devices for modals
Fixes #942
Video/Screenshots
https://github.com/user-attachments/assets/acaced68-cf06-4a43-81ea-39f09ec0f8ec
PR Test Details
Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-943 after approval.
Also, update your branch with latest changes in develop branch :
It has nothing to do with playwright, why playwright changes are being reflected here
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.
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 😥
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?
@Stpriyasharma
We've to look for a emoji alternative, for now, keep it smaller with search
See how it is implemented in rocket.chat
@Stpriyasharma @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
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
https://github.com/user-attachments/assets/619c3c46-e430-43e5-9401-fa2eb256bebf
i have made changes in recent commit
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
Hey @Spiral-Memory . I have made the changes and fixed the emoji picker for small screens .
https://github.com/user-attachments/assets/1c739fb4-1a83-4d48-9dda-11c8f90782ff
Hey @Stpriyasharma, I think it will be better to not jumping in search bar when emoji icon is pressed in toolbar, and emojipicker should not overlap on the message toolbar. Please confirm @Spiral-Memory.
Screencast from 2025-02-07 12-18-46.webm
Hey @Spiral-Memory . I have made the changes and fixed the emoji picker for small screens .
Recording.2025-02-03.121817.mp4
I can still see a lot of code repetition for media query, can we implement it in modal itself directly in ui-elements
hey @Spiral-Memory . please can you point out where you have seen code repetition . For modal i fixed in ui-elements and for other elements which is used in a specific file i made it responsive separate like audio and emoji-picker