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

This commit is contained in:
Charlie Kolb 2025-02-05 13:19:15 +01:00 committed by GitHub
parent 0bc0fc6c12
commit 32f2ac6773
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 15 additions and 20 deletions

View file

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

View file

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

View file

@ -1450,8 +1450,7 @@
"parameterInputList.parameterOptions": "Parameter Options", "parameterInputList.parameterOptions": "Parameter Options",
"parameterInputList.loadingFields": "Loading fields...", "parameterInputList.loadingFields": "Loading fields...",
"parameterInputList.loadingError": "Error loading fields. Refresh you page and try again.", "parameterInputList.loadingError": "Error loading fields. Refresh you page and try again.",
"parameterOverride.overridePanelText": "Defined automatically by the ", "parameterOverride.overridePanelText": "Defined automatically by the <b>model</b>",
"parameterOverride.overridePanelTextModel": "model",
"parameterOverride.applyOverrideButtonTooltip": "Let the model define this parameter", "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", "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", "personalizationModal.businessOwner": "Business Owner",