From 8458827cb96aed342266f198b2a4d36301410576 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 10 May 2026 23:28:18 +0530
Subject: [PATCH 01/15] feat: truncate middle of dynamic values instead of the
 end

---
 frontend/components.d.ts                      |  1 +
 .../Controls/DynamicValueHandler.vue          |  5 +-
 frontend/src/components/MiddleEllipsis.vue    | 52 +++++++++++++++++++
 3 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/MiddleEllipsis.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 5710bdba6..702daaf64 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -97,6 +97,7 @@ declare module 'vue' {
     MainMenu: typeof import('./src/components/MainMenu.vue')['default']
     MarginHandler: typeof import('./src/components/MarginHandler.vue')['default']
     Meta: typeof import('./src/components/Icons/Meta.vue')['default']
+    MiddleEllipsis: typeof import('./src/components/MiddleEllipsis.vue')['default']
     NewBlockTemplate: typeof import('./src/components/Modals/NewBlockTemplate.vue')['default']
     NewBuilderVariable: typeof import('./src/components/Modals/NewBuilderVariable.vue')['default']
     NewComponent: typeof import('./src/components/Modals/NewComponent.vue')['default']
diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index 3f2d33155..176213233 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -19,7 +19,7 @@
 						<div
 							class="w-full cursor-pointer truncate rounded bg-surface-gray-3 p-2 text-left font-mono text-p-sm text-ink-gray-9"
 							@click.stop="selectAndSetItem(selectedItem)">
-							{{ selectedItem.key }}
+							<MiddleEllipsis :text="selectedItem.key" />
 							<p class="truncate text-xs text-ink-gray-5" :class="{ italic: getValue(selectedItem) == null }">
 								{{ getValue(selectedItem) == null ? "No Value Set" : getValue(selectedItem) }}
 							</p>
@@ -33,7 +33,7 @@
 									selectedItem?.key === item.key && selectedItem?.comesFrom === item.comesFrom,
 							}"
 							@click.stop="selectAndSetItem(item)">
-							{{ item.key }}
+							<MiddleEllipsis :text="item.key" />
 							<p class="truncate text-xs text-ink-gray-5" :class="{ italic: getValue(item) == null }">
 								{{ getValue(item) == null ? "No Value Set" : getValue(item) }}
 							</p>
@@ -80,6 +80,7 @@ import usePageStore from "@/stores/pageStore";
 import blockController from "@/utils/blockController";
 import { getDataArray, getDefaultPropsList, getParentProps, getPropValue } from "@/utils/helpers";
 import { computed, ref } from "vue";
+import MiddleEllipsis from "../MiddleEllipsis.vue";
 
 const pageStore = usePageStore();
 const builderStore = useBuilderStore();
diff --git a/frontend/src/components/MiddleEllipsis.vue b/frontend/src/components/MiddleEllipsis.vue
new file mode 100644
index 000000000..96347caf4
--- /dev/null
+++ b/frontend/src/components/MiddleEllipsis.vue
@@ -0,0 +1,52 @@
+<template>
+	<div class="path" :title="text">
+		<span ref="start" class="start">{{ start }}</span>
+		<span v-if="hasEllipsis">...</span>
+		<span class="end">{{ end }}</span>
+	</div>
+</template>
+
+<script setup>
+import { computed, useTemplateRef } from "vue";
+
+const props = defineProps({
+	text: String,
+});
+
+const startSplitRef = useTemplateRef("start");
+
+const splitIndex = computed(() => {
+	return Math.floor(props.text.length - 16);
+});
+
+const start = computed(() => {
+	return props.text.slice(0, splitIndex.value);
+});
+
+const end = computed(() => {
+	return props.text.slice(splitIndex.value);
+});
+
+const hasEllipsis = computed(() => {
+	if (startSplitRef.value) return startSplitRef.value.scrollWidth > startSplitRef.value.clientWidth;
+	return false;
+});
+</script>
+
+<style scoped>
+.path {
+	display: flex;
+	overflow: hidden;
+	white-space: nowrap;
+	width: 100%;
+}
+
+.start {
+	overflow: hidden;
+	min-width: 0;
+}
+
+.end {
+	flex-shrink: 0;
+}
+</style>

