diff --git a/src/components/Chapters.vue b/src/components/Chapters.vue
index 5638c6b1..e87e49f4 100644
--- a/src/components/Chapters.vue
+++ b/src/components/Chapters.vue
@@ -1,11 +1,6 @@
 <template>
     <h2 v-t="'video.chapters'" />
-    <div
-        :key="chapter.start"
-        v-for="chapter in props.chapters"
-        @click="$emit('seek', chapter.start)"
-        class="flex items-center mb-2 cursor-pointer w-sm"
-    >
+    <div :key="chapter.start" v-for="chapter in props.chapters" @click="$emit('seek', chapter.start)" class="chapter">
         <img :src="chapter.image" :alt="chapter.title" class="h-12" />
         <div class="ml-1">
             <span class="text-xl" v-text="chapter.title" />
@@ -15,6 +10,12 @@
     </div>
 </template>
 
+<style>
+.chapter {
+    @apply flex items-center mb-2 cursor-pointer w-sm max-w-90vw;
+}
+</style>
+
 <script setup>
 import { defineProps, defineEmits } from "vue";