diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/frontend/@n8n/design-system/src/components/N8nInputLabel/InputLabel.vue index b08090bbed..5353516798 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nInputLabel/InputLabel.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nInputLabel/InputLabel.vue @@ -74,7 +74,7 @@ const addTargetBlank = (html: string) => :class="[$style.infoIcon, showTooltip ? $style.visible : $style.hidden]" > - + @@ -143,6 +143,10 @@ const addTargetBlank = (html: string) => } } +.infoIcon:has(.icon[aria-describedby]) { + opacity: 1; +} + .trailing-content { display: flex; gap: var(--spacing-3xs); diff --git a/packages/frontend/@n8n/design-system/src/directives/n8n-html.ts b/packages/frontend/@n8n/design-system/src/directives/n8n-html.ts index 9ce3aa8439..3cf0680637 100644 --- a/packages/frontend/@n8n/design-system/src/directives/n8n-html.ts +++ b/packages/frontend/@n8n/design-system/src/directives/n8n-html.ts @@ -1,5 +1,5 @@ import sanitize from 'sanitize-html'; -import type { DirectiveBinding, ObjectDirective } from 'vue'; +import type { DirectiveBinding, FunctionDirective } from 'vue'; /** * Custom directive `n8nHtml` to replace v-html from Vue to sanitize content. @@ -28,11 +28,11 @@ const configuredSanitize = (html: string) => }, }); -export const n8nHtml: ObjectDirective = { - beforeMount(el: HTMLElement, binding: DirectiveBinding) { +export const n8nHtml: FunctionDirective = ( + el: HTMLElement, + binding: DirectiveBinding, +) => { + if (binding.value !== binding.oldValue) { el.innerHTML = configuredSanitize(binding.value); - }, - beforeUpdate(el: HTMLElement, binding: DirectiveBinding) { - el.innerHTML = configuredSanitize(binding.value); - }, + } };