Increase the size of the CodeEditor used for additionalJsonData

Co-authored-by: Simon Podlipsky <simon@podlipsky.net>
simPod · Oct 5, 2020 · a5922b2 · a5922b2
1 parent 08c9ef6
commit a5922b2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/QueryEditor.tsx b/src/QueryEditor.tsx
@@ -8,6 +8,8 @@ import { Format } from './format';
 
 import { GenericOptions, GrafanaQuery } from './types';
 
+import './css/json-editor.css';
+
 type Props = QueryEditorProps<DataSource, GrafanaQuery, GenericOptions>;
 
 const formatAsOptions = [
@@ -134,10 +136,10 @@ export const QueryEditor: ComponentType<Props> = ({ datasource, onChange, onRunQ
         <div className="gf-form-label">
           <Label>Additional JSON Data</Label>
         </div>
-        <div className="gf-form">
+        <div className="gf-form grafana-json-datasource-editor">
           <CodeEditor
-            width="500px"
-            height="100px"
+            width="100%"
+            height="175px"
             language="json"
             showLineNumbers={true}
             showMiniMap={data.length > 100}

diff --git a/src/css/json-editor.css b/src/css/json-editor.css
@@ -0,0 +1,7 @@
+.grafana-json-datasource-editor {
+    width: 100%;
+}
+
+.grafana-json-datasource-editor div {
+    width: 100%;
+}