Bug: Large images overflow message bubbles on mobile #6

Description

Large images in chat messages overflow their message bubbles on mobile devices, breaking the layout.

Screenshot

Current Behavior

• Images extend beyond the message bubble boundaries
• Horizontal overflow visible
• Layout breaks on narrow screens

Expected Behavior

• Images should be constrained to fit within message bubbles
• Maintain aspect ratio while scaling down
• Possibly add tap-to-expand for full size view

Proposed Fix

.message-bubble img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

Or with container constraint:

.message-content img {
  max-width: min(100%, 300px);
  height: auto;
  object-fit: contain;
}

Environment

• Device: Mobile (various)
• Viewport: ~400px width
• Image in screenshot: Large desktop screenshot shared in chat

Additional Considerations

• Add lightbox/modal for viewing full-size images
• Consider lazy loading for image-heavy chats
• Thumbnail generation for large images