fix: Wrap text in CodeMirror expression editor (#8665)

Fixes https://github.com/prometheus/prometheus/issues/8663

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2021-03-29 12:48:04 +02:00 committed by GitHub
parent 49559380eb
commit 2043c60f11
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 1 deletions

View file

@ -32,8 +32,11 @@ input[type='checkbox']:checked + label {
text-transform: capitalize;
}
.expression-input {
/* Using a more specific selector here to be able to override Bootstrap's default input group styles. */
.input-group.expression-input {
margin-bottom: 10px;
/* Prevent the input group from wrapping around when the editor content is too long for a line. */
flex-wrap: nowrap;
}
.expression-input .cm-expression-input {

View file

@ -128,6 +128,7 @@ const CMExpressionInput: FC<CMExpressionInputProps> = ({
closeBrackets(),
autocompletion(),
highlightSelectionMatches(),
EditorView.lineWrapping,
keymap.of([
...closeBracketsKeymap,
...defaultKeymap,