diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index 6612abe79d..35936db416 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -1758,7 +1758,7 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
 
             <!-- Custom legend for multiple series -->
             <template #legend="{ legend }">
-              <div class="flex gap-x-6 gap-y-2 flex-wrap justify-center text-sm">
+              <div class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm">
                 <template v-if="isMultiPackageMode">
                   <button
                     v-for="datapoint in legend"
@@ -1766,15 +1766,17 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
                     :aria-pressed="datapoint.isSegregated"
                     :aria-label="datapoint.name"
                     type="button"
-                    class="flex gap-1 place-items-center"
+                    class="flex shrink-0 items-center gap-1 whitespace-nowrap"
                     @click="datapoint.segregate()"
                   >
-                    <div class="h-3 w-3">
+                    <div class="h-3 w-3 shrink-0">
                       <svg viewBox="0 0 2 2" class="w-full">
                         <rect x="0" y="0" width="2" height="2" rx="0.3" :fill="datapoint.color" />
                       </svg>
                     </div>
+
                     <span
+                      class="shrink-0 whitespace-nowrap"
                       :style="{
                         textDecoration: datapoint.isSegregated ? 'line-through' : undefined,
                       }"
@@ -1786,13 +1788,13 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
 
                 <!-- Single series legend (no user interaction) -->
                 <template v-else-if="legend.length > 0">
-                  <div class="flex gap-1 place-items-center">
-                    <div class="h-3 w-3">
+                  <div class="flex shrink-0 items-center gap-1 whitespace-nowrap">
+                    <div class="h-3 w-3 shrink-0">
                       <svg viewBox="0 0 2 2" class="w-full">
                         <rect x="0" y="0" width="2" height="2" rx="0.3" :fill="legend[0]?.color" />
                       </svg>
                     </div>
-                    <span>
+                    <span class="shrink-0 whitespace-nowrap">
                       {{ legend[0]?.name }}
                     </span>
                   </div>
@@ -1800,10 +1802,10 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
 
                 <!-- Estimation extra legend item -->
                 <div
-                  class="flex gap-1 place-items-center"
+                  class="flex shrink-0 items-center gap-1 whitespace-nowrap"
                   v-if="supportsEstimation || hasDownloadAnomalies"
                 >
-                  <svg viewBox="0 0 20 2" width="20">
+                  <svg viewBox="0 0 20 2" width="20" class="shrink-0">
                     <line
                       x1="0"
                       y1="1"
@@ -1814,7 +1816,9 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
                       stroke-linecap="round"
                     />
                   </svg>
-                  <span class="text-fg-subtle">{{ $t('package.trends.legend_estimation') }}</span>
+                  <span class="shrink-0 whitespace-nowrap text-fg-subtle">
+                    {{ $t('package.trends.legend_estimation') }}
+                  </span>
                 </div>
               </div>
             </template>
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index 7602331cc8..d43fa1c130 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -506,13 +506,13 @@ const chartConfig = computed<VueUiXyConfig>(() => {
             <template #legend="{ legend }">
               <div class="flex gap-4 flex-wrap justify-center pt-8">
                 <template v-if="legend.length > 0">
-                  <div class="flex gap-1 place-items-center">
-                    <div class="h-3 w-3">
+                  <div class="flex gap-1 shrink-0 items-center whitespace-nowrap">
+                    <div class="h-3 w-3 shrink-0">
                       <svg viewBox="0 0 2 2" class="w-full">
                         <rect x="0" y="0" width="2" height="2" rx="0.3" :fill="legend[0]?.color" />
                       </svg>
                     </div>
-                    <span>
+                    <span class="shrink-0 whitespace-nowrap">
                       {{ legend[0]?.name }}
                     </span>
                   </div>
diff --git a/package.json b/package.json
index 17b3d55a65..1e49c358e8 100644
--- a/package.json
+++ b/package.json
@@ -112,7 +112,7 @@
     "vite-plugin-pwa": "1.3.0",
     "vite-plus": "catalog:vite-plus",
     "vue": "3.5.42",
-    "vue-data-ui": "3.25.5",
+    "vue-data-ui": "3.25.6",
     "vue-router": "5.2.0"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1669a383dc..29f0f7b46f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -271,8 +271,8 @@ importers:
         specifier: 3.5.42
         version: 3.5.42(typescript-native-bridge@6.0.3-bridge.13.tsgo.7.0.2)
       vue-data-ui:
-        specifier: 3.25.5
-        version: 3.25.5(vue@3.5.42)
+        specifier: 3.25.6
+        version: 3.25.6(vue@3.5.42)
       vue-router:
         specifier: 5.2.0
         version: 5.2.0(@voidzero-dev/vite-plus-core@0.3.1)(@vue/compiler-sfc@3.5.42)(esbuild@0.28.1)(rolldown@1.2.4)(rollup@4.62.2)(vue@3.5.42)(webpack@5.108.4)
@@ -10630,8 +10630,8 @@ packages:
   vue-component-type-helpers@3.3.11:
     resolution: {integrity: sha512-LwcxzeliO9fkQcpJG0PoX8X5kmAhKmH9wkpDLxNabwzkQ9Zeib2YVHwFV4pcWmMLfXVfjr/dSV+DaJ3cIPgSNA==}
 
-  vue-data-ui@3.25.5:
-    resolution: {integrity: sha512-R+b6ejdPBVftZzk3q1HWyrfWi6D42K6F7iBoarnb35yZWbmlHaRSA5NI1Tp034BQtn+Q39SGAjY0rJa0lvA5hg==}
+  vue-data-ui@3.25.6:
+    resolution: {integrity: sha512-TY1NURL0f1LZKIZ2xOIVFK+SJEj8MGIjCkv/kUQZJHOADzIPLDY7QdWztn27mjysoYuImMJHLZ5AXnYBa5/6rg==}
     peerDependencies:
       jspdf: '>=3.0.1'
       vue: 3.5.42
@@ -23087,7 +23087,7 @@ snapshots:
 
   vue-component-type-helpers@3.3.11: {}
 
-  vue-data-ui@3.25.5(vue@3.5.42):
+  vue-data-ui@3.25.6(vue@3.5.42):
     dependencies:
       vue: 3.5.42(typescript-native-bridge@6.0.3-bridge.13.tsgo.7.0.2)
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 1c36f8bb58..ecb3347a23 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -48,6 +48,7 @@ minimumReleaseAgeExclude:
   - '@nuxt/nitro-server@4.5.2'
   - '@nuxt/schema@4.5.2'
   - '@nuxt/vite-builder@4.5.2'
+  - vue-data-ui@3.25.6
 
 minimumReleaseAgeExcludePrune: true