From 2043c60f111e2f718fdf729046cdec793dd5049e Mon Sep 17 00:00:00 2001 From: Julius Volz Date: Mon, 29 Mar 2021 12:48:04 +0200 Subject: [PATCH] fix: Wrap text in CodeMirror expression editor (#8665) Fixes https://github.com/prometheus/prometheus/issues/8663 Signed-off-by: Julius Volz --- web/ui/react-app/src/App.css | 5 ++++- web/ui/react-app/src/pages/graph/CMExpressionInput.tsx | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/web/ui/react-app/src/App.css b/web/ui/react-app/src/App.css index b1f54660a5..cf0cf9406e 100644 --- a/web/ui/react-app/src/App.css +++ b/web/ui/react-app/src/App.css @@ -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 { diff --git a/web/ui/react-app/src/pages/graph/CMExpressionInput.tsx b/web/ui/react-app/src/pages/graph/CMExpressionInput.tsx index ab9de6d36e..12655dc294 100644 --- a/web/ui/react-app/src/pages/graph/CMExpressionInput.tsx +++ b/web/ui/react-app/src/pages/graph/CMExpressionInput.tsx @@ -128,6 +128,7 @@ const CMExpressionInput: FC = ({ closeBrackets(), autocompletion(), highlightSelectionMatches(), + EditorView.lineWrapping, keymap.of([ ...closeBracketsKeymap, ...defaultKeymap,