fix: query editor height and width (#14)

Author: ye11ow

src/components/QueryEditor.tsx

@@ -1,4 +1,4 @@
-import { CodeEditor, InlineField, Stack } from '@grafana/ui';
+import { CodeEditor, Field } from '@grafana/ui';
 import { TpDataSourceOptions, TpQuery } from '../types';
 
 import { DataSource } from '../datasource';
@@ -15,18 +15,16 @@ export function QueryEditor({ query, onChange }: Props) {
   const { sql } = query;
 
   return (
-    <Stack gap={0}>
-      <InlineField label="Query" labelWidth={16} tooltip="Not used yet">
-        <CodeEditor
-          onChange={onSQLChange}
-          width={600}
-          height={200}
-          language="sql"
-          showLineNumbers={true}
-          showMiniMap={false}
-          value={sql || ''}
-        />
-      </InlineField>
-    </Stack>
+    <Field>
+      <CodeEditor
+        onChange={onSQLChange}
+        width="100%"
+        height={200}
+        language="sql"
+        showLineNumbers={true}
+        showMiniMap={false}
+        value={sql || ''}
+      />
+    </Field>
   );
 }

src/components/VariableQueryEditor.tsx

@@ -24,8 +24,8 @@ export const VariableQueryEditor = ({ onChange, query }: VariableQueryProps) =>
       <CodeEditor
         onChange={onSQLChange}
         onBlur={saveQuery}
-        width={600}
-        height={100}
+        width="100%"
+        height={200}
         language="sql"
         showLineNumbers={true}
         showMiniMap={false}