diff --git a/src/QueryEditor.tsx b/src/QueryEditor.tsx
index b1a98f65..332b113d 100644
--- 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
new file mode 100644
index 00000000..727cadea
--- /dev/null
+++ b/src/css/json-editor.css
@@ -0,0 +1,7 @@
+.grafana-json-datasource-editor {
+    width: 100%;
+}
+
+.grafana-json-datasource-editor div {
+    width: 100%;
+}
\ No newline at end of file