fix(relation): Fix ellipsis for long selected relation labels

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()
 

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;
 	}
 }
 

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;
 	}
 }
 

src/shared/components/ncTable/partials/TableCellRelation.vue

@@ -25,7 +25,7 @@
 				: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 +169,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.relation-select {
+	width: 100%;
+	min-width: 0;
+}
+
 .cell-relation {
 	width: 100%;
 

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,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.relation-form {
+.relation-select {
 	width: 100%;
+	min-width: 0;
 }
 </style>

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;
+	}
+}