From 1baa7a42b1910991e216dda28c44a8bd03544d25 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 13 Feb 2026 20:01:06 +0100
Subject: [PATCH 01/20] Install middle ellipsis package

---
 package-lock.json | 10 ++++++++++
 package.json      |  1 +
 2 files changed, 11 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 001c7435d6f..8d7eeb4918a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
       "name": "statamic",
       "dependencies": {
         "@davidenke/marked-text-renderer": "^3.0.0",
+        "@dynamic-middle-ellipsis/core": "^1.0.2",
         "@floating-ui/dom": "^1.6.0",
         "@he-tree/vue": "^2.10.0-beta.2",
         "@hoppscotch/vue-toasted": "^0.1.0",
@@ -338,6 +339,15 @@
         "marked": "^15.0.8"
       }
     },
+    "node_modules/@dynamic-middle-ellipsis/core": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@dynamic-middle-ellipsis/core/-/core-1.0.2.tgz",
+      "integrity": "sha512-vMIQaKvojcKAAwSfHyE+aR2wVyo4UMP61Z34HQw+FyrENWi4Tf+Xyl2DBtP/76RVsbgLjtCJmkiA/+yZxaraAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.3.tgz",
diff --git a/package.json b/package.json
index 5ee5f6ea33e..34141e60c23 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@davidenke/marked-text-renderer": "^3.0.0",
+    "@dynamic-middle-ellipsis/core": "^1.0.2",
     "@floating-ui/dom": "^1.6.0",
     "@he-tree/vue": "^2.10.0-beta.2",
     "@hoppscotch/vue-toasted": "^0.1.0",

From 4bc7bfff889a644208e5d022e26e048791de4024 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 13 Feb 2026 20:01:29 +0100
Subject: [PATCH 02/20] Create truncated text component

---
 packages/cms/src/ui.js                       |  1 +
 resources/js/components/ui/TruncatedText.vue | 29 ++++++++++++++++++++
 resources/js/components/ui/index.js          |  1 +
 3 files changed, 31 insertions(+)
 create mode 100644 resources/js/components/ui/TruncatedText.vue

