audio does not responsive on desktop mode

[Henglongung]

Describe the bug

On desktop mode with using vue-advanced-chat to making an customer support chat it got an issue which is audio that we have been send into the message box does not responsive it looking bad. i have also add attachment below

Steps to reproduce

1. Create a component and add the vue-advanced-chat to the project
2. change the width to 400px
3. sending chat with audio

Expected behavior

result: the audio should be responsive as the same as text and attachment

Screenshots

[ulfgebhardt]

Confirming this bug in v2.1.2. Same symptom as reported: the audio .vac-player-progress keeps its hard-coded width: 190px regardless of the container, so a <vue-advanced-chat> rendered inside a narrow wrapper (side panel, drawer, any flex item) on a desktop-sized viewport produces a waveform that overflows the message box by the width of the avatar + padding.

Root cause (for anyone debugging this):

1. .vac-player-progress { width: 190px } is hard-coded and never adapts to its parent.
2. The 50% → 80% message-box breakpoint relies on @media (max-width: 768px), i.e. viewport width, not container width — so a narrow wrapper on a wide window never gets the mobile box.
3. The component renders inside a Shadow DOM, so external CSS with !important or ::v-deep cannot reach .vac-player-progress (this is why The voice bar is too long #430 and Not able to apply styles to the vac-progress-bar #511 couldn't get a style override to apply).

Working workaround (Ocelot-Social/Ocelot-Social#9549) — inject a <style> element into the component's shadow root at mount time:

mounted() {
  this.$nextTick(() => this.injectShadowStyles())
}
// ...
methods: {
  injectShadowStyles() {
    const root = this.$el?.shadowRoot // or this.$refs.<yourRef>?.shadowRoot depending on wrapping
    if (!root) return
    const style = document.createElement('style')
    style.textContent = `
      .vac-player-bar { min-width: 0; }
      .vac-player-progress { width: auto; flex: 1 1 auto; min-width: 0; }
    `
    root.appendChild(style)
  },
}

Since .vac-player-bar is already display: flex, flipping .vac-player-progress from a fixed 190px to flex: 1 1 auto; min-width: 0 lets the waveform scale to whatever room the message box has — works on both wide and narrow layouts, no regression. May need to re-trigger the injection when messages (re-)render in some setups; gate it with an idempotent flag.

Longer-term this would ideally be fixed upstream by replacing the fixed width: 190px with flex: 1 1 auto; min-width: 0 on .vac-player-progress, and switching the message-box breakpoint to a container query (or a prop).

[aerovulpe]

Tracked as GA-017 in the V3 GA readiness control room (#580). Before RC4 authorization, confirm the installed candidate in a desktop viewport with a roughly 400 px or narrower component container and at normal widths. Acceptance is no horizontal overflow, a usable audio progress target, and no normal-width regression. Independent verification is assigned to @antoine92190. Orchestration changes are in #581.