diff --git a/src/runtime/components/ChangelogVersion.vue b/src/runtime/components/ChangelogVersion.vue
index e2b147564f..1a092be73e 100644
--- a/src/runtime/components/ChangelogVersion.vue
+++ b/src/runtime/components/ChangelogVersion.vue
@@ -99,7 +99,8 @@ const [DefineDateTemplate, ReuseDateTemplate] = createReusableTemplate<{ hidden?
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.changelogVersion || {}) })({
-  to: !!props.to || !!props.onClick
+  to: !!props.to || !!props.onClick,
+  indicator: !!props.indicator || !!slots.indicator
 }))
 
 // eslint-disable-next-line vue/no-dupe-keys
diff --git a/src/theme/changelog-version.ts b/src/theme/changelog-version.ts
index faa9a7ebc6..b71fc572b0 100644
--- a/src/theme/changelog-version.ts
+++ b/src/theme/changelog-version.ts
@@ -39,6 +39,15 @@ export default (options: Required<ModuleOptions>) => ({
       true: {
         date: 'lg:hidden'
       }
+    },
+    indicator: {
+      true: {
+        // Reserve the indicator gutter (`w-32`) on both sides so the centered container
+        // never slides under the absolutely positioned indicator on narrow containers.
+        // The `50%` floor keeps the container from collapsing to `0` when the root is
+        // narrower than the reservation itself.
+        container: 'lg:w-[max(50%,calc(100%-16rem))]'
+      }
     }
   }
 })
