From 7cef070d7cb273e3c81ee27017f9fef2e478e3ea Mon Sep 17 00:00:00 2001
From: Kostiantyn Miakshyn <molodchick@gmail.com>
Date: Sun, 9 Aug 2026 00:19:51 +0200
Subject: [PATCH 1/2] 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>

From 04b88463bfd61aa6aa9ae8f29a79b5cc9f557c59 Mon Sep 17 00:00:00 2001
From: samin-z <samin.zavarkesh@gmail.com>
Date: Thu, 1 Oct 2026 16:47:41 +0200
Subject: [PATCH 2/2] fix(select): fix long labels overlapping the icons

Signed-off-by: samin-z <samin.zavarkesh@gmail.com>
---
 src/main.js                                   |  1 +
 src/modules/modals/CreateRow.vue              | 11 +++++--
 src/modules/modals/EditRow.vue                | 11 +++++--
 .../ncTable/partials/TableCellRelation.vue    | 25 ++-------------
 .../partials/rowTypePartials/RelationForm.vue | 13 +-------
 src/styles/select-selected-label.scss         | 31 +++++++++++++++++++
 6 files changed, 53 insertions(+), 39 deletions(-)
 create mode 100644 src/styles/select-selected-label.scss

diff --git a/src/main.js b/src/main.js
index 8d85d63a7c..44f2652671 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router.js'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
+import './styles/select-selected-label.scss'
 
 const pinia = createPinia()
 
diff --git a/src/modules/modals/CreateRow.vue b/src/modules/modals/CreateRow.vue
index 3d54a6e720..a2f84a2689 100644
--- a/src/modules/modals/CreateRow.vue
+++ b/src/modules/modals/CreateRow.vue
@@ -236,9 +236,16 @@ export default {
 		min-width: 100% !important;
 	}
 
-	:where(.name-parts) {
+	:deep(.vs__search) {
+		min-width: 0 !important;
+	}
+
+	:deep(.vs__selected .name-parts) {
 		display: block !important;
-		max-width: fit-content !important;
+		max-width: 100% !important;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 }
 
diff --git a/src/modules/modals/EditRow.vue b/src/modules/modals/EditRow.vue
index 22be6ab5eb..0006e4b810 100644
--- a/src/modules/modals/EditRow.vue
+++ b/src/modules/modals/EditRow.vue
@@ -334,9 +334,16 @@ export default {
 		min-width: 100% !important;
 	}
 
-	:where(.name-parts) {
+	:deep(.vs__search) {
+		min-width: 0 !important;
+	}
+
+	:deep(.vs__selected .name-parts) {
 		display: block !important;
-		max-width: fit-content !important;
+		max-width: 100% !important;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 }
 
diff --git a/src/shared/components/ncTable/partials/TableCellRelation.vue b/src/shared/components/ncTable/partials/TableCellRelation.vue
index 9964d5d475..6e51acdad0 100644
--- a/src/shared/components/ncTable/partials/TableCellRelation.vue
+++ b/src/shared/components/ncTable/partials/TableCellRelation.vue
@@ -19,7 +19,6 @@
 			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"
@@ -170,17 +169,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-:deep(.relation-select) {
+.relation-select {
 	width: 100%;
-}
-
-.relation-select-hidden-label {
-	display: block;
-	visibility: hidden;
-	white-space: nowrap;
-	height: 0;
-	overflow: hidden;
-	pointer-events: none;
+	min-width: 0;
 }
 
 .cell-relation {
@@ -201,18 +192,6 @@ 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 2a5b778939..3dfca776d6 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/RelationForm.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/RelationForm.vue
@@ -91,19 +91,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-:deep(.relation-select) {
+.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>
diff --git a/src/styles/select-selected-label.scss b/src/styles/select-selected-label.scss
new file mode 100644
index 0000000000..7d83cbeb3f
--- /dev/null
+++ b/src/styles/select-selected-label.scss
@@ -0,0 +1,31 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/* Keep a long selected value inside the field, before the clear and dropdown icons. */
+.v-select.select {
+	width: 100%;
+	min-width: 0;
+	max-width: 100%;
+
+	.vs__actions {
+		flex-shrink: 0;
+	}
+}
+
+.v-select.select.vs--single {
+	.vs__selected-options {
+		min-width: 0;
+		overflow: hidden;
+	}
+
+	.vs__selected {
+		display: block;
+		flex: 1 1 auto;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}