Menu icons too big

[thesn10]

After upgrading to v1.10.9 from v0.x, the menu icons are too big

Current Behavior:

Steps To Reproduce:

To import the css, i do:

import 'vidstack/bundle';

I am using WebComponets with vue and the vidstack vite plugin

<template>
  <media-player
    ref="player"
    :title="title"
    aspect-ratio="16/9"
    crossorigin
  >
    <media-provider>
      <media-poster v-if="thumbnail"
        class="vds-poster"
        :src="thumbnail"
        :alt="thumbnailAlt" />
      <source v-for="source in sources" :src="source.src" :type="source.type" />
      <track v-for="track in tracks ?? []"
        :src="track.src"
        :label="track.label"
        :srclang="track.srclang"
        :kind="track.kind"
        :default="track.default ?? false"
      />
    </media-provider>
+   <media-video-layout :thumbnails="storyboard"/>
  </media-player>
</template>

<script setup lang="ts">
import 'vidstack/bundle';
</script>

Environment:

• Framework: Vue
• Meta Framework: Nuxt
• Bundler: Vite
• Node: 21
• OS: Windows@11
• Browser: Opera (Chromium)

[mihar-22]

Hm, I'm not seeing this issue. You can try a few things:

1. Delete node_modules to clear any caches, install again, and see if the issue persists.

2. You can try upgrading to latest 1.11.2@next.

3. If nothing works, try to provide a repro and I'll look into it.

I'll reopen the issue if it persists and a repro is provided.

[thesn10]

I have found the cause The css selector is not specific enough and got overridden by my global svg default css:

You can leave the issue closed if you think the current specificity is not a problem Allthough it would'nt do any harm to increase the specificity of the menu item