feat: improve chat message bubble responsiveness and visual design

[adityayadav176]

Summary

Enhanced the chat message bubble UI to improve responsiveness, readability, and overall user experience across different screen sizes.

Changes Made

• Increased mobile responsiveness with adaptive bubble widths:

  • max-w-[90%] on mobile
  • max-w-[85%] on small screens
  • max-w-[75%] on medium and larger screens

• Improved text rendering using whitespace-pre-wrap to preserve line breaks.

• Added smoother visual appearance with:

  • shadow-md
  • hover:shadow-lg
  • transition-all
  • duration-200

• Enhanced bubble styling with rounded corners for a more modern chat interface.

• Improved readability and handling of long messages.

Benefits

• Better mobile experience
• Improved message readability
• Cleaner and more modern chat UI
• Better handling of long text content
• Consistent appearance across screen sizes

Closes #512

Summary by CodeRabbit

• Style
  • Enhanced chat message bubble styling with improved visual effects including shadow and hover states, responsive max-width breakpoints, and context-aware rounded corners for better message differentiation.
  • Refined message image and audio player styling with improved sizing and presentation.
  • Updated read receipt and status indicator styling with better spacing and visual clarity.

[coderabbitai]

Warning

Review limit reached

@adityayadav176, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 56 minutes and 3 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 17b5192c-cbd8-42a0-95df-ffbd13b2f60c

📥 Commits

Reviewing files that changed from the base of the PR and between 4a9ee75 and b42f78b.

📒 Files selected for processing (1)

• frontend/components/chat/MessageBubble.jsx

📝 Walkthrough

Walkthrough

MessageBubble component styling was refined to improve visual hierarchy and responsiveness. The main bubble now features multi-line template styling with shadow and hover transitions, responsive width constraints, and directional border radius. Message images and audio players received updated sizing classes, while read-receipt styling now conditionally sets text color based on message direction.

Changes

Message Bubble Visual Enhancement

Layer / File(s)

Summary

Chat Bubble Styling Refinements frontend/components/chat/MessageBubble.jsx

Main bubble container expanded with shadow, hover transitions, and responsive max-width breakpoints; corner rounding made conditional on isMine. Message image updated with explicit md:max-w-sm sizing. Audio player receives focused sizing class w-full max-w-xs h-10 mb-1. Read-receipt footer styling uses template string with conditional text colors (text-primary-content vs text-base-content) based on message direction and shared opacity-70.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested labels

enhancement, type:design, quality:exceptional, level:intermediate

Poem

A bubble so fine, with shadows that glow,
Rounded and responsive, in tailwind's flow,
Images and audio, now styled just right,
Read receipts gleaming with proper contrast bright! 🐰✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes made to the MessageBubble component: improved responsiveness with adaptive breakpoints and enhanced visual design with shadows and hover effects.
Linked Issues check	✅ Passed	The changes address all key coding requirements from issue #512: adaptive widths for responsiveness [#512], shadow effects [#512], improved styling for readability [#512], rounded corners [#512], and maintained consistency between sent/received messages [#512].
Out of Scope Changes check	✅ Passed	All changes are directly related to the MessageBubble component styling objectives in issue #512; no unrelated modifications were introduced.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/components/chat/MessageBubble.jsx`:
- Line 82: The onClick in the MessageBubble component currently calls
window.open(msg.image, "_blank") which leaves window.opener reachable; update
the onClick handler (the arrow function where window.open is invoked) to open
the image with a feature string including "noopener,noreferrer" (e.g. pass the
third argument to window.open) or otherwise use a safe anchor with rel="noopener
noreferrer" to prevent access to window.opener and suppress the referrer.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: aee6e634-4489-4197-83d8-891279b90a5f

📥 Commits

Reviewing files that changed from the base of the PR and between 48e8f3e and 4a9ee75.

📒 Files selected for processing (1)

• frontend/components/chat/MessageBubble.jsx

[adityayadav176]

H! @UTKARSHH20
Implemented the requested UI enhancements for chat message bubbles by improving responsiveness, readability, and visual styling. Updated bubble widths for different screen sizes, improved text wrapping behavior, and added modern shadow/transition effects to provide a cleaner chat experience.

Closes #512

[adityayadav176]

H! @UTKARSHH20
Plz Merge This PR I Am Completed And Resolve this bug