Fix: Removed extra top space for audio and video messages to improve UI consistency

[dhairyashiil]

Brief Title

Removed Extra Space Above Audio and Video Messages

Acceptance Criteria fulfillment

• Remove the unnecessary space above audio and video messages to make the UI consistent with text and file messages.
• Verify that the change does not introduce any issues with other message types or UI elements.

Fixes #727
Fixes #768

Video/Screenshots

without.space.audio.and.video.messages.mp4

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.

[devanshkansagra]

Hey @dhairyashiil, can you do one thing? just quote an audio or video message and show me the ui look.

[dhairyashiil]

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

[Spiral-Memory]

Pls resolve conflicts

[dhairyashiil]

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:

[dhairyashiil]

Pls resolve conflicts

The conflicts have been resolved. Please review the changes.
Thank you

[devanshkansagra]

Hay @dhairyashiil, have you tested it with other ui like curved variants?

[dhairyashiil]

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.

[dhairyashiil]

Curved Variant (Aqua Breeze):

margin.for.download.button.according.to.description.mp4

[dhairyashiil]

Hello @Spiral-Memory, I have resolved all the merge conflicts.

Here is the UI after the last commit:

fixed.UI.mp4