From a919556305b66b19906a5f5b1cc60bda8c7ca2cf Mon Sep 17 00:00:00 2001
From: husamMousa <88555163+husamMousa@users.noreply.github.com>
Date: Sat, 22 Aug 2026 12:21:29 +0300
Subject: [PATCH 1/2] fix(ChangelogVersion): reserve indicator gutter to
 prevent overlap

The `indicator` slot is `absolute start-0 w-32`, so it sits out of flow and
occupies the leftmost 8rem, while `container` is `mx-auto max-w-2xl` and
centers across the full root width without reserving that gutter. The
centered start offset is `(W - CW) / 2`, so it only clears the gutter once
the root is at least 928px wide with the default `max-w-2xl`. Because `lg:`
is a viewport breakpoint, a layout with sidebars trips this easily: the
viewport is >= 1024px while the component itself is only ~700-800px, and the
timeline runs under the version date and title.

Clamp the container to `calc(100% - 16rem)` at `lg`, gated on a new
`indicator` variant so `indicator: false` keeps the full width. 16rem is the
8rem gutter mirrored on both sides, since `mx-auto` splits freed space
evenly; reserving only 8rem would shift the box by 4rem and still overlap.
Using `w-` instead of `max-w-` keeps `max-w-2xl` as the binding cap when
there is room and lets a `ui.container` override still win, since
`max-width` beats `width`.

Resolves #6861
---
 src/runtime/components/ChangelogVersion.vue   |  3 +-
 src/theme/changelog-version.ts                |  7 +++
 .../ChangelogVersion-vue.spec.ts.snap         | 50 +++++++++----------
 .../ChangelogVersion.spec.ts.snap             | 50 +++++++++----------
 .../ChangelogVersions-vue.spec.ts.snap        | 10 ++--
 .../ChangelogVersions.spec.ts.snap            | 10 ++--
 6 files changed, 69 insertions(+), 61 deletions(-)

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 6de5390878..1944447f8c 100644
--- a/src/theme/changelog-version.ts
+++ b/src/theme/changelog-version.ts
@@ -39,6 +39,13 @@ 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.
+        container: 'lg:w-[calc(100%-16rem)]'
+      }
     }
   }
 })
diff --git a/test/components/__snapshots__/ChangelogVersion-vue.spec.ts.snap b/test/components/__snapshots__/ChangelogVersion-vue.spec.ts.snap
index 93b90211b3..96e8fafba1 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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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 93b90211b3..96e8fafba1 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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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-[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..1c39cb6629 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-[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-[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-[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-[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-[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..1c39cb6629 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-[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-[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-[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-[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-[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>

From aaabb2143cb2fd1c75217fc4874f4acafb8ede98 Mon Sep 17 00:00:00 2001
From: husamMousa <88555163+husamMousa@users.noreply.github.com>
Date: Sat, 22 Aug 2026 14:27:44 +0300
Subject: [PATCH 2/2] fix(ChangelogVersion): floor the reserved gutter width at
 50%

`calc(100% - 16rem)` resolves negative once the root is narrower than the
reservation itself, and CSS clamps a negative width to `0`, so the container
collapsed and the content disappeared on roots under 256px. Floor it at 50%
of the root so the container degrades gracefully instead.

The floor only binds below a 512px root, where the 8rem indicator gutter
cannot fit anyway; from 512px up the reservation is unchanged.
---
 src/theme/changelog-version.ts                |  4 +-
 .../ChangelogVersion-vue.spec.ts.snap         | 50 +++++++++----------
 .../ChangelogVersion.spec.ts.snap             | 50 +++++++++----------
 .../ChangelogVersions-vue.spec.ts.snap        | 10 ++--
 .../ChangelogVersions.spec.ts.snap            | 10 ++--
 5 files changed, 63 insertions(+), 61 deletions(-)

diff --git a/src/theme/changelog-version.ts b/src/theme/changelog-version.ts
index f87d53869f..b71fc572b0 100644
--- a/src/theme/changelog-version.ts
+++ b/src/theme/changelog-version.ts
@@ -44,7 +44,9 @@ export default (options: Required<ModuleOptions>) => ({
       true: {
         // Reserve the indicator gutter (`w-32`) on both sides so the centered container
         // never slides under the absolutely positioned indicator on narrow containers.
-        container: 'lg:w-[calc(100%-16rem)]'
+        // 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 1704fe9046..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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)] 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 1704fe9046..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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)]">
+  <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 lg:w-[calc(100%-16rem)] 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 1c39cb6629..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 lg:w-[calc(100%-16rem)]">
+      <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 lg:w-[calc(100%-16rem)]">
+      <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 lg:w-[calc(100%-16rem)]">
+      <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 lg:w-[calc(100%-16rem)]">
+      <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 lg:w-[calc(100%-16rem)]">
+      <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 1c39cb6629..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 lg:w-[calc(100%-16rem)]">
+      <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 lg:w-[calc(100%-16rem)]">
+      <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 lg:w-[calc(100%-16rem)]">
+      <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 lg:w-[calc(100%-16rem)]">
+      <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 lg:w-[calc(100%-16rem)]">
+      <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>