From 39b301095ec9be7e563bb29ecbd3efa6cd83008d Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 10 May 2026 23:49:43 +0530
Subject: [PATCH 02/15] feat: make the split index customizable

---
 frontend/src/components/MiddleEllipsis.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/MiddleEllipsis.vue b/frontend/src/components/MiddleEllipsis.vue
index 96347caf4..9be03468a 100644
--- a/frontend/src/components/MiddleEllipsis.vue
+++ b/frontend/src/components/MiddleEllipsis.vue
@@ -6,17 +6,23 @@
 	</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, useTemplateRef } from "vue";
 
-const props = defineProps({
-	text: String,
-});
+const props = withDefaults(
+	defineProps<{
+		text: string;
+		lettersAfterSlplit?: number;
+	}>(),
+	{
+		lettersAfterSlplit: 16,
+	},
+);
 
 const startSplitRef = useTemplateRef("start");
 
 const splitIndex = computed(() => {
-	return Math.floor(props.text.length - 16);
+	return Math.floor(props.text.length - props.lettersAfterSlplit);
 });
 
 const start = computed(() => {

From be0bacfbd71238d981128f0410a2ca4a5ed4795f Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Sun, 10 May 2026 23:49:56 +0530
Subject: [PATCH 03/15] fix: show full key on hover

---
 frontend/src/components/Controls/PropertyControlInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Controls/PropertyControlInput.vue b/frontend/src/components/Controls/PropertyControlInput.vue
index 4ca1ba474..fec53bf93 100644
--- a/frontend/src/components/Controls/PropertyControlInput.vue
+++ b/frontend/src/components/Controls/PropertyControlInput.vue
@@ -21,7 +21,7 @@
 			class="absolute bottom-0 left-0 right-0 top-0 flex cursor-pointer items-center gap-2 rounded bg-surface-violet-1 py-0.5 pl-2.5 pr-6 text-sm text-ink-violet-1"
 			@click.stop="$emit('openDynamicModal')">
 			<FeatherIcon name="zap" class="size-3"></FeatherIcon>
-			<span class="truncate">{{ dynamicValueKey }}</span>
+			<span class="truncate" :title="dynamicValueKey">{{ dynamicValueKey }}</span>
 		</div>
 
 		<!-- Clear button -->

From e6c90a6e7631e0574e56517ddc1a258d0a0131de Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 11 May 2026 00:04:49 +0530
Subject: [PATCH 04/15] fix: use tailwind instead of css

---
 frontend/src/components/MiddleEllipsis.vue | 26 ++++------------------
 1 file changed, 4 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/MiddleEllipsis.vue b/frontend/src/components/MiddleEllipsis.vue
index 9be03468a..7e24281ba 100644
--- a/frontend/src/components/MiddleEllipsis.vue
+++ b/frontend/src/components/MiddleEllipsis.vue
@@ -1,8 +1,8 @@
 <template>
-	<div class="path" :title="text">
-		<span ref="start" class="start">{{ start }}</span>
+	<div class="flex overflow-hidden whitespace-nowrap w-full" :title="text">
+		<span ref="start" class="overflow-hidden min-w-0">{{ start }}</span>
 		<span v-if="hasEllipsis">...</span>
-		<span class="end">{{ end }}</span>
+		<span class="shrink-0">{{ end }}</span>
 	</div>
 </template>
 
@@ -37,22 +37,4 @@ const hasEllipsis = computed(() => {
 	if (startSplitRef.value) return startSplitRef.value.scrollWidth > startSplitRef.value.clientWidth;
 	return false;
 });
-</script>
-
-<style scoped>
-.path {
-	display: flex;
-	overflow: hidden;
-	white-space: nowrap;
-	width: 100%;
-}
-
-.start {
-	overflow: hidden;
-	min-width: 0;
-}
-
-.end {
-	flex-shrink: 0;
-}
-</style>
+</script>
\ No newline at end of file

From 4e0d45537b10b4b36870cc8781db7476af836f79 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 11 May 2026 00:31:29 +0530
Subject: [PATCH 05/15] fix: typo in prop

---
 frontend/src/components/MiddleEllipsis.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/MiddleEllipsis.vue b/frontend/src/components/MiddleEllipsis.vue
index 7e24281ba..856518a1f 100644
--- a/frontend/src/components/MiddleEllipsis.vue
+++ b/frontend/src/components/MiddleEllipsis.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="flex overflow-hidden whitespace-nowrap w-full" :title="text">
-		<span ref="start" class="overflow-hidden min-w-0">{{ start }}</span>
+	<div class="flex w-full overflow-hidden whitespace-nowrap" :title="text">
+		<span ref="start" class="min-w-0 overflow-hidden">{{ start }}</span>
 		<span v-if="hasEllipsis">...</span>
 		<span class="shrink-0">{{ end }}</span>
 	</div>
@@ -12,17 +12,17 @@ import { computed, useTemplateRef } from "vue";
 const props = withDefaults(
 	defineProps<{
 		text: string;
-		lettersAfterSlplit?: number;
+		lettersAfterSplit?: number;
 	}>(),
 	{
-		lettersAfterSlplit: 16,
+		lettersAfterSplit: 16,
 	},
 );
 
 const startSplitRef = useTemplateRef("start");
 
 const splitIndex = computed(() => {
-	return Math.floor(props.text.length - props.lettersAfterSlplit);
+	return Math.floor(props.text.length - props.lettersAfterSplit);
 });
 
 const start = computed(() => {
@@ -37,4 +37,4 @@ const hasEllipsis = computed(() => {
 	if (startSplitRef.value) return startSplitRef.value.scrollWidth > startSplitRef.value.clientWidth;
 	return false;
 });
-</script>
\ No newline at end of file
+</script>

From 47603df8012ca810e1ab19e2e60350e079f11ab0 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Mon, 11 May 2026 19:47:00 +0530
Subject: [PATCH 06/15] fix: using actual dynamic value key as `key`

using index as keys caused unexpected results on middle ellipsis upon search as the middle ellpsis status was being stored in the index
---
 frontend/src/components/Controls/DynamicValueHandler.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index 176213233..b54bbe4f1 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -25,7 +25,7 @@
 							</p>
 						</div>
 					</li>
-					<li v-for="(item, index) in filteredItems" :key="index">
+					<li v-for="item in filteredItems" :key="item.key">
 						<div
 							class="w-full cursor-pointer truncate rounded p-2 text-left font-mono text-p-sm text-ink-gray-7 hover:bg-surface-gray-2"
 							:class="{

From 8da878da50b5b1f444c66ad265352359b79d4130 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 14 May 2026 11:21:37 +0530
Subject: [PATCH 07/15] fix: replace div with dynamic component and refactor
 ellipsis logic

---
 frontend/src/components/MiddleEllipsis.vue | 32 ++++++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/MiddleEllipsis.vue b/frontend/src/components/MiddleEllipsis.vue
index 856518a1f..118e8c390 100644
--- a/frontend/src/components/MiddleEllipsis.vue
+++ b/frontend/src/components/MiddleEllipsis.vue
@@ -1,21 +1,23 @@
 <template>
-	<div class="flex w-full overflow-hidden whitespace-nowrap" :title="text">
+	<component :is="as" class="flex w-full overflow-hidden whitespace-nowrap" :title="text">
 		<span ref="start" class="min-w-0 overflow-hidden">{{ start }}</span>
 		<span v-if="hasEllipsis">...</span>
 		<span class="shrink-0">{{ end }}</span>
-	</div>
+	</component>
 </template>
 
 <script setup lang="ts">
-import { computed, useTemplateRef } from "vue";
+import { computed, ref, useTemplateRef, watchEffect } from "vue";
 
 const props = withDefaults(
 	defineProps<{
 		text: string;
 		lettersAfterSplit?: number;
+		as?: string;
 	}>(),
 	{
 		lettersAfterSplit: 16,
+		as: "div",
 	},
 );
 
@@ -33,8 +35,26 @@ const end = computed(() => {
 	return props.text.slice(splitIndex.value);
 });
 
-const hasEllipsis = computed(() => {
-	if (startSplitRef.value) return startSplitRef.value.scrollWidth > startSplitRef.value.clientWidth;
-	return false;
+const hasEllipsis = ref(false);
+
+watchEffect((onCleanup) => {
+	const el = startSplitRef.value;
+	if (!el) {
+		hasEllipsis.value = false;
+		return;
+	}
+
+	const updateEllipsis = () => {
+		hasEllipsis.value = el.scrollWidth > el.clientWidth;
+	};
+
+	updateEllipsis();
+
+	const resizeObserver = new ResizeObserver(updateEllipsis);
+	resizeObserver.observe(el);
+
+	onCleanup(() => {
+		resizeObserver.disconnect();
+	});
 });
 </script>

From 9bd19ca9c39c4cece6a9b9e642364ce54cf7188e Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 14 May 2026 11:22:28 +0530
Subject: [PATCH 08/15] fix: rename MiddleEllipsis to MiddleTruncate

---
 frontend/components.d.ts                                        | 2 +-
 .../src/components/{MiddleEllipsis.vue => MiddleTruncate.vue}   | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename frontend/src/components/{MiddleEllipsis.vue => MiddleTruncate.vue} (100%)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 702daaf64..99d6b782d 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -97,7 +97,7 @@ declare module 'vue' {
     MainMenu: typeof import('./src/components/MainMenu.vue')['default']
     MarginHandler: typeof import('./src/components/MarginHandler.vue')['default']
     Meta: typeof import('./src/components/Icons/Meta.vue')['default']
-    MiddleEllipsis: typeof import('./src/components/MiddleEllipsis.vue')['default']
+    MiddleTruncate: typeof import('./src/components/MiddleTruncate.vue')['default']
     NewBlockTemplate: typeof import('./src/components/Modals/NewBlockTemplate.vue')['default']
     NewBuilderVariable: typeof import('./src/components/Modals/NewBuilderVariable.vue')['default']
     NewComponent: typeof import('./src/components/Modals/NewComponent.vue')['default']
diff --git a/frontend/src/components/MiddleEllipsis.vue b/frontend/src/components/MiddleTruncate.vue
similarity index 100%
rename from frontend/src/components/MiddleEllipsis.vue
rename to frontend/src/components/MiddleTruncate.vue

From 47ec1aeefa64e6c4ab26d8abff403f097ebf5991 Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 14 May 2026 11:25:15 +0530
Subject: [PATCH 09/15] fix: replace MiddleEllipsis with MiddleTruncate in
 DynamicValueHandler

---
 frontend/src/components/Controls/DynamicValueHandler.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Controls/DynamicValueHandler.vue b/frontend/src/components/Controls/DynamicValueHandler.vue
index b54bbe4f1..7ca114026 100644
--- a/frontend/src/components/Controls/DynamicValueHandler.vue
+++ b/frontend/src/components/Controls/DynamicValueHandler.vue
@@ -19,7 +19,7 @@
 						<div
 							class="w-full cursor-pointer truncate rounded bg-surface-gray-3 p-2 text-left font-mono text-p-sm text-ink-gray-9"
 							@click.stop="selectAndSetItem(selectedItem)">
-							<MiddleEllipsis :text="selectedItem.key" />
+							<MiddleTruncate :text="selectedItem.key" />
 							<p class="truncate text-xs text-ink-gray-5" :class="{ italic: getValue(selectedItem) == null }">
 								{{ getValue(selectedItem) == null ? "No Value Set" : getValue(selectedItem) }}
 							</p>
@@ -33,7 +33,7 @@
 									selectedItem?.key === item.key && selectedItem?.comesFrom === item.comesFrom,
 							}"
 							@click.stop="selectAndSetItem(item)">
-							<MiddleEllipsis :text="item.key" />
+							<MiddleTruncate :text="item.key" />
 							<p class="truncate text-xs text-ink-gray-5" :class="{ italic: getValue(item) == null }">
 								{{ getValue(item) == null ? "No Value Set" : getValue(item) }}
 							</p>
@@ -80,7 +80,7 @@ import usePageStore from "@/stores/pageStore";
 import blockController from "@/utils/blockController";
 import { getDataArray, getDefaultPropsList, getParentProps, getPropValue } from "@/utils/helpers";
 import { computed, ref } from "vue";
-import MiddleEllipsis from "../MiddleEllipsis.vue";
+import MiddleTruncate from "../MiddleTruncate.vue";
 
 const pageStore = usePageStore();
 const builderStore = useBuilderStore();

From 3fe199d2250f910879b2e0cab0d38f6daa7d0dda Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 14 May 2026 11:43:04 +0530
Subject: [PATCH 10/15] fix: use MiddleTruncate  dynamicValueKey on right panel

---
 frontend/src/components/Controls/PropertyControlInput.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Controls/PropertyControlInput.vue b/frontend/src/components/Controls/PropertyControlInput.vue
index fec53bf93..2e427dabc 100644
--- a/frontend/src/components/Controls/PropertyControlInput.vue
+++ b/frontend/src/components/Controls/PropertyControlInput.vue
@@ -21,7 +21,7 @@
 			class="absolute bottom-0 left-0 right-0 top-0 flex cursor-pointer items-center gap-2 rounded bg-surface-violet-1 py-0.5 pl-2.5 pr-6 text-sm text-ink-violet-1"
 			@click.stop="$emit('openDynamicModal')">
 			<FeatherIcon name="zap" class="size-3"></FeatherIcon>
-			<span class="truncate" :title="dynamicValueKey">{{ dynamicValueKey }}</span>
+			<MiddleTruncate :text="dynamicValueKey" :lettersAfterSplit="8" />
 		</div>
 
 		<!-- Clear button -->
@@ -39,6 +39,7 @@
 import CrossIcon from "@/components/Icons/Cross.vue";
 import { FeatherIcon } from "frappe-ui";
 import type { Component } from "vue";
+import MiddleTruncate from "../MiddleTruncate.vue";
 
 defineProps<{
 	component: Component;

From 6f4fd1b849a0eeb9ae3b4ec4131e3a22be2bbd2b Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 14 May 2026 13:34:31 +0530
Subject: [PATCH 11/15] fix: use css truncate instead of span

---
 frontend/src/components/MiddleTruncate.vue | 30 ++--------------------
 1 file changed, 2 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/MiddleTruncate.vue b/frontend/src/components/MiddleTruncate.vue
index 118e8c390..c61294de0 100644
--- a/frontend/src/components/MiddleTruncate.vue
+++ b/frontend/src/components/MiddleTruncate.vue
@@ -1,13 +1,12 @@
 <template>
 	<component :is="as" class="flex w-full overflow-hidden whitespace-nowrap" :title="text">
-		<span ref="start" class="min-w-0 overflow-hidden">{{ start }}</span>
-		<span v-if="hasEllipsis">...</span>
+		<span class="truncate min-w-0 break-words">{{ start }}</span>
 		<span class="shrink-0">{{ end }}</span>
 	</component>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useTemplateRef, watchEffect } from "vue";
+import { computed } from "vue";
 
 const props = withDefaults(
 	defineProps<{
@@ -21,8 +20,6 @@ const props = withDefaults(
 	},
 );
 
-const startSplitRef = useTemplateRef("start");
-
 const splitIndex = computed(() => {
 	return Math.floor(props.text.length - props.lettersAfterSplit);
 });
@@ -34,27 +31,4 @@ const start = computed(() => {
 const end = computed(() => {
 	return props.text.slice(splitIndex.value);
 });
-
-const hasEllipsis = ref(false);
-
-watchEffect((onCleanup) => {
-	const el = startSplitRef.value;
-	if (!el) {
-		hasEllipsis.value = false;
-		return;
-	}
-
-	const updateEllipsis = () => {
-		hasEllipsis.value = el.scrollWidth > el.clientWidth;
-	};
-
-	updateEllipsis();
-
-	const resizeObserver = new ResizeObserver(updateEllipsis);
-	resizeObserver.observe(el);
-
-	onCleanup(() => {
-		resizeObserver.disconnect();
-	});
-});
 </script>

From b1365e971e51958f681e5af51976adf8dae3738b Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 14 May 2026 13:40:09 +0530
Subject: [PATCH 12/15] fix: replace span with MiddleTruncate in Autocomplete

---
 frontend/src/components/Controls/Autocomplete.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index 61e62476c..c692ee2d3 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -83,7 +83,7 @@
 								:disabled="option.disabled"
 								class="group flex cursor-default select-none items-center gap-2 rounded px-2 py-1.5 text-sm text-ink-gray-9 transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-surface-gray-1 data-[disabled]:opacity-50">
 								<component v-if="option.prefix" :is="option.prefix" class="h-4 w-4 flex-shrink-0" />
-								<span class="w-full flex-1 truncate">{{ option.label }}</span>
+								<MiddleTruncate :text="option.label" :letters-after-split="8" />
 								<component
 									v-if="option.suffix"
 									:is="option.suffix"
@@ -125,6 +125,7 @@ import {
 } from "reka-ui";
 import type { Component, ComponentPublicInstance } from "vue";
 import { computed, nextTick, ref, useAttrs, watch } from "vue";
+import MiddleTruncate from "../MiddleTruncate.vue";
 
 interface Option {
 	label: string;

From 5a5e3ebccf9f2395475b2987d0d2661a2c12c02d Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 14 May 2026 13:49:16 +0530
Subject: [PATCH 13/15] fix: show last part completely and truncate rest of it

---
 frontend/src/components/MiddleTruncate.vue | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/MiddleTruncate.vue b/frontend/src/components/MiddleTruncate.vue
index c61294de0..5a5999d67 100644
--- a/frontend/src/components/MiddleTruncate.vue
+++ b/frontend/src/components/MiddleTruncate.vue
@@ -1,7 +1,7 @@
 <template>
 	<component :is="as" class="flex w-full overflow-hidden whitespace-nowrap" :title="text">
-		<span class="truncate min-w-0 break-words">{{ start }}</span>
-		<span class="shrink-0">{{ end }}</span>
+		<span class="min-w-4 truncate">{{ textParts.join(".") }}</span>
+		<span class="" v-if="textParts.length > 1">{{ textParts[textParts.length - 1] }}</span>
 	</component>
 </template>
 
@@ -20,15 +20,7 @@ const props = withDefaults(
 	},
 );
 
-const splitIndex = computed(() => {
-	return Math.floor(props.text.length - props.lettersAfterSplit);
-});
-
-const start = computed(() => {
-	return props.text.slice(0, splitIndex.value);
-});
-
-const end = computed(() => {
-	return props.text.slice(splitIndex.value);
+const textParts = computed(() => {
+	return props.text.split(".");
 });
 </script>

From 89990c6be76fc889dccfe9d589d785988271db9e Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 14 May 2026 13:52:25 +0530
Subject: [PATCH 14/15] fix: remove lettersAfterSplit prop from MiddleTruncate

---
 frontend/src/components/Controls/Autocomplete.vue         | 2 +-
 frontend/src/components/Controls/PropertyControlInput.vue | 2 +-
 frontend/src/components/MiddleTruncate.vue                | 2 --
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index c692ee2d3..0d5e9db2f 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -83,7 +83,7 @@
 								:disabled="option.disabled"
 								class="group flex cursor-default select-none items-center gap-2 rounded px-2 py-1.5 text-sm text-ink-gray-9 transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-surface-gray-1 data-[disabled]:opacity-50">
 								<component v-if="option.prefix" :is="option.prefix" class="h-4 w-4 flex-shrink-0" />
-								<MiddleTruncate :text="option.label" :letters-after-split="8" />
+								<MiddleTruncate :text="option.label" />
 								<component
 									v-if="option.suffix"
 									:is="option.suffix"
diff --git a/frontend/src/components/Controls/PropertyControlInput.vue b/frontend/src/components/Controls/PropertyControlInput.vue
index 2e427dabc..1807ffaca 100644
--- a/frontend/src/components/Controls/PropertyControlInput.vue
+++ b/frontend/src/components/Controls/PropertyControlInput.vue
@@ -21,7 +21,7 @@
 			class="absolute bottom-0 left-0 right-0 top-0 flex cursor-pointer items-center gap-2 rounded bg-surface-violet-1 py-0.5 pl-2.5 pr-6 text-sm text-ink-violet-1"
 			@click.stop="$emit('openDynamicModal')">
 			<FeatherIcon name="zap" class="size-3"></FeatherIcon>
-			<MiddleTruncate :text="dynamicValueKey" :lettersAfterSplit="8" />
+			<MiddleTruncate :text="dynamicValueKey" />
 		</div>
 
 		<!-- Clear button -->
diff --git a/frontend/src/components/MiddleTruncate.vue b/frontend/src/components/MiddleTruncate.vue
index 5a5999d67..a6f3afb0f 100644
--- a/frontend/src/components/MiddleTruncate.vue
+++ b/frontend/src/components/MiddleTruncate.vue
@@ -11,11 +11,9 @@ import { computed } from "vue";
 const props = withDefaults(
 	defineProps<{
 		text: string;
-		lettersAfterSplit?: number;
 		as?: string;
 	}>(),
 	{
-		lettersAfterSplit: 16,
 		as: "div",
 	},
 );

From 402cab1bb8561c9156786113732750199ff1a49f Mon Sep 17 00:00:00 2001
From: "stravo1@mac" <stravoone@gmail.com>
Date: Thu, 14 May 2026 20:57:23 +0530
Subject: [PATCH 15/15] fix: handle endSplit text overflow with gradient
 masking

---
 frontend/src/components/MiddleTruncate.vue | 43 ++++++++++++++++++++--
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/MiddleTruncate.vue b/frontend/src/components/MiddleTruncate.vue
index a6f3afb0f..e17e04333 100644
--- a/frontend/src/components/MiddleTruncate.vue
+++ b/frontend/src/components/MiddleTruncate.vue
@@ -1,12 +1,20 @@
 <template>
-	<component :is="as" class="flex w-full overflow-hidden whitespace-nowrap" :title="text">
-		<span class="min-w-4 truncate">{{ textParts.join(".") }}</span>
-		<span class="" v-if="textParts.length > 1">{{ textParts[textParts.length - 1] }}</span>
+	<component
+		:is="as"
+		ref="wrapper"
+		class="flex w-full overflow-hidden whitespace-nowrap"
+		:title="text"
+		:style="applyGradient">
+		<span class="min-w-8 truncate">{{ truncatedSplit }}</span>
+		<span v-if="textParts.length > 1">{{ endSplit }}</span>
 	</component>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, useTemplateRef, ref, watchEffect } from "vue";
+
+const wrapperRef: any = useTemplateRef("wrapper");
+const hasOverflow = ref(false);
 
 const props = withDefaults(
 	defineProps<{
@@ -18,7 +26,34 @@ const props = withDefaults(
 	},
 );
 
+watchEffect(() => {
+	if (!wrapperRef.value) return;
+
+	const checkOverflow = () => {
+		hasOverflow.value = wrapperRef.value!.scrollWidth > wrapperRef.value!.clientWidth;
+	};
+
+	checkOverflow();
+
+	const resizeObserver = new ResizeObserver(checkOverflow);
+	resizeObserver.observe(wrapperRef.value);
+
+	return () => resizeObserver.disconnect();
+});
+
 const textParts = computed(() => {
 	return props.text.split(".");
 });
+
+const truncatedSplit = computed(() => {
+	return textParts.value.slice(0, textParts.value.length - 1).join(".");
+});
+
+const endSplit = computed(() => {
+	return `.${textParts.value[textParts.value.length - 1]}`;
+});
+
+const applyGradient = computed(() => {
+	return hasOverflow.value ? "mask-image: linear-gradient(to right, black 90%, transparent)" : "";
+});
 </script>