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 cd6b75ef7d..6e51acdad0 100644 --- a/src/shared/components/ncTable/partials/TableCellRelation.vue +++ b/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" />
@@ -169,6 +169,11 @@ export default { 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; + } +}