diff --git a/src/QueryEditor.tsx b/src/QueryEditor.tsx
index 8bcf83be..12b02af6 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 = [
@@ -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
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