[Fleet] Set code editor height to solve an overlap in default policy …

…settings (#113763) (#113907) Co-authored-by: Cristina Amico <[email protected]>
elastic · Oct 5, 2021 · fa2b832 · fa2b832
1 parent 5c15a98
commit fa2b832
Showing 1 changed file with 33 additions and 25 deletions.
diff --git a/...ons/agent_policy/create_package_policy_page/components/package_policy_input_var_field.tsx b/...ons/agent_policy/create_package_policy_page/components/package_policy_input_var_field.tsx
@@ -17,12 +17,17 @@ import {
   EuiFieldPassword,
   EuiCodeBlock,
 } from '@elastic/eui';
+import styled from 'styled-components';
 
 import type { RegistryVarsEntry } from '../../../../types';
 import { CodeEditor } from '../../../../../../../../../../src/plugins/kibana_react/public';
 
 import { MultiTextInput } from './multi_text_input';
 
+const FixedHeightDiv = styled.div`
+  height: 300px;
+`;
+
 export const PackagePolicyInputVarField: React.FunctionComponent<{
   varDef: RegistryVarsEntry;
   value: any;
@@ -55,31 +60,34 @@ export const PackagePolicyInputVarField: React.FunctionComponent<{
             <pre>{value}</pre>
           </EuiCodeBlock>
         ) : (
-          <CodeEditor
-            languageId="yaml"
-            width="100%"
-            height="300px"
-            value={value}
-            onChange={onChange}
-            options={{
-              minimap: {
-                enabled: false,
-              },
-              ariaLabel: i18n.translate('xpack.fleet.packagePolicyField.yamlCodeEditor', {
-                defaultMessage: 'YAML Code Editor',
-              }),
-              scrollBeyondLastLine: false,
-              wordWrap: 'off',
-              wrappingIndent: 'indent',
-              tabSize: 2,
-              // To avoid left margin
-              lineNumbers: 'off',
-              lineNumbersMinChars: 0,
-              glyphMargin: false,
-              folding: false,
-              lineDecorationsWidth: 0,
-            }}
-          />
+          <FixedHeightDiv>
+            <CodeEditor
+              languageId="yaml"
+              width="100%"
+              height="300px"
+              value={value}
+              onChange={onChange}
+              options={{
+                minimap: {
+                  enabled: false,
+                },
+                ariaLabel: i18n.translate('xpack.fleet.packagePolicyField.yamlCodeEditor', {
+                  defaultMessage: 'YAML Code Editor',
+                }),
+                scrollBeyondLastLine: false,
+                wordWrap: 'off',
+                wrappingIndent: 'indent',
+                tabSize: 2,
+                // To avoid left margin
+                lineNumbers: 'off',
+                lineNumbersMinChars: 0,
+                glyphMargin: false,
+                folding: false,
+                lineDecorationsWidth: 0,
+                overviewRulerBorder: false,
+              }}
+            />
+          </FixedHeightDiv>
         );
       case 'bool':
         return (