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.