diff --git a/packages/cms/src/ui.js b/packages/cms/src/ui.js
index 6b276d43130..2ea1cb98bbe 100644
--- a/packages/cms/src/ui.js
+++ b/packages/cms/src/ui.js
@@ -117,6 +117,7 @@ export const {
     TimePicker,
     ToggleGroup,
     ToggleItem,
+    TruncatedText,
     Widget,
     registerIconSet,
     registerIconSetFromStrings,
diff --git a/resources/js/components/ui/TruncatedText.vue b/resources/js/components/ui/TruncatedText.vue
new file mode 100644
index 00000000000..350ec2e44ea
--- /dev/null
+++ b/resources/js/components/ui/TruncatedText.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import createMiddleEllipsisUtils from '@dynamic-middle-ellipsis/core';
+
+const props = defineProps({
+    text: { type: String, required: true },
+});
+
+const truncated = ref(null);
+let cleanup = null;
+
+onMounted(() => {
+    const truncateOnResize = createMiddleEllipsisUtils();
+    console.log(props.text, truncated.value.innerText, truncated.value.innerText);
+
+    cleanup = truncateOnResize({
+        targetElement: truncated.value,
+        originalText: props.text,
+    });
+});
+
+onUnmounted(() => {
+    cleanup?.();
+});
+</script>
+
+<template>
+    <div ref="truncated" v-text="text" :title="text"></div>
+</template>
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index aa0127f5660..efe4cfd5060 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -85,6 +85,7 @@ export { default as Textarea } from './Textarea.vue';
 export { default as TimePicker } from './TimePicker/TimePicker.vue';
 export { default as ToggleGroup } from './Toggle/Group.vue';
 export { default as ToggleItem } from './Toggle/Item.vue';
+export { default as TruncatedText } from './TruncatedText.vue';
 
 export { default as Avatar } from "./Avatar.vue";
 export { default as CreateForm } from "./CreateForm.vue";

From 788da3df85cde5409449774b8465d5d2f93f8df1 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 13 Feb 2026 20:02:14 +0100
Subject: [PATCH 03/20] Truncate asset filename

---
 resources/js/components/assets/Browser/Grid.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index c3513ce3fd7..f673deb6915 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -168,7 +168,9 @@
                         </ContextMenu>
                     </Context>
                 </ItemActions>
-                <div class="asset-filename" v-text="truncateFilename(asset.basename)" :title="asset.basename" />
+                <div class="asset-filename">
+                    <TruncatedText :text="asset.basename" />
+                </div>
             </div>
         </section>
 
@@ -193,7 +195,8 @@ import {
     DropdownMenu,
     DropdownLabel,
     DropdownItem,
-    DropdownSeparator
+    DropdownSeparator,
+    TruncatedText
 } from '@ui';
 import { injectListingContext } from '@/components/ui/Listing/Listing.vue';
 import ItemActions from '@/components/actions/ItemActions.vue';
@@ -217,6 +220,7 @@ export default {
         DropdownSeparator,
         ItemActions,
         FolderSvg,
+        TruncatedText,
     },
 
     props: {

From b1dcc41ed9fa7069674a532b9a8c15e3b6e8038a Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 13 Feb 2026 20:02:27 +0100
Subject: [PATCH 04/20] Use default font for asset filename

---
 resources/css/components/assets.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css
index 248c2d9efe1..fa75c89b11f 100644
--- a/resources/css/components/assets.css
+++ b/resources/css/components/assets.css
@@ -158,7 +158,7 @@
 }
 
 .asset-filename {
-    @apply font-mono text-xs text-gray-500 dark:text-gray-300 mt-2 whitespace-nowrap text-center;
+    @apply text-xs text-gray-500 dark:text-gray-300 mt-2 whitespace-nowrap text-center;
     .selected & {
         @apply text-blue-500;
         .dark & {

From ee417056bfb6e3c1fa19fd27cdc82c3c3b033064 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 13 Feb 2026 20:49:30 +0100
Subject: [PATCH 05/20] Properly truncate text

---
 resources/js/components/ui/TruncatedText.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/ui/TruncatedText.vue b/resources/js/components/ui/TruncatedText.vue
index 350ec2e44ea..960c53019c5 100644
--- a/resources/js/components/ui/TruncatedText.vue
+++ b/resources/js/components/ui/TruncatedText.vue
@@ -11,11 +11,10 @@ let cleanup = null;
 
 onMounted(() => {
     const truncateOnResize = createMiddleEllipsisUtils();
-    console.log(props.text, truncated.value.innerText, truncated.value.innerText);
 
     cleanup = truncateOnResize({
         targetElement: truncated.value,
-        originalText: props.text,
+        originalText: truncated.value.innerText,
     });
 });
 
@@ -25,5 +24,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div ref="truncated" v-text="text" :title="text"></div>
+    <div class="relative">
+        <div ref="truncated" v-text="text" v-tooltip="text" :aria-label="text"></div>
+    </div>
 </template>

From 65f66ed00b7b0ac812adac57c6a4ee169ab8b8be Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 18 Feb 2026 12:10:19 +0100
Subject: [PATCH 06/20] Use predictable font for asset filename

---
 resources/css/components/assets.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css
index fa75c89b11f..11cd6e9a443 100644
--- a/resources/css/components/assets.css
+++ b/resources/css/components/assets.css
@@ -158,7 +158,8 @@
 }
 
 .asset-filename {
-    @apply text-xs text-gray-500 dark:text-gray-300 mt-2 whitespace-nowrap text-center;
+    @apply text-xs text-gray-500 dark:text-gray-300 mt-2 whitespace-nowrap text-center st-text-legibility;
+    font-variant: tabular-nums; /* Disable common-ligatures from body default */
     .selected & {
         @apply text-blue-500;
         .dark & {

From 5ccf1fe255dacaa6a0558fa5514553d184237bfa Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 18 Feb 2026 12:12:41 +0100
Subject: [PATCH 07/20] Define character map for truncated text

---
 .../ui/TruncatedTextCharacterMap.js           | 100 ++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 resources/js/components/ui/TruncatedTextCharacterMap.js

diff --git a/resources/js/components/ui/TruncatedTextCharacterMap.js b/resources/js/components/ui/TruncatedTextCharacterMap.js
new file mode 100644
index 00000000000..6741eaf5707
--- /dev/null
+++ b/resources/js/components/ui/TruncatedTextCharacterMap.js
@@ -0,0 +1,100 @@
+export default {
+    "inter": {
+        "0": 10.0625,
+        "1": 6.4288330078125,
+        "2": 9.6710205078125,
+        "3": 9.848953247070312,
+        "4": 10.285598754882812,
+        "5": 9.462677001953125,
+        "6": 9.857650756835938,
+        "7": 9.121536254882812,
+        "8": 9.833343505859375,
+        "9": 9.857650756835938,
+        " ": 4.4444580078125,
+        "!": 4.480926513671875,
+        "\"": 7.342041015625,
+        "#": 10.072921752929688,
+        "$": 10.217025756835938,
+        "%": 15.46533203125,
+        "&": 10.2413330078125,
+        "'": 4.7152862548828125,
+        "(": 5.7187652587890625,
+        ")": 5.7187652587890625,
+        "*": 7.958343505859375,
+        "+": 10.526046752929688,
+        ",": 4.4878692626953125,
+        "-": 7.3038330078125,
+        ".": 4.4878692626953125,
+        "/": 5.7031402587890625,
+        ":": 4.4878692626953125,
+        ";": 4.687530517578125,
+        "<": 10.526046752929688,
+        "=": 10.526046752929688,
+        ">": 10.526046752929688,
+        "?": 8.202239990234375,
+        "@": 15.467010498046875,
+        "A": 11.086814880371094,
+        "B": 10.440109252929688,
+        "C": 11.672744750976562,
+        "D": 11.489593505859375,
+        "E": 9.578994750976562,
+        "F": 9.381088256835938,
+        "G": 11.90972900390625,
+        "H": 11.828140258789062,
+        "I": 4.2326507568359375,
+        "J": 9.068588256835938,
+        "K": 10.68316650390625,
+        "L": 8.993057250976562,
+        "M": 14.371536254882812,
+        "N": 11.977447509765625,
+        "O": 12.20660400390625,
+        "P": 10.171005249023438,
+        "Q": 12.20660400390625,
+        "R": 10.276901245117188,
+        "S": 10.217025756835938,
+        "T": 10.265640258789062,
+        "U": 11.833343505859375,
+        "V": 11.099838256835938,
+        "W": 15.888031005859375,
+        "X": 10.848968505859375,
+        "Y": 10.795150756835938,
+        "Z": 10.03472900390625,
+        "[": 5.7187652587890625,
+        "\\": 5.316856384277344,
+        "]": 5.7187652587890625,
+        "^": 7.4791717529296875,
+        "_": 7.29339599609375,
+        "`": 5.0191192626953125,
+        "a": 8.906265258789062,
+        "b": 9.71356201171875,
+        "c": 9.054702758789062,
+        "d": 9.71356201171875,
+        "e": 9.24481201171875,
+        "f": 5.504364013671875,
+        "g": 9.727447509765625,
+        "h": 9.3819580078125,
+        "i": 3.8107757568359375,
+        "j": 3.8107757568359375,
+        "k": 8.707473754882812,
+        "l": 3.8107757568359375,
+        "m": 13.949661254882812,
+        "n": 9.375015258789062,
+        "o": 9.503494262695312,
+        "p": 9.71356201171875,
+        "q": 9.71356201171875,
+        "r": 6.038200378417969,
+        "s": 8.3507080078125,
+        "t": 5.175346374511719,
+        "u": 9.3819580078125,
+        "v": 8.902786254882812,
+        "w": 12.975723266601562,
+        "x": 8.664947509765625,
+        "y": 8.902786254882812,
+        "z": 8.704879760742188,
+        "{": 6.7465362548828125,
+        "|": 5.255218505859375,
+        "}": 6.7465362548828125,
+        "~": 10.526046752929688,
+        "": 0
+    }
+}

From 0a2dd2b28eb83dac4bfaf21ae5f6b4e2e3cf0413 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 18 Feb 2026 12:13:55 +0100
Subject: [PATCH 08/20] Passt custom character map into ellipsis util

---
 resources/js/components/ui/TruncatedText.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/ui/TruncatedText.vue b/resources/js/components/ui/TruncatedText.vue
index 960c53019c5..677c4e17ef9 100644
--- a/resources/js/components/ui/TruncatedText.vue
+++ b/resources/js/components/ui/TruncatedText.vue
@@ -1,20 +1,21 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
 import createMiddleEllipsisUtils from '@dynamic-middle-ellipsis/core';
+import customFontWidthMap from './TruncatedTextCharacterMap.js';
 
 const props = defineProps({
     text: { type: String, required: true },
 });
 
-const truncated = ref(null);
+const truncatedRef = ref(null);
 let cleanup = null;
 
 onMounted(() => {
-    const truncateOnResize = createMiddleEllipsisUtils();
+    const truncateOnResize = createMiddleEllipsisUtils({ customFontWidthMap });
 
     cleanup = truncateOnResize({
-        targetElement: truncated.value,
-        originalText: truncated.value.innerText,
+        targetElement: truncatedRef.value,
+        originalText: truncatedRef.value.innerText,
     });
 });
 
@@ -25,6 +26,6 @@ onUnmounted(() => {
 
 <template>
     <div class="relative">
-        <div ref="truncated" v-text="text" v-tooltip="text" :aria-label="text"></div>
+        <div ref="truncatedRef" v-text="text" title="text" :aria-label="text"></div>
     </div>
 </template>

From 5d784f3c33de014570cc9e6f95ea5e3ce5d927f6 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 18 Feb 2026 12:25:56 +0100
Subject: [PATCH 09/20] Make asset folder names sans-serif as well

---
 resources/css/components/assets.css             | 2 +-
 resources/js/components/assets/Browser/Grid.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css
index 11cd6e9a443..d1a1b7cee4e 100644
--- a/resources/css/components/assets.css
+++ b/resources/css/components/assets.css
@@ -120,7 +120,7 @@
     grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
 
     [data-placeholder-shown] {
-        @apply overflow-hidden mt-2 text-center font-mono text-xs text-ellipsis whitespace-nowrap lowercase;
+        @apply overflow-hidden mt-2 text-center text-xs text-ellipsis whitespace-nowrap lowercase;
         &:has(+ .st-has-error) {
             @apply text-red-600 dark:text-red-500;
         }
diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index f673deb6915..85dafd3e517 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -37,7 +37,7 @@
                             <button @click="selectFolder(folder.path)" class="group h-[66px] w-[80px]">
                                 <FolderSvg class="size-full text-blue-400/90 hover:text-blue-400" />
                                 <div
-                                    class="overflow-hidden mt-2 text-center font-mono text-xs text-ellipsis whitespace-nowrap text-gray-500 dark:text-gray-300"
+                                    class="overflow-hidden mt-2 text-center text-xs text-ellipsis whitespace-nowrap text-gray-500 dark:text-gray-300"
                                     v-text="folder.basename"
                                     :title="folder.basename"
                                 />
@@ -67,7 +67,7 @@
                         submit-mode="enter"
                         :placeholder="__('Name')"
                         :class="[
-                            'flex w-[80px] items-center placeholder:lowercase justify-center overflow-hidden mt-2 text-center font-mono text-xs text-ellipsis whitespace-nowrap placeholder:text-gray-400 dark:placeholder:text-gray-500 text-gray-500',
+                            'flex w-[80px] items-center placeholder:lowercase justify-center overflow-hidden mt-2 text-center text-xs text-ellipsis whitespace-nowrap placeholder:text-gray-400 dark:placeholder:text-gray-500 text-gray-500',
                             { 'st-has-error': creatingFolderError }
                         ]"
                         @submit="$emit('create-folder', newFolderName)"

From 5fdfa88fa22fba96617f988a70b5cb7707f6533b Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 18 Feb 2026 12:26:03 +0100
Subject: [PATCH 10/20] Remove unused truncate method

---
 resources/js/components/assets/Browser/Grid.vue | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index 85dafd3e517..67b111d0f17 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -249,17 +249,6 @@ export default {
     },
 
     methods: {
-        truncateFilename(filename) {
-            const maxLength = Math.floor(this.thumbnailSize / 7);
-            if (filename.length <= maxLength) return filename;
-
-            const extension = filename.split('.').pop();
-            const name = filename.slice(0, -(extension.length + 1));
-            const charsToKeep = Math.floor((maxLength - 3 - extension.length) / 2);
-
-            return `${name.slice(0, charsToKeep)}…${name.slice(-charsToKeep)}.${extension}`;
-        },
-
         isSelected(id) {
             return this.selectedAssets.includes(id);
         },

From 4daf1ed008d69676f6941d3bd7beee444e42ed4d Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 18 Feb 2026 12:36:29 +0100
Subject: [PATCH 11/20] Use correct title attribute

---
 resources/js/components/ui/TruncatedText.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/TruncatedText.vue b/resources/js/components/ui/TruncatedText.vue
index 677c4e17ef9..c2579e5d806 100644
--- a/resources/js/components/ui/TruncatedText.vue
+++ b/resources/js/components/ui/TruncatedText.vue
@@ -26,6 +26,6 @@ onUnmounted(() => {
 
 <template>
     <div class="relative">
-        <div ref="truncatedRef" v-text="text" title="text" :aria-label="text"></div>
+        <div ref="truncatedRef" v-text="text" :title="text" :aria-label="text"></div>
     </div>
 </template>

From dbebda5a0371455cb884312d9555a0972b3e2e69 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 18 Feb 2026 13:21:40 +0100
Subject: [PATCH 12/20] Inline middle ellipsis logic

---
 package-lock.json                             |  10 --
 package.json                                  |   1 -
 packages/cms/src/ui.js                        |   2 +-
 .../js/components/assets/Browser/Grid.vue     |   6 +-
 .../MiddleEllipsis.vue}                       |  10 +-
 .../ui/MiddleEllipsis/TruncateText.js         | 126 ++++++++++++++++++
 .../TruncateTextCharacterMap.js}              |   0
 resources/js/components/ui/index.js           |   2 +-
 8 files changed, 133 insertions(+), 24 deletions(-)
 rename resources/js/components/ui/{TruncatedText.vue => MiddleEllipsis/MiddleEllipsis.vue} (54%)
 create mode 100644 resources/js/components/ui/MiddleEllipsis/TruncateText.js
 rename resources/js/components/ui/{TruncatedTextCharacterMap.js => MiddleEllipsis/TruncateTextCharacterMap.js} (100%)

diff --git a/package-lock.json b/package-lock.json
index 8d7eeb4918a..001c7435d6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,6 @@
       "name": "statamic",
       "dependencies": {
         "@davidenke/marked-text-renderer": "^3.0.0",
-        "@dynamic-middle-ellipsis/core": "^1.0.2",
         "@floating-ui/dom": "^1.6.0",
         "@he-tree/vue": "^2.10.0-beta.2",
         "@hoppscotch/vue-toasted": "^0.1.0",
@@ -339,15 +338,6 @@
         "marked": "^15.0.8"
       }
     },
-    "node_modules/@dynamic-middle-ellipsis/core": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@dynamic-middle-ellipsis/core/-/core-1.0.2.tgz",
-      "integrity": "sha512-vMIQaKvojcKAAwSfHyE+aR2wVyo4UMP61Z34HQw+FyrENWi4Tf+Xyl2DBtP/76RVsbgLjtCJmkiA/+yZxaraAQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=16.0.0"
-      }
-    },
     "node_modules/@emnapi/core": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.3.tgz",
diff --git a/package.json b/package.json
index 34141e60c23..5ee5f6ea33e 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
   },
   "dependencies": {
     "@davidenke/marked-text-renderer": "^3.0.0",
-    "@dynamic-middle-ellipsis/core": "^1.0.2",
     "@floating-ui/dom": "^1.6.0",
     "@he-tree/vue": "^2.10.0-beta.2",
     "@hoppscotch/vue-toasted": "^0.1.0",
diff --git a/packages/cms/src/ui.js b/packages/cms/src/ui.js
index 2ea1cb98bbe..4063a97f6d2 100644
--- a/packages/cms/src/ui.js
+++ b/packages/cms/src/ui.js
@@ -66,6 +66,7 @@ export const {
     ListingToggleAll,
     LivePreview,
     LivePreviewPopout,
+    MiddleEllipsis,
     Modal,
     ModalClose,
     ModalTitle,
@@ -117,7 +118,6 @@ export const {
     TimePicker,
     ToggleGroup,
     ToggleItem,
-    TruncatedText,
     Widget,
     registerIconSet,
     registerIconSetFromStrings,
diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index 67b111d0f17..a58c9dcf7c3 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -169,7 +169,7 @@
                     </Context>
                 </ItemActions>
                 <div class="asset-filename">
-                    <TruncatedText :text="asset.basename" />
+                    <MiddleEllipsis :text="asset.basename" />
                 </div>
             </div>
         </section>
@@ -196,7 +196,7 @@ import {
     DropdownLabel,
     DropdownItem,
     DropdownSeparator,
-    TruncatedText
+    MiddleEllipsis
 } from '@ui';
 import { injectListingContext } from '@/components/ui/Listing/Listing.vue';
 import ItemActions from '@/components/actions/ItemActions.vue';
@@ -220,7 +220,7 @@ export default {
         DropdownSeparator,
         ItemActions,
         FolderSvg,
-        TruncatedText,
+        MiddleEllipsis,
     },
 
     props: {
diff --git a/resources/js/components/ui/TruncatedText.vue b/resources/js/components/ui/MiddleEllipsis/MiddleEllipsis.vue
similarity index 54%
rename from resources/js/components/ui/TruncatedText.vue
rename to resources/js/components/ui/MiddleEllipsis/MiddleEllipsis.vue
index c2579e5d806..ce243e7710f 100644
--- a/resources/js/components/ui/TruncatedText.vue
+++ b/resources/js/components/ui/MiddleEllipsis/MiddleEllipsis.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
-import createMiddleEllipsisUtils from '@dynamic-middle-ellipsis/core';
-import customFontWidthMap from './TruncatedTextCharacterMap.js';
+import truncateOnResize from './TruncateText.js';
 
 const props = defineProps({
     text: { type: String, required: true },
@@ -11,12 +10,7 @@ const truncatedRef = ref(null);
 let cleanup = null;
 
 onMounted(() => {
-    const truncateOnResize = createMiddleEllipsisUtils({ customFontWidthMap });
-
-    cleanup = truncateOnResize({
-        targetElement: truncatedRef.value,
-        originalText: truncatedRef.value.innerText,
-    });
+    cleanup = truncateOnResize(truncatedRef.value, props.text);
 });
 
 onUnmounted(() => {
diff --git a/resources/js/components/ui/MiddleEllipsis/TruncateText.js b/resources/js/components/ui/MiddleEllipsis/TruncateText.js
new file mode 100644
index 00000000000..f8fb360087f
--- /dev/null
+++ b/resources/js/components/ui/MiddleEllipsis/TruncateText.js
@@ -0,0 +1,126 @@
+import fontWidthMap from './TruncateTextCharacterMap.js';
+
+export default function truncateOnResize (targetElement, originalText, { ellipsisSymbol = "..." } = {}) {
+    if (!targetElement.offsetParent || !originalText) {
+        return () => { };
+    }
+
+    const observer = new ResizeObserver(() => {
+        targetElement.textContent = truncateText(targetElement, originalText, { ellipsisSymbol });
+    });
+
+    observer.observe(targetElement.offsetParent);
+
+    return () => observer.disconnect();
+};
+
+function truncateText (targetElement, originalText, { ellipsisSymbol = "..." } = {}) {
+    const { fontSize, fontFamily } = getElementProperties(targetElement);
+
+    const availableWidth = getAvailableWidth(targetElement);
+    const maxTextWidth = getStringWidth(originalText, fontSize, fontFamily);
+    if (maxTextWidth <= availableWidth) {
+        return originalText;
+    }
+
+    const middleEllipsisWidth = getStringWidth(ellipsisSymbol, fontSize, fontFamily);
+    const originalTextLength = originalText.length;
+
+    let remainingWidth = availableWidth - middleEllipsisWidth;
+    let firstHalf = "";
+    let secondHalf = "";
+
+    for (let i = 0; i < Math.floor(originalTextLength / 2); i++) {
+        remainingWidth -= getCharacterWidth(originalText[i], fontFamily, fontSize);
+        if (remainingWidth < 0) {
+            break;
+        }
+
+        firstHalf += originalText[i];
+        remainingWidth -= getCharacterWidth(originalText[originalTextLength - i - 1], fontFamily, fontSize);
+        if (remainingWidth < 0) {
+            break;
+        }
+
+        secondHalf = originalText[originalTextLength - i - 1] + secondHalf;
+    }
+
+    return firstHalf + ellipsisSymbol + secondHalf;
+};
+
+function getCharacterWidth (character, fontFamily, fontSize = 16) {
+    const characterWidthMap = fontWidthMap[fontFamily] ?? {};
+
+    // If character is not present in widthMap, return width of 'W' character (widest character)
+    const characterWidth = characterWidthMap[character] ?? characterWidthMap.W ?? fontSize;
+
+    return characterWidth * (fontSize / 16); // scale the width according to fontSize
+};
+
+function getStringWidth (originalText, fontSize, fontFamily) {
+    let width = 0;
+    for (const c of originalText) {
+        width += getCharacterWidth(c, fontFamily, fontSize);
+    }
+    return width;
+};
+
+function getElementProperties (targetElement) {
+    const style = window.getComputedStyle(targetElement);
+    const fontSize = Number.parseFloat(style.fontSize);
+    const fontFamily = style.fontFamily.split(",")[0];
+    const marginXWidth = Number.parseFloat(style.marginLeft) + Number.parseFloat(style.marginRight);
+    const borderXWidth = Number.parseFloat(style.borderLeftWidth) +
+        Number.parseFloat(style.borderRightWidth);
+    const paddingXWidth = Number.parseFloat(style.paddingLeft) +
+        Number.parseFloat(style.paddingRight);
+    const width = Number.parseFloat(style.width);
+    const totalWidth = width + marginXWidth;
+    const innerWidth = width - paddingXWidth - borderXWidth;
+    return {
+        fontSize,
+        fontFamily,
+        totalWidth,
+        borderXWidth,
+        paddingXWidth,
+        marginXWidth,
+        innerWidth,
+    };
+};
+
+function getSiblingWidth (targetElement) {
+    if (!targetElement.parentNode) {
+        return 0;
+    }
+
+    let width = 0;
+    for (const child of targetElement.parentNode.children) {
+        if (child === targetElement) {
+            const { paddingXWidth, borderXWidth } = getElementProperties(targetElement);
+            width += paddingXWidth + borderXWidth;
+        } else {
+            width += getElementProperties(child).totalWidth;
+        }
+    }
+
+    return width;
+};
+
+function getAvailableWidth (targetElement) {
+    const offsetParentElement = targetElement.offsetParent;
+    if (!offsetParentElement) {
+        return 0;
+    }
+
+    let takenWidth = 0;
+    let tempElement = targetElement;
+    while (tempElement && tempElement !== offsetParentElement) {
+        takenWidth += getSiblingWidth(tempElement);
+        // if (!tempElement.parentElement) {
+        //     break;
+        // }
+        tempElement = tempElement.parentElement;
+    }
+
+    return getElementProperties(offsetParentElement).innerWidth - takenWidth;
+};
diff --git a/resources/js/components/ui/TruncatedTextCharacterMap.js b/resources/js/components/ui/MiddleEllipsis/TruncateTextCharacterMap.js
similarity index 100%
rename from resources/js/components/ui/TruncatedTextCharacterMap.js
rename to resources/js/components/ui/MiddleEllipsis/TruncateTextCharacterMap.js
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index efe4cfd5060..4f4909880e3 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -47,6 +47,7 @@ export { default as InputGroup } from './Input/Group.vue';
 export { default as InputGroupAppend } from './Input/GroupAppend.vue';
 export { default as InputGroupPrepend } from './Input/GroupPrepend.vue';
 export { default as Label } from './Label.vue';
+export { default as MiddleEllipsis } from './MiddleEllipsis/MiddleEllipsis.vue';
 export { default as Modal } from './Modal/Modal.vue';
 export { default as ModalClose } from './Modal/Close.vue';
 export { default as ModalTitle } from './Modal/Title.vue';
@@ -85,7 +86,6 @@ export { default as Textarea } from './Textarea.vue';
 export { default as TimePicker } from './TimePicker/TimePicker.vue';
 export { default as ToggleGroup } from './Toggle/Group.vue';
 export { default as ToggleItem } from './Toggle/Item.vue';
-export { default as TruncatedText } from './TruncatedText.vue';
 
 export { default as Avatar } from "./Avatar.vue";
 export { default as CreateForm } from "./CreateForm.vue";

From da2e9fff36fe1b8cf4c82a5e080e685030d41d14 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 18 Feb 2026 13:25:00 +0100
Subject: [PATCH 13/20] No need to account for margin, padding, border

---
 .../ui/MiddleEllipsis/TruncateText.js         | 32 ++++---------------
 1 file changed, 6 insertions(+), 26 deletions(-)

diff --git a/resources/js/components/ui/MiddleEllipsis/TruncateText.js b/resources/js/components/ui/MiddleEllipsis/TruncateText.js
index f8fb360087f..150578eda81 100644
--- a/resources/js/components/ui/MiddleEllipsis/TruncateText.js
+++ b/resources/js/components/ui/MiddleEllipsis/TruncateText.js
@@ -67,24 +67,10 @@ function getStringWidth (originalText, fontSize, fontFamily) {
 
 function getElementProperties (targetElement) {
     const style = window.getComputedStyle(targetElement);
-    const fontSize = Number.parseFloat(style.fontSize);
-    const fontFamily = style.fontFamily.split(",")[0];
-    const marginXWidth = Number.parseFloat(style.marginLeft) + Number.parseFloat(style.marginRight);
-    const borderXWidth = Number.parseFloat(style.borderLeftWidth) +
-        Number.parseFloat(style.borderRightWidth);
-    const paddingXWidth = Number.parseFloat(style.paddingLeft) +
-        Number.parseFloat(style.paddingRight);
-    const width = Number.parseFloat(style.width);
-    const totalWidth = width + marginXWidth;
-    const innerWidth = width - paddingXWidth - borderXWidth;
     return {
-        fontSize,
-        fontFamily,
-        totalWidth,
-        borderXWidth,
-        paddingXWidth,
-        marginXWidth,
-        innerWidth,
+        fontSize: Number.parseFloat(style.fontSize),
+        fontFamily: style.fontFamily.split(",")[0],
+        width: Number.parseFloat(style.width),
     };
 };
 
@@ -95,11 +81,8 @@ function getSiblingWidth (targetElement) {
 
     let width = 0;
     for (const child of targetElement.parentNode.children) {
-        if (child === targetElement) {
-            const { paddingXWidth, borderXWidth } = getElementProperties(targetElement);
-            width += paddingXWidth + borderXWidth;
-        } else {
-            width += getElementProperties(child).totalWidth;
+        if (child !== targetElement) {
+            width += getElementProperties(child).width;
         }
     }
 
@@ -116,11 +99,8 @@ function getAvailableWidth (targetElement) {
     let tempElement = targetElement;
     while (tempElement && tempElement !== offsetParentElement) {
         takenWidth += getSiblingWidth(tempElement);
-        // if (!tempElement.parentElement) {
-        //     break;
-        // }
         tempElement = tempElement.parentElement;
     }
 
-    return getElementProperties(offsetParentElement).innerWidth - takenWidth;
+    return getElementProperties(offsetParentElement).width - takenWidth;
 };

From 33b4e8d1bf1119bd0e7c95cd821e2ad873d01f4f Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 18 Feb 2026 13:30:35 +0100
Subject: [PATCH 14/20] Remove ellipsis from export

---
 packages/cms/src/ui.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/cms/src/ui.js b/packages/cms/src/ui.js
index 4063a97f6d2..6b276d43130 100644
--- a/packages/cms/src/ui.js
+++ b/packages/cms/src/ui.js
@@ -66,7 +66,6 @@ export const {
     ListingToggleAll,
     LivePreview,
     LivePreviewPopout,
-    MiddleEllipsis,
     Modal,
     ModalClose,
     ModalTitle,

From 2346ce5df08a94150b72c622af06aea31dfd4663 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 18 Feb 2026 13:32:13 +0100
Subject: [PATCH 15/20] Refactor for clarity

---
 .../ui/MiddleEllipsis/TruncateText.js         | 166 +++++++++---------
 1 file changed, 87 insertions(+), 79 deletions(-)

diff --git a/resources/js/components/ui/MiddleEllipsis/TruncateText.js b/resources/js/components/ui/MiddleEllipsis/TruncateText.js
index 150578eda81..2086e71c486 100644
--- a/resources/js/components/ui/MiddleEllipsis/TruncateText.js
+++ b/resources/js/components/ui/MiddleEllipsis/TruncateText.js
@@ -1,106 +1,114 @@
-import fontWidthMap from './TruncateTextCharacterMap.js';
-
-export default function truncateOnResize (targetElement, originalText, { ellipsisSymbol = "..." } = {}) {
-    if (!targetElement.offsetParent || !originalText) {
-        return () => { };
+import characterWidths from './TruncateTextCharacterMap.js';
+
+const BASE_FONT_SIZE = 16;
+
+/**
+ * Observes the parent element for resize events and truncates the text
+ * with a middle ellipsis when it overflows.
+ *
+ * Returns a cleanup function to disconnect the observer.
+ */
+export default function truncateOnResize(element, text, { ellipsis = '...' } = {}) {
+    if (!element.offsetParent || !text) {
+        return () => {};
     }
 
     const observer = new ResizeObserver(() => {
-        targetElement.textContent = truncateText(targetElement, originalText, { ellipsisSymbol });
+        element.textContent = middleTruncate(element, text, ellipsis);
     });
 
-    observer.observe(targetElement.offsetParent);
+    observer.observe(element.offsetParent);
 
     return () => observer.disconnect();
-};
+}
+
+/**
+ * Truncates text from the middle when it's too wide for the element,
+ * preserving the start and end of the string for readability.
+ */
+function middleTruncate(element, text, ellipsis) {
+    const style = window.getComputedStyle(element);
+    const fontSize = Number.parseFloat(style.fontSize);
+    const fontFamily = style.fontFamily.split(',')[0];
 
-function truncateText (targetElement, originalText, { ellipsisSymbol = "..." } = {}) {
-    const { fontSize, fontFamily } = getElementProperties(targetElement);
+    const availableWidth = measureAvailableWidth(element);
 
-    const availableWidth = getAvailableWidth(targetElement);
-    const maxTextWidth = getStringWidth(originalText, fontSize, fontFamily);
-    if (maxTextWidth <= availableWidth) {
-        return originalText;
+    if (measureTextWidth(text, fontFamily, fontSize) <= availableWidth) {
+        return text;
     }
 
-    const middleEllipsisWidth = getStringWidth(ellipsisSymbol, fontSize, fontFamily);
-    const originalTextLength = originalText.length;
+    let remainingWidth = availableWidth - measureTextWidth(ellipsis, fontFamily, fontSize);
+    let start = '';
+    let end = '';
+
+    // Build the truncated string from both ends, one character at a time,
+    // until we run out of space.
+    for (let i = 0; i < Math.floor(text.length / 2); i++) {
+        const startChar = text[i];
+        remainingWidth -= measureCharWidth(startChar, fontFamily, fontSize);
+        if (remainingWidth < 0) break;
+        start += startChar;
+
+        const endChar = text[text.length - i - 1];
+        remainingWidth -= measureCharWidth(endChar, fontFamily, fontSize);
+        if (remainingWidth < 0) break;
+        end = endChar + end;
+    }
 
-    let remainingWidth = availableWidth - middleEllipsisWidth;
-    let firstHalf = "";
-    let secondHalf = "";
+    return start + ellipsis + end;
+}
 
-    for (let i = 0; i < Math.floor(originalTextLength / 2); i++) {
-        remainingWidth -= getCharacterWidth(originalText[i], fontFamily, fontSize);
-        if (remainingWidth < 0) {
-            break;
-        }
+// -- Text width estimation ------------------------------------------------
+// Uses a precomputed character width map (at 16px base size) to estimate
+// text width without triggering DOM layout. Unmapped characters fall back
+// to 'W' width (the widest common character) for a safe overestimate.
 
-        firstHalf += originalText[i];
-        remainingWidth -= getCharacterWidth(originalText[originalTextLength - i - 1], fontFamily, fontSize);
-        if (remainingWidth < 0) {
-            break;
-        }
+function measureCharWidth(char, fontFamily, fontSize) {
+    const widths = characterWidths[fontFamily] ?? {};
+    const baseWidth = widths[char] ?? widths.W ?? BASE_FONT_SIZE;
+    return baseWidth * (fontSize / BASE_FONT_SIZE);
+}
 
-        secondHalf = originalText[originalTextLength - i - 1] + secondHalf;
+function measureTextWidth(text, fontFamily, fontSize) {
+    let width = 0;
+    for (const char of text) {
+        width += measureCharWidth(char, fontFamily, fontSize);
     }
+    return width;
+}
 
-    return firstHalf + ellipsisSymbol + secondHalf;
-};
-
-function getCharacterWidth (character, fontFamily, fontSize = 16) {
-    const characterWidthMap = fontWidthMap[fontFamily] ?? {};
+// -- Available width calculation ------------------------------------------
+// Walks up from the target element to its offsetParent, subtracting the
+// width of all sibling elements at each level, to determine how much
+// horizontal space remains for the text.
 
-    // If character is not present in widthMap, return width of 'W' character (widest character)
-    const characterWidth = characterWidthMap[character] ?? characterWidthMap.W ?? fontSize;
+function measureAvailableWidth(element) {
+    const container = element.offsetParent;
+    if (!container) return 0;
 
-    return characterWidth * (fontSize / 16); // scale the width according to fontSize
-};
+    let consumed = 0;
+    let current = element;
 
-function getStringWidth (originalText, fontSize, fontFamily) {
-    let width = 0;
-    for (const c of originalText) {
-        width += getCharacterWidth(c, fontFamily, fontSize);
-    }
-    return width;
-};
-
-function getElementProperties (targetElement) {
-    const style = window.getComputedStyle(targetElement);
-    return {
-        fontSize: Number.parseFloat(style.fontSize),
-        fontFamily: style.fontFamily.split(",")[0],
-        width: Number.parseFloat(style.width),
-    };
-};
-
-function getSiblingWidth (targetElement) {
-    if (!targetElement.parentNode) {
-        return 0;
+    while (current && current !== container) {
+        consumed += measureSiblingsWidth(current);
+        current = current.parentElement;
     }
 
+    return getComputedWidth(container) - consumed;
+}
+
+function measureSiblingsWidth(element) {
+    if (!element.parentNode) return 0;
+
     let width = 0;
-    for (const child of targetElement.parentNode.children) {
-        if (child !== targetElement) {
-            width += getElementProperties(child).width;
+    for (const sibling of element.parentNode.children) {
+        if (sibling !== element) {
+            width += getComputedWidth(sibling);
         }
     }
-
     return width;
-};
-
-function getAvailableWidth (targetElement) {
-    const offsetParentElement = targetElement.offsetParent;
-    if (!offsetParentElement) {
-        return 0;
-    }
-
-    let takenWidth = 0;
-    let tempElement = targetElement;
-    while (tempElement && tempElement !== offsetParentElement) {
-        takenWidth += getSiblingWidth(tempElement);
-        tempElement = tempElement.parentElement;
-    }
+}
 
-    return getElementProperties(offsetParentElement).width - takenWidth;
-};
+function getComputedWidth(element) {
+    return Number.parseFloat(window.getComputedStyle(element).width);
+}

From 31d999dcedf9d7ed28d15cb5403fa1145d840c2f Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 18 Feb 2026 13:35:44 +0100
Subject: [PATCH 16/20] No need to account for siblings

---
 .../ui/MiddleEllipsis/TruncateText.js         | 35 ++-----------------
 1 file changed, 3 insertions(+), 32 deletions(-)

diff --git a/resources/js/components/ui/MiddleEllipsis/TruncateText.js b/resources/js/components/ui/MiddleEllipsis/TruncateText.js
index 2086e71c486..6d64ea9b6f1 100644
--- a/resources/js/components/ui/MiddleEllipsis/TruncateText.js
+++ b/resources/js/components/ui/MiddleEllipsis/TruncateText.js
@@ -77,38 +77,9 @@ function measureTextWidth(text, fontFamily, fontSize) {
     return width;
 }
 
-// -- Available width calculation ------------------------------------------
-// Walks up from the target element to its offsetParent, subtracting the
-// width of all sibling elements at each level, to determine how much
-// horizontal space remains for the text.
-
 function measureAvailableWidth(element) {
-    const container = element.offsetParent;
-    if (!container) return 0;
-
-    let consumed = 0;
-    let current = element;
-
-    while (current && current !== container) {
-        consumed += measureSiblingsWidth(current);
-        current = current.parentElement;
-    }
-
-    return getComputedWidth(container) - consumed;
-}
-
-function measureSiblingsWidth(element) {
-    if (!element.parentNode) return 0;
-
-    let width = 0;
-    for (const sibling of element.parentNode.children) {
-        if (sibling !== element) {
-            width += getComputedWidth(sibling);
-        }
-    }
-    return width;
-}
+    const parent = element.parentElement;
+    if (!parent) return 0;
 
-function getComputedWidth(element) {
-    return Number.parseFloat(window.getComputedStyle(element).width);
+    return Number.parseFloat(window.getComputedStyle(parent).width);
 }

From 77af66d18d26dc5cf1fb9c13fd9cd2190df2a525 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 18 Feb 2026 13:43:44 +0100
Subject: [PATCH 17/20] Include middle ellipsis in ui package

---
 packages/cms/src/ui.js             | 1 +
 resources/js/bootstrap/cms/ui.js   | 1 +
 resources/js/tests/Package.test.js | 1 +
 3 files changed, 3 insertions(+)

diff --git a/packages/cms/src/ui.js b/packages/cms/src/ui.js
index 6b276d43130..4063a97f6d2 100644
--- a/packages/cms/src/ui.js
+++ b/packages/cms/src/ui.js
@@ -66,6 +66,7 @@ export const {
     ListingToggleAll,
     LivePreview,
     LivePreviewPopout,
+    MiddleEllipsis,
     Modal,
     ModalClose,
     ModalTitle,
diff --git a/resources/js/bootstrap/cms/ui.js b/resources/js/bootstrap/cms/ui.js
index adf68ff74ce..28803da78b0 100644
--- a/resources/js/bootstrap/cms/ui.js
+++ b/resources/js/bootstrap/cms/ui.js
@@ -66,6 +66,7 @@ export {
     ListingToggleAll,
     LivePreview,
     LivePreviewPopout,
+    MiddleEllipsis,
     Modal,
     ModalClose,
     ModalTitle,
diff --git a/resources/js/tests/Package.test.js b/resources/js/tests/Package.test.js
index b7ead20e94b..5d43ccfb22c 100644
--- a/resources/js/tests/Package.test.js
+++ b/resources/js/tests/Package.test.js
@@ -167,6 +167,7 @@ it('exports ui', async () => {
         'InputGroupAppend',
         'InputGroupPrepend',
         'Label',
+        'MiddleEllipsis',
         'Modal',
         'ModalClose',
         'ModalTitle',

From a0777ffcd95e41f96b4d91fb32eefcd92b513e2a Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 18 Feb 2026 13:58:40 +0100
Subject: [PATCH 18/20] Improve character map compression

---
 .../TruncateTextCharacterMap.js               | 192 +++++++++---------
 1 file changed, 96 insertions(+), 96 deletions(-)

diff --git a/resources/js/components/ui/MiddleEllipsis/TruncateTextCharacterMap.js b/resources/js/components/ui/MiddleEllipsis/TruncateTextCharacterMap.js
index 6741eaf5707..75d2b0c0e1a 100644
--- a/resources/js/components/ui/MiddleEllipsis/TruncateTextCharacterMap.js
+++ b/resources/js/components/ui/MiddleEllipsis/TruncateTextCharacterMap.js
@@ -1,100 +1,100 @@
 export default {
     "inter": {
-        "0": 10.0625,
-        "1": 6.4288330078125,
-        "2": 9.6710205078125,
-        "3": 9.848953247070312,
-        "4": 10.285598754882812,
-        "5": 9.462677001953125,
-        "6": 9.857650756835938,
-        "7": 9.121536254882812,
-        "8": 9.833343505859375,
-        "9": 9.857650756835938,
-        " ": 4.4444580078125,
-        "!": 4.480926513671875,
-        "\"": 7.342041015625,
-        "#": 10.072921752929688,
-        "$": 10.217025756835938,
-        "%": 15.46533203125,
-        "&": 10.2413330078125,
-        "'": 4.7152862548828125,
-        "(": 5.7187652587890625,
-        ")": 5.7187652587890625,
-        "*": 7.958343505859375,
-        "+": 10.526046752929688,
-        ",": 4.4878692626953125,
-        "-": 7.3038330078125,
-        ".": 4.4878692626953125,
-        "/": 5.7031402587890625,
-        ":": 4.4878692626953125,
-        ";": 4.687530517578125,
-        "<": 10.526046752929688,
-        "=": 10.526046752929688,
-        ">": 10.526046752929688,
-        "?": 8.202239990234375,
-        "@": 15.467010498046875,
-        "A": 11.086814880371094,
-        "B": 10.440109252929688,
-        "C": 11.672744750976562,
-        "D": 11.489593505859375,
-        "E": 9.578994750976562,
-        "F": 9.381088256835938,
-        "G": 11.90972900390625,
-        "H": 11.828140258789062,
-        "I": 4.2326507568359375,
-        "J": 9.068588256835938,
-        "K": 10.68316650390625,
-        "L": 8.993057250976562,
-        "M": 14.371536254882812,
-        "N": 11.977447509765625,
-        "O": 12.20660400390625,
-        "P": 10.171005249023438,
-        "Q": 12.20660400390625,
-        "R": 10.276901245117188,
-        "S": 10.217025756835938,
-        "T": 10.265640258789062,
-        "U": 11.833343505859375,
-        "V": 11.099838256835938,
-        "W": 15.888031005859375,
-        "X": 10.848968505859375,
-        "Y": 10.795150756835938,
-        "Z": 10.03472900390625,
-        "[": 5.7187652587890625,
-        "\\": 5.316856384277344,
-        "]": 5.7187652587890625,
-        "^": 7.4791717529296875,
-        "_": 7.29339599609375,
-        "`": 5.0191192626953125,
-        "a": 8.906265258789062,
-        "b": 9.71356201171875,
-        "c": 9.054702758789062,
-        "d": 9.71356201171875,
-        "e": 9.24481201171875,
-        "f": 5.504364013671875,
-        "g": 9.727447509765625,
-        "h": 9.3819580078125,
-        "i": 3.8107757568359375,
-        "j": 3.8107757568359375,
-        "k": 8.707473754882812,
-        "l": 3.8107757568359375,
-        "m": 13.949661254882812,
-        "n": 9.375015258789062,
-        "o": 9.503494262695312,
-        "p": 9.71356201171875,
-        "q": 9.71356201171875,
-        "r": 6.038200378417969,
-        "s": 8.3507080078125,
-        "t": 5.175346374511719,
-        "u": 9.3819580078125,
-        "v": 8.902786254882812,
-        "w": 12.975723266601562,
-        "x": 8.664947509765625,
-        "y": 8.902786254882812,
-        "z": 8.704879760742188,
-        "{": 6.7465362548828125,
-        "|": 5.255218505859375,
-        "}": 6.7465362548828125,
-        "~": 10.526046752929688,
-        "": 0
+        "0": 10.062,
+        "1": 6.428,
+        "2": 9.671,
+        "3": 9.848,
+        "4": 10.285,
+        "5": 9.462,
+        "6": 9.857,
+        "7": 9.121,
+        "8": 9.833,
+        "9": 9.857,
+        " ": 4.444,
+        "!": 4.480,
+        "\"": 7.342,
+        "#": 10.072,
+        "$": 10.217,
+        "%": 15.465,
+        "&": 10.241,
+        "'": 4.715,
+        "(": 5.718,
+        ")": 5.718,
+        "*": 7.958,
+        "+": 10.526,
+        ",": 4.487,
+        "-": 7.303,
+        ".": 4.487,
+        "/": 5.703,
+        ":": 4.487,
+        ";": 4.687,
+        "<": 10.526,
+        "=": 10.526,
+        ">": 10.526,
+        "?": 8.202,
+        "@": 15.467,
+        "A": 11.086,
+        "B": 10.440,
+        "C": 11.672,
+        "D": 11.489,
+        "E": 9.578,
+        "F": 9.381,
+        "G": 11.909,
+        "H": 11.828,
+        "I": 4.232,
+        "J": 9.068,
+        "K": 10.683,
+        "L": 8.993,
+        "M": 14.371,
+        "N": 11.977,
+        "O": 12.206,
+        "P": 10.171,
+        "Q": 12.206,
+        "R": 10.276,
+        "S": 10.217,
+        "T": 10.265,
+        "U": 11.833,
+        "V": 11.099,
+        "W": 15.888,
+        "X": 10.848,
+        "Y": 10.795,
+        "Z": 10.034,
+        "[": 5.718,
+        "\\": 5.316,
+        "]": 5.718,
+        "^": 7.479,
+        "_": 7.293,
+        "`": 5.019,
+        "a": 8.906,
+        "b": 9.713,
+        "c": 9.054,
+        "d": 9.713,
+        "e": 9.244,
+        "f": 5.504,
+        "g": 9.727,
+        "h": 9.381,
+        "i": 3.810,
+        "j": 3.810,
+        "k": 8.707,
+        "l": 3.810,
+        "m": 13.949,
+        "n": 9.375,
+        "o": 9.503,
+        "p": 9.713,
+        "q": 9.713,
+        "r": 6.038,
+        "s": 8.350,
+        "t": 5.175,
+        "u": 9.381,
+        "v": 8.902,
+        "w": 12.975,
+        "x": 8.664,
+        "y": 8.902,
+        "z": 8.704,
+        "{": 6.746,
+        "|": 5.255,
+        "}": 6.746,
+        "~": 10.526,
+        "": 0
     }
 }

From 0c3b2898408c3e25f2b9d0ff1b8c31c489ae9b00 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Thu, 26 Feb 2026 01:07:50 -0500
Subject: [PATCH 19/20] Fix MiddleEllipsis font-family normalization for
 character map lookups

---
 resources/js/components/ui/MiddleEllipsis/TruncateText.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/MiddleEllipsis/TruncateText.js b/resources/js/components/ui/MiddleEllipsis/TruncateText.js
index 6d64ea9b6f1..1581526a0f1 100644
--- a/resources/js/components/ui/MiddleEllipsis/TruncateText.js
+++ b/resources/js/components/ui/MiddleEllipsis/TruncateText.js
@@ -29,7 +29,7 @@ export default function truncateOnResize(element, text, { ellipsis = '...' } = {
 function middleTruncate(element, text, ellipsis) {
     const style = window.getComputedStyle(element);
     const fontSize = Number.parseFloat(style.fontSize);
-    const fontFamily = style.fontFamily.split(',')[0];
+    const fontFamily = normalizeFontFamily(style.fontFamily.split(',')[0]);
 
     const availableWidth = measureAvailableWidth(element);
 
@@ -69,6 +69,10 @@ function measureCharWidth(char, fontFamily, fontSize) {
     return baseWidth * (fontSize / BASE_FONT_SIZE);
 }
 
+function normalizeFontFamily(fontFamily) {
+    return fontFamily.replaceAll('"', '').replaceAll("'", '').trim().toLowerCase();
+}
+
 function measureTextWidth(text, fontFamily, fontSize) {
     let width = 0;
     for (const char of text) {

From 52fe3bb71f654c7064fffcb2f461d8ce958a173f Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Thu, 26 Feb 2026 01:08:00 -0500
Subject: [PATCH 20/20] Rebind MiddleEllipsis truncation observer when text
 prop changes

---
 .../ui/MiddleEllipsis/MiddleEllipsis.vue          | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/ui/MiddleEllipsis/MiddleEllipsis.vue b/resources/js/components/ui/MiddleEllipsis/MiddleEllipsis.vue
index ce243e7710f..8eb1c7278d2 100644
--- a/resources/js/components/ui/MiddleEllipsis/MiddleEllipsis.vue
+++ b/resources/js/components/ui/MiddleEllipsis/MiddleEllipsis.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, watch } from 'vue';
 import truncateOnResize from './TruncateText.js';
 
 const props = defineProps({
@@ -9,9 +9,18 @@ const props = defineProps({
 const truncatedRef = ref(null);
 let cleanup = null;
 
-onMounted(() => {
+const bindTruncation = () => {
+    if (!truncatedRef.value) {
+        return;
+    }
+
+    cleanup?.();
     cleanup = truncateOnResize(truncatedRef.value, props.text);
-});
+};
+
+onMounted(bindTruncation);
+
+watch(() => props.text, bindTruncation);
 
 onUnmounted(() => {
     cleanup?.();