Message bubble max-width breakpoint uses viewport width instead of container width

[ulfgebhardt]

Describe the bug

The .vac-message-box width is controlled by a @media query that checks the viewport width instead of the container width:

/* Desktop (viewport > 768px) */
.vac-message-wrapper .vac-message-box {
  flex: 0 0 50%;
  max-width: 50%;
}

/* Mobile (viewport <= 768px) */
@media only screen and (max-width: 768px) {
  .vac-message-wrapper .vac-message-box {
    flex: 0 0 80%;
    max-width: 80%;
  }
}

When the chat component is embedded in a narrow container (e.g. a 355px sidebar panel) on a wide viewport (>768px), the desktop rule applies and bubbles are limited to max-width: 50% of the container — roughly 177px. This is far too narrow to display message content comfortably.

This is the same root cause as #550 (audio player width): responsive rules are tied to viewport width instead of container width.

Steps to reproduce

1. Embed vue-advanced-chat in a fixed-width container of ~355px (e.g. a sidebar chat panel)
2. Open the page on a desktop browser with a viewport wider than 768px
3. Send a message with enough text to wrap across multiple lines
4. Observe that the message bubble only uses ~50% of the container width (~177px)

Expected behavior

Message bubbles should use up to ~80% of the container width, regardless of viewport size. In a 355px container, bubbles should be up to ~284px wide.

Screenshots

Device (please complete the following information)

• OS: Linux / reproducible on any OS
• Browser: Any browser with viewport > 768px
• Package version: 2.1.2

Additional context

Suggested fix

Replace the viewport-based @media query with a CSS @container query so the breakpoint responds to the actual chat container width:

.vac-col-messages {
  container-type: inline-size;
}

.vac-message-wrapper .vac-message-box {
  flex: 0 0 50%;
  max-width: 50%;
}

@container (max-width: 768px) {
  .vac-message-wrapper .vac-message-box {
    flex: 0 0 80%;
    max-width: 80%;
  }
}

@container queries have broad browser support (Chrome 105+, Firefox 110+, Safari 16+).

Alternatively, a ResizeObserver on the chat container could toggle a CSS class to switch between the two width modes.

Workaround

Since the component renders inside a shadow DOM, you can inject a <style> element into the shadow root to override the rule:

const shadowRoot = chatElement.shadowRoot
const style = document.createElement('style')
style.textContent = `.vac-message-wrapper .vac-message-box { flex: 0 0 80%; max-width: 80%; }`
shadowRoot.appendChild(style)

This is the same shadow DOM injection technique described in #550 for the audio player width issue.

Related issues:

• audio does not responsive on desktop mode #550 — audio does not responsive on desktop mode (same root cause: viewport-based sizing in narrow container)
• Custom styling, injecting css into shadow DOM ? #453 — Custom styling, injecting css into shadow DOM?
• cannot inject my own css file #457 — cannot inject my own css file
• Not able to apply styles to the vac-progress-bar #511 — Not able to apply styles to the vac-progress-bar
• CSS Style Modification Issue #570 — CSS Style Modification Issue
• Expose container of conversation #572 — Expose container of conversation