RocketChat
Fix: Removed extra top space for audio and video messages to improve UI consistency
Brief Title
Removed Extra Space Above Audio and Video Messages
Acceptance Criteria fulfillment
- [X] Remove the unnecessary space above audio and video messages to make the UI consistent with text and file messages.
- [X] Verify that the change does not introduce any issues with other message types or UI elements.
Fixes #727 Fixes #768
Video/Screenshots
https://github.com/user-attachments/assets/db905263-3187-4e12-81ea-bdb789952665
PR Test Details
Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-728 after approval. Contributors are requested to replace <pr_number> with the actual PR number.
Hey @dhairyashiil, can you do one thing? just quote an audio or video message and show me the ui look.
Hey @dhairyashiil, can you do one thing? just quote an audio or video message and show me the ui look.
Hello Devansh (@devanshkansagra), when I tried to quote an audio or video message, I noticed that there was no space present, and the UI didn't look good.
I have fixed it now. Thank you for pointing it out.
I have attached the latest screenshots that were taken after the recent commit.
and
After the recently merged PRs,
The download ActionButton was not looking consistent with UI, I fixed it as well.
Before fixing it:
After fixing it:
Pls resolve conflicts
The conflicts have been resolved. Please review the changes. Thank you
Hay @dhairyashiil, have you tested it with other ui like curved variants?
Hay @dhairyashiil, have you tested it with other ui like curved variants?
Hello Devansh, I didn’t check that yesterday, but yes, for the curved variants, it looks consistent.
I just checked the case when a description is present for audio and video messages, and I noticed the download button wasn’t inline. I’ve handled this case and added conditional CSS:
Now the UI looks even more consistent.
Curved Variant (Aqua Breeze):
https://github.com/user-attachments/assets/819cb5b4-a52f-44dc-922f-b0dcda905e42
Hello @Spiral-Memory, I have resolved all the merge conflicts.
Here is the UI after the last commit:
https://github.com/user-attachments/assets/6e878532-baf3-44c9-bf9f-89310f2de3ee