Oddities when captions menu and captions button nested in control

[streamworksaudio]

I have noticed some oddities when trying to add captions menu and captions to my player. Unless of course this is expected behaviour.

When using the sample code

<media-controller defaultsubtitles>

  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
    <track label="English" kind="captions" srclang="en" src='https://media-chrome.mux.dev/examples/vanilla/vtt/en-cc.vtt' />
  </video>

    <media-captions-menu hidden anchor="auto"></media-captions-menu>
    <media-captions-menu-button></media-captions-menu-button>

</media-controller>

Everything appears as it should - just as with the sample.

However when I use the same code, but have the menu and buttons nested in a control bar, the 'hidden' button is visible and is larger than it should be. If I click the buttons it reverts to normal.

<media-controller defaultsubtitles>

  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
    <track label="English" kind="captions" srclang="en" src='https://media-chrome.mux.dev/examples/vanilla/vtt/en-cc.vtt' />
  </video>

    <media-control-bar>

        <media-captions-menu hidden anchor="auto"></media-captions-menu>
        <media-captions-menu-button></media-captions-menu-button>

    </media-control-bar>

</media-controller>

Here is a screenshot of this code:

I am not sure if this expected behaviour. Is it not possible to put the caption menu and button in the control bar?

As a workaround I have some javascript setting the hidden attribute to these elements on page load which works, but feels like a bit of a hack.

[streamworksaudio]

OK I think I figured out where I went wrong.

If I put the menus outside of the control and only have the buttons in the control bar everything works as expected 😎.