Controls component alignment problem in Webkit

[snmabaur]

Hi

I'm trying to put the fullscreen control in the top right corner of the video player, for that I write these lines

<Controls fullwidth pin="topRight" justify="end">
    <FullscreenControl/>
</Controls>

the pin="topRight" alone isn't working on any of my browsers but with the justify="end" I can position it correctly on Chrome and Firefox. On Safari the fullscreen icon is still positioned at the top left corner.

When I write justify="flex-end" it works well but there is a typescript error and I can't build the app

error TS2322: Type '"flex-end"' is not assignable to type '"center" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | undefined'.

I've reproduced this behaviour locally with the following steps

yarn create vite Framework: vue Variant: vue-ts yarn add @vime/core @vime/vue-next

add to App.vue

<Player ref="player">
    <Video crossorigin="">
        <source data-src="./src/assets/video/sample.mp4"/>
    </Video>
    <Ui>
        <Controls fullwidth pin="topRight" justify="end">
            <FullscreenControl/>
        </Controls>
    </Ui>
</Player>