From d6dae041db825558b2477de4e5a0134ab50c6718 Mon Sep 17 00:00:00 2001
From: Kostiantyn Miakshyn <molodchick@gmail.com>
Date: Sun, 9 Aug 2026 00:19:51 +0200
Subject: [PATCH] fix(relation): Fix ellipsis for long selected relation labels

Signed-off-by: Kostiantyn Miakshyn <molodchick@gmail.com>
---
 .../ncTable/partials/TableCellRelation.vue    | 28 ++++++++++++++++++-
 .../partials/rowTypePartials/RelationForm.vue | 17 +++++++++--
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/ncTable/partials/TableCellRelation.vue b/src/shared/components/ncTable/partials/TableCellRelation.vue
index cd6b75ef7d..9964d5d475 100644
--- a/src/shared/components/ncTable/partials/TableCellRelation.vue
+++ b/src/shared/components/ncTable/partials/TableCellRelation.vue
@@ -19,13 +19,14 @@
 			tabindex="0"
 			@keydown.enter.stop="saveChanges"
 			@keydown.escape.stop="cancelEdit">
+			<span class="relation-select-hidden-label" aria-hidden="true">{{ relationLabel }}</span>
 			<NcSelect v-model="editValue"
 				:options="relationOptions"
 				:clearable="!column.mandatory"
 				:reduce="(option) => option.id"
 				:aria-label-combobox="t('tables', 'Select relation value')"
 				:disabled="localLoading || !canEditCell()"
-				style="width: 100%;" />
+				class="relation-select" />
 			<div v-if="localLoading" class="loading-indicator">
 				<div class="icon-loading-small icon-loading-inline" />
 			</div>
@@ -169,6 +170,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+:deep(.relation-select) {
+	width: 100%;
+}
+
+.relation-select-hidden-label {
+	display: block;
+	visibility: hidden;
+	white-space: nowrap;
+	height: 0;
+	overflow: hidden;
+	pointer-events: none;
+}
+
 .cell-relation {
 	width: 100%;
 
@@ -187,6 +201,18 @@ export default {
 	border-radius: var(--vs-border-radius);
 }
 
+:deep(.vs__selected) {
+	min-width: 0;
+	max-width: 100%;
+}
+
+:deep(.vs__selected .name-parts) {
+	display: flex !important;
+	align-items: center;
+	max-width: 100% !important;
+	min-width: 0;
+}
+
 .edit-mode {
 	.icon-loading-inline {
 		margin-inline-start: 4px;
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/RelationForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/RelationForm.vue
index 5aa6377858..2a5b778939 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/RelationForm.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/RelationForm.vue
@@ -3,9 +3,10 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<RowFormWrapper :title="column.title" :mandatory="column.mandatory" :description="column.description" :width="2" :readonly="column.readonly">
+	<RowFormWrapper :title="column.title" :mandatory="column.mandatory" :description="column.description" :readonly="column.readonly">
 		<NcSelect
 			v-model="localValue"
+			class="relation-select"
 			:options="relationOptions"
 			:clearable="!column.mandatory"
 			:reduce="(option) => option.id"
@@ -90,7 +91,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.relation-form {
+:deep(.relation-select) {
 	width: 100%;
 }
+
+:deep(.vs__selected) {
+	min-width: 0;
+	max-width: 100%;
+}
+
+:deep(.vs__selected .name-parts) {
+	display: flex !important;
+	align-items: center;
+	max-width: 100% !important;
+	min-width: 0;
+}
 </style>