Increase the size of the CodeEditor used for additionalJsonData

simPod · Sep 29, 2020 · 5f6eeba · 5f6eeba
1 parent 69c923a
commit 5f6eeba
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 = [
@@ -84,10 +86,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%;
+}