fix(editor): Fix overrideField text overflow (no-changelog) (#13068)

packages/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue

@@ -15,13 +15,12 @@ const emit = defineEmits<{
 		<div :class="[$style.iconStars, 'el-input-group__prepend', $style.noCornersRight]">
 			<AiStarsIcon :class="$style.aiStarsIcon" />
 		</div>
-		<div :class="['flex-grow', $style.overrideInput]">
-			<N8nText color="text-dark" size="small">{{
-				i18n.baseText('parameterOverride.overridePanelText')
-			}}</N8nText>
-			<N8nText color="text-dark" size="small" bold>{{
-				i18n.baseText('parameterOverride.overridePanelTextModel')
-			}}</N8nText>
+		<div :class="$style.overrideInput">
+			<N8nText
+				v-n8n-html="i18n.baseText('parameterOverride.overridePanelText')"
+				color="text-dark"
+				size="small"
+			/>
 		</div>
 		<N8nIconButton
 			v-if="!isReadOnly"
@@ -54,26 +53,23 @@ const emit = defineEmits<{
 .overrideInput {
 	height: 30px;
 	align-content: center;
-	flex-grow: 1;
-
-	* > input {
-		padding-left: 0;
-		// We need this in light mode
-		background-color: var(--color-foreground-base) !important;
-		border: none;
-	}
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .overrideCloseButton {
 	padding: 0px 8px 3px; // the icon used is off-center vertically
 	border: 0px;
 	color: var(--color-text-base);
+	margin-left: auto;
 	--button-hover-background-color: transparent;
 	--button-active-background-color: transparent;
 }
 
 .contentOverrideContainer {
 	display: flex;
+	white-space: nowrap;
+	width: 100%;
 	gap: var(--spacing-4xs);
 	border-radius: var(--border-radius-base);
 	background-color: var(--color-foreground-base);

packages/editor-ui/src/components/ResourceLocator/resourceLocator.scss

@@ -4,7 +4,7 @@ $--mode-selector-width: 92px;
 	--input-background-color: initial;
 	--input-font-color: initial;
 	--input-border-color: initial;
-	flex-basis: $--mode-selector-width;
+	width: $--mode-selector-width;
 
 	input {
 		border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
@@ -48,7 +48,7 @@ $--mode-selector-width: 92px;
 
 .resourceLocator {
 	display: inline-flex;
-	flex-wrap: wrap;
+	flex-wrap: nowrap;
 	width: 100%;
 	position: relative;
 
@@ -91,7 +91,7 @@ $--mode-selector-width: 92px;
 		.inputContainer {
 			display: flex;
 			align-items: center;
-			flex-basis: calc(100% - $--mode-selector-width);
+			width: calc(100% - $--mode-selector-width);
 			flex-grow: 1;
 		}
 

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -1450,8 +1450,7 @@
 	"parameterInputList.parameterOptions": "Parameter Options",
 	"parameterInputList.loadingFields": "Loading fields...",
 	"parameterInputList.loadingError": "Error loading fields. Refresh you page and try again.",
-	"parameterOverride.overridePanelText": "Defined automatically by the ",
-	"parameterOverride.overridePanelTextModel": "model",
+	"parameterOverride.overridePanelText": "Defined automatically by the <b>model</b>",
 	"parameterOverride.applyOverrideButtonTooltip": "Let the model define this parameter",
 	"parameterOverride.descriptionTooltip": "Explain to the LLM how it should generate this value, a good, specific description would allow LLMs to produce expected results much more often",
 	"personalizationModal.businessOwner": "Business Owner",