diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/theme.ts b/packages/editor-ui/src/components/InlineExpressionEditor/theme.ts index 7e85f0cb21..4c1225063b 100644 --- a/packages/editor-ui/src/components/InlineExpressionEditor/theme.ts +++ b/packages/editor-ui/src/components/InlineExpressionEditor/theme.ts @@ -44,6 +44,9 @@ export const inputTheme = ({ rows } = { rows: 5 }) => { '.cm-scroller': { lineHeight: '1.68', }, + '.cm-lineWrapping': { + wordBreak: 'break-all', + }, }); return [theme, highlighter.resolvableStyle]; diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue index 5467ca5c1b..a5fa01eae7 100644 --- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue +++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue @@ -44,10 +44,10 @@ [$style.multipleModes]: hasMultipleModes, }" > +
@@ -819,17 +819,34 @@ $--mode-selector-width: 92px; .resourceLocator { display: flex; flex-wrap: wrap; + position: relative; + + --input-issues-width: 28px; .inputContainer { display: flex; align-items: center; width: 100%; + --input-border-top-left-radius: 0; + --input-border-bottom-left-radius: 0; + > div { width: 100%; } } + .background { + position: absolute; + background-color: var(--color-background-input-triple); + top: 0; + bottom: 0; + left: 0; + right: var(--input-issues-width); + border: 1px solid var(--border-color-base); + border-radius: var(--border-radius-base); + } + &.multipleModes { .inputContainer { display: flex; @@ -889,7 +906,9 @@ $--mode-selector-width: 92px; .openResourceLink { width: 25px !important; - margin-left: var(--spacing-2xs); + padding-left: var(--spacing-2xs); + padding-top: var(--spacing-4xs); + align-self: flex-start; } .parameter-issues {