diff --git a/test/components/__snapshots__/ChangelogVersion-vue.spec.ts.snap b/test/components/__snapshots__/ChangelogVersion-vue.spec.ts.snap
index 5fa4aa8393..adf68e7818 100644
--- a/test/components/__snapshots__/ChangelogVersion-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChangelogVersion-vue.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`ChangelogVersion > renders with actions slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->
     <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
       <!--v-if-->Actions slot
@@ -25,7 +25,7 @@ exports[`ChangelogVersion > renders with as correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -40,7 +40,7 @@ exports[`ChangelogVersion > renders with authors correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->
     <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
       <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
@@ -65,7 +65,7 @@ exports[`ChangelogVersion > renders with authors slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->
     <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
       <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">Authors slot</div>
@@ -82,7 +82,7 @@ exports[`ChangelogVersion > renders with badge correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
         <!--v-if--></span>
@@ -105,7 +105,7 @@ exports[`ChangelogVersion > renders with badge object correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
         <!--v-if--></span>
@@ -128,7 +128,7 @@ exports[`ChangelogVersion > renders with badge slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <div data-slot="meta" class="flex items-center gap-3 mb-2">Badge slot
         <!--v-if-->
@@ -150,7 +150,7 @@ exports[`ChangelogVersion > renders with body slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->Body slot
     <!--v-if-->
   </div>
@@ -165,7 +165,7 @@ exports[`ChangelogVersion > renders with class correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -179,7 +179,7 @@ exports[`ChangelogVersion > renders with date correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <div data-slot="meta" class="flex items-center gap-3 mb-2 lg:hidden">
         <!--v-if--><time datetime="2025-01-01T00:00:00.000Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Jan 1, 2025</time>
@@ -201,7 +201,7 @@ exports[`ChangelogVersion > renders with date slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <div data-slot="meta" class="flex items-center gap-3 mb-2 lg:hidden">
         <!--v-if-->
@@ -224,7 +224,7 @@ exports[`ChangelogVersion > renders with description correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
@@ -244,7 +244,7 @@ exports[`ChangelogVersion > renders with description slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
@@ -264,7 +264,7 @@ exports[`ChangelogVersion > renders with description slot correctly 2`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
@@ -284,7 +284,7 @@ exports[`ChangelogVersion > renders with footer slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->
     <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">Footer slot</div>
   </div>
@@ -299,7 +299,7 @@ exports[`ChangelogVersion > renders with header slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">Header slot</div>
     <!--v-if-->
   </div>
@@ -314,7 +314,7 @@ exports[`ChangelogVersion > renders with image correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
@@ -336,7 +336,7 @@ exports[`ChangelogVersion > renders with image slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
@@ -353,7 +353,7 @@ exports[`ChangelogVersion > renders with image slot correctly 1`] = `
 exports[`ChangelogVersion > renders with indicator slot correctly 1`] = `
 "<article data-slot="root" class="relative">
   <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">Indicator slot</div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -368,7 +368,7 @@ exports[`ChangelogVersion > renders with title correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
@@ -390,7 +390,7 @@ exports[`ChangelogVersion > renders with title slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
@@ -412,7 +412,7 @@ exports[`ChangelogVersion > renders with title slot correctly 2`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
@@ -434,7 +434,7 @@ exports[`ChangelogVersion > renders with to & image correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
@@ -454,7 +454,7 @@ exports[`ChangelogVersion > renders with to correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -469,7 +469,7 @@ exports[`ChangelogVersion > renders with ui correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-xl">
+  <div data-slot="container" class="flex flex-col mx-auto lg:w-[max(50%,calc(100%-16rem))] max-w-xl">
     <!--v-if-->
     <!--v-if-->
   </div>
diff --git a/test/components/__snapshots__/ChangelogVersion.spec.ts.snap b/test/components/__snapshots__/ChangelogVersion.spec.ts.snap
index 5fa4aa8393..adf68e7818 100644
--- a/test/components/__snapshots__/ChangelogVersion.spec.ts.snap
+++ b/test/components/__snapshots__/ChangelogVersion.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`ChangelogVersion > renders with actions slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->
     <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
       <!--v-if-->Actions slot
@@ -25,7 +25,7 @@ exports[`ChangelogVersion > renders with as correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -40,7 +40,7 @@ exports[`ChangelogVersion > renders with authors correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->
     <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
       <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
@@ -65,7 +65,7 @@ exports[`ChangelogVersion > renders with authors slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->
     <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
       <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">Authors slot</div>
@@ -82,7 +82,7 @@ exports[`ChangelogVersion > renders with badge correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
         <!--v-if--></span>
@@ -105,7 +105,7 @@ exports[`ChangelogVersion > renders with badge object correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
         <!--v-if--></span>
@@ -128,7 +128,7 @@ exports[`ChangelogVersion > renders with badge slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <div data-slot="meta" class="flex items-center gap-3 mb-2">Badge slot
         <!--v-if-->
@@ -150,7 +150,7 @@ exports[`ChangelogVersion > renders with body slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->Body slot
     <!--v-if-->
   </div>
@@ -165,7 +165,7 @@ exports[`ChangelogVersion > renders with class correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -179,7 +179,7 @@ exports[`ChangelogVersion > renders with date correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <div data-slot="meta" class="flex items-center gap-3 mb-2 lg:hidden">
         <!--v-if--><time datetime="2025-01-01T00:00:00.000Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Jan 1, 2025</time>
@@ -201,7 +201,7 @@ exports[`ChangelogVersion > renders with date slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <div data-slot="meta" class="flex items-center gap-3 mb-2 lg:hidden">
         <!--v-if-->
@@ -224,7 +224,7 @@ exports[`ChangelogVersion > renders with description correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
@@ -244,7 +244,7 @@ exports[`ChangelogVersion > renders with description slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
@@ -264,7 +264,7 @@ exports[`ChangelogVersion > renders with description slot correctly 2`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
@@ -284,7 +284,7 @@ exports[`ChangelogVersion > renders with footer slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->
     <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">Footer slot</div>
   </div>
@@ -299,7 +299,7 @@ exports[`ChangelogVersion > renders with header slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">Header slot</div>
     <!--v-if-->
   </div>
@@ -314,7 +314,7 @@ exports[`ChangelogVersion > renders with image correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
@@ -336,7 +336,7 @@ exports[`ChangelogVersion > renders with image slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
@@ -353,7 +353,7 @@ exports[`ChangelogVersion > renders with image slot correctly 1`] = `
 exports[`ChangelogVersion > renders with indicator slot correctly 1`] = `
 "<article data-slot="root" class="relative">
   <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">Indicator slot</div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -368,7 +368,7 @@ exports[`ChangelogVersion > renders with title correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
@@ -390,7 +390,7 @@ exports[`ChangelogVersion > renders with title slot correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
@@ -412,7 +412,7 @@ exports[`ChangelogVersion > renders with title slot correctly 2`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
@@ -434,7 +434,7 @@ exports[`ChangelogVersion > renders with to & image correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <div data-slot="header" class="">
       <!--v-if-->
       <!--v-if-->
@@ -454,7 +454,7 @@ exports[`ChangelogVersion > renders with to correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+  <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
     <!--v-if-->
     <!--v-if-->
   </div>
@@ -469,7 +469,7 @@ exports[`ChangelogVersion > renders with ui correctly 1`] = `
       <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
     </div>
   </div>
-  <div data-slot="container" class="flex flex-col mx-auto max-w-xl">
+  <div data-slot="container" class="flex flex-col mx-auto lg:w-[max(50%,calc(100%-16rem))] max-w-xl">
     <!--v-if-->
     <!--v-if-->
   </div>
diff --git a/test/components/__snapshots__/ChangelogVersions-vue.spec.ts.snap b/test/components/__snapshots__/ChangelogVersions-vue.spec.ts.snap
index c49cfb2ca5..b0427f338d 100644
--- a/test/components/__snapshots__/ChangelogVersions-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChangelogVersions-vue.spec.ts.snap
@@ -14,7 +14,7 @@ exports[`ChangelogVersions > renders with as correctly 1`] = `
           <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
         <div data-slot="header" class="">
           <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
             <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
@@ -58,7 +58,7 @@ exports[`ChangelogVersions > renders with class correctly 1`] = `
           <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
         <div data-slot="header" class="">
           <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
             <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
@@ -109,7 +109,7 @@ exports[`ChangelogVersions > renders with indicator slot correctly 1`] = `
           <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
         <div data-slot="header" class="">
           <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
             <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
@@ -153,7 +153,7 @@ exports[`ChangelogVersions > renders with ui correctly 1`] = `
           <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
         <div data-slot="header" class="">
           <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
             <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
@@ -197,7 +197,7 @@ exports[`ChangelogVersions > renders with versions correctly 1`] = `
           <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
         <div data-slot="header" class="">
           <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
             <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
diff --git a/test/components/__snapshots__/ChangelogVersions.spec.ts.snap b/test/components/__snapshots__/ChangelogVersions.spec.ts.snap
index c49cfb2ca5..b0427f338d 100644
--- a/test/components/__snapshots__/ChangelogVersions.spec.ts.snap
+++ b/test/components/__snapshots__/ChangelogVersions.spec.ts.snap
@@ -14,7 +14,7 @@ exports[`ChangelogVersions > renders with as correctly 1`] = `
           <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
         <div data-slot="header" class="">
           <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
             <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
@@ -58,7 +58,7 @@ exports[`ChangelogVersions > renders with class correctly 1`] = `
           <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
         <div data-slot="header" class="">
           <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
             <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
@@ -109,7 +109,7 @@ exports[`ChangelogVersions > renders with indicator slot correctly 1`] = `
           <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
         <div data-slot="header" class="">
           <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
             <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
@@ -153,7 +153,7 @@ exports[`ChangelogVersions > renders with ui correctly 1`] = `
           <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
         <div data-slot="header" class="">
           <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
             <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
@@ -197,7 +197,7 @@ exports[`ChangelogVersions > renders with versions correctly 1`] = `
           <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
         </div>
       </div>
-      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
+      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl lg:w-[max(50%,calc(100%-16rem))]">
         <div data-slot="header" class="">
           <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
             <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>