diff --git a/docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue b/docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue
index bd6174fd..c977f36d 100644
--- a/docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue
+++ b/docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue
@@ -29,6 +29,6 @@ const items: TimelineItem[] = [{
     :items="items"
     :ui="{ item: 'even:flex-row-reverse even:-translate-x-[calc(100%-2rem)] even:text-right' }"
     :default-value="2"
-    class="w-full translate-x-[calc(50%-2rem)]"
+    class="translate-x-[calc(50%-1rem)]"
   />
 </template>
diff --git a/docs/content/3.components/timeline.md b/docs/content/3.components/timeline.md
index 85b39155..528cc0c2 100644
--- a/docs/content/3.components/timeline.md
+++ b/docs/content/3.components/timeline.md
@@ -169,6 +169,7 @@ props:
       description: 'QA testing and performance optimization.'
       icon: 'i-lucide-check-circle'
   class: 'w-full'
+class: 'overflow-x-auto'
 ---
 ::