From d1147c3c242d9c9646e0cd17229a74400fc70289 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81bastien=20Loix?= <sabee77@gmail.com>
Date: Tue, 3 Nov 2020 11:20:07 +0100
Subject: [PATCH] Set the CodeEditor width to 100%

---
 .../field_parameters/painless_script_parameter.tsx     | 10 +++++-----
 .../runtime_field_form/runtime_field_form.tsx          |  3 +--
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/painless_script_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/painless_script_parameter.tsx
index 19746034b530c..9042e7f6ee328 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/painless_script_parameter.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/painless_script_parameter.tsx
@@ -6,6 +6,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { PainlessLang } from '@kbn/monaco';
 import { EuiFormRow, EuiDescribedFormGroup } from '@elastic/eui';
 
 import { CodeEditor, UseField } from '../../../shared_imports';
@@ -18,7 +19,7 @@ interface Props {
 
 export const PainlessScriptParameter = ({ stack }: Props) => {
   return (
-    <UseField path="script.source" config={getFieldConfig('script')}>
+    <UseField<string> path="script.source" config={getFieldConfig('script')}>
       {(scriptField) => {
         const error = scriptField.getErrorsMessages();
         const isInvalid = error ? Boolean(error.length) : false;
@@ -26,11 +27,10 @@ export const PainlessScriptParameter = ({ stack }: Props) => {
         const field = (
           <EuiFormRow label={scriptField.label} error={error} isInvalid={isInvalid} fullWidth>
             <CodeEditor
-              languageId="painless"
-              // 99% width allows the editor to resize horizontally. 100% prevents it from resizing.
-              width="99%"
+              languageId={PainlessLang.ID}
+              width="100%"
               height="400px"
-              value={scriptField.value as string}
+              value={scriptField.value}
               onChange={scriptField.setValue}
               options={{
                 fontSize: 12,
diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx
index 2e38354a3b94b..6068302f5b269 100644
--- a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx
+++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx
@@ -122,8 +122,7 @@ const RuntimeFieldFormComp = ({ defaultValue, onChange, links }: Props) => {
             >
               <CodeEditor
                 languageId={PainlessLang.ID}
-                // 99% width allows the editor to resize horizontally. 100% prevents it from resizing.
-                width="99%"
+                width="100%"
                 height="300px"
                 value={value}
                 onChange={setValue}