Mobile View of reactions partly off-screen when translation option is active

[odkhang]

Fixes https://github.com/fossasia/eventyay-video/issues/205

Summary by Sourcery

Fix the issue where the reactions bar is partly off-screen on mobile view when the translation option is active. Enhance the layout and positioning of elements within the ReactionsBar and AudioTranslationDropdown components for better user experience.

Bug Fixes:

• Adjust the positioning of the reactions bar to prevent it from being partly off-screen when the translation option is active on mobile view.

Enhancements:

• Modify the dimensions and positioning of elements within the ReactionsBar component for better alignment and visibility.
• Update the AudioTranslationDropdown component to improve layout and spacing.

[sourcery-ai[bot]]

Reviewer's Guide by Sourcery

This pull request addresses the issue of the mobile view of reactions being partly off-screen when the translation option is active. The changes include adjusting the layout and positioning of the reactions bar and its components, updating the AudioTranslationDropdown component layout, and reordering components in the room view for better UI flow.

File-Level Changes

Files	Changes
webapp/src/components/ReactionsBar.vue webapp/src/views/rooms/item.vue	Adjusted the layout and positioning of the reactions bar and its components to ensure they are properly aligned and visible, especially when the translation option is active.
webapp/src/components/AudioTranslationDropdown.vue webapp/src/views/rooms/item.vue	Updated the AudioTranslationDropdown component layout and integrated it near the reactions bar for a cohesive user experience.

---

Tips

- Trigger a new Sourcery review by commenting `@sourcery-ai review` on the pull request. - Continue your discussion with Sourcery by replying directly to review comments. - You can change your review settings at any time by accessing your [dashboard](https://app.sourcery.ai): - Enable or disable the Sourcery-generated pull request summary or reviewer's guide; - Change the review language; - You can always [contact us](mailto:support@sourcery.ai) if you have any questions or feedback.

[odkhang]

reaction bar not expanded

expanded

[mariobehling]

Please share screenshots

[mariobehling]

Currently it is like that and there is a lot of unused white space. Therefore the minimisation/expansion is not really nceessary, is it?

Expected would be something like this

[odkhang]

Hi @mariobehling, here the screenshot

minimisation/expansion is not really nceessary, is it?

-> okay, I will disable expand for reaction bar, make it expanded by default