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

[odkhang]

Fixes #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]

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:
  • Enable or disable the Sourcery-generated pull request summary or reviewer's guide;
  • Change the review language;
• You can always contact us if you have any questions or feedback.

[odkhang]

reaction bar not expanded

expanded

[sourcery-ai]

Hey @odkhang - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider avoiding the use of !important in CSS as it can lead to specificity issues. Try restructuring your selectors for better specificity instead.
• The z-index of 9000 seems arbitrarily high. Consider implementing a z-index management system to avoid potential layering issues in the future.
• There's some commented-out code in the diff. If this code is no longer needed, it's best to remove it entirely rather than leaving it commented out.

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment to tell me if it was helpful.}

[sourcery-ai]

suggestion: Consider using a lower z-index value

While it's important to ensure the reactions bar is visible, a z-index of 9000 seems unnecessarily high. Consider using a lower value that still achieves the desired stacking order without potentially conflicting with other high z-index elements.

Suggested change

	z-index: 9000
	z-index: 100

[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