Emoji Reactions Not Fitting on Mobile Screen
๐งพ Summary: When reacting with emojis on the mobile version of ArcBlock Marketplace, the reaction emojis are not properly displayed โ some are cut off, overflow their container, or are misaligned and donโt fit well on the screen.
๐งช Steps to Reproduce:
- Open ArcBlock Marketplace in a mobile browser.
- Navigate to a comment or discussion that supports emoji reactions.
- Tap to react using multiple emojis.
- Observe how the emojis are displayed in the UI.
๐ฅ Actual Result:
- Emojis overflow or extend outside their container.
- They may be partially visible or overlap other interface elements.
โ Expected Result:
- All reaction emojis should fit within their designated area.
- They should be properly wrapped, scaled, or aligned to avoid overflow and ensure full visibility.
โ๏ธ Possible Cause:
- Fixed width or height in the emoji container that doesnโt adapt to screen size.
- Lack of responsive design or CSS rules for smaller screens.
- Missing overflow wrap or
flex-wrapin layout for emoji components.
๐ Severity:
- UI / UX issue
- Severity: Low to Medium
- Priority: Medium
๐ก Suggested Fixes:
- Make emoji reaction container responsive โ allow wrapping or scrolling if there are many emojis.
- Use CSS rules like
flex-wrap: wrap;or similar for containers. - Ensure padding/margins around emojis are adjusted for mobile view.
- Test on different mobile aspect ratios and devices.