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>

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 {

web/ui/react-app/src/pages/graph/CMExpressionInput.tsx

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