Fix Layout of Chat Bubble: Adjust Position of Like Button

[rifkybujana]

Fix Layout of Chat Bubble: Adjust Position of Like Button

Description: The current layout of the chat bubble has an issue where the like button is positioned too low, causing it to touch the border of the bubble. We need to fix this by adjusting the position of the like button so that it is aligned properly and spaced evenly within the chat bubble.

Tasks:

1. Investigate the current layout of the chat bubble.
   • Analyze the code responsible for rendering the like button and its positioning.
   • Identify why the button is positioned too low and close to the bubble border.
2. Adjust the like button’s position:
   • Modify the layout to ensure proper padding/margin between the like button and the chat bubble border.
   • Ensure the button is aligned correctly (vertically and horizontally) relative to the chat bubble text.
3. Test the new layout:
   • Verify that the like button is properly spaced from the bubble border on various screen sizes and resolutions.
   • Ensure that the layout remains consistent when the chat bubble expands (e.g., for multiline text).
4. Update the UI design to maintain a clean, balanced look:
   • Ensure that the changes do not negatively affect the overall design of the chat bubbles (for both user and bot).
   • Test different screen sizes and ensure responsive behavior.
5. Add unit/UI tests:
   • Add tests to ensure the button remains positioned correctly across various scenarios.
6. Update documentation (if needed):
   • If there are any changes to layout guidelines or code, ensure that the documentation reflects this.

Acceptance Criteria:

• The like button is no longer touching the chat bubble border and is properly aligned.
• The layout is responsive and works on different screen sizes.
• The chat bubbles maintain a clean, consistent look, even for multiline messages.
• UI tests are in place to verify the like button’s position in the future.

Additional Context:

• The project uses ImGui for rendering, and the issue may be related to how padding, margins, or alignment are set within the chat bubble layout.
• Focus on maintaining the overall visual balance between the chat bubble text and any interactive elements (like button, reactions, etc.).