Fix monospace font in textarea for query-tracer

1 files changed, 10 insertions, 10 deletions

diff --git a/client/js/app/src/app/pages/querytracer/query-tracer.jsx b/client/js/app/src/app/pages/querytracer/query-tracer.jsx
index 70ac934b291..758182d4f3f 100644
--- a/client/js/app/src/app/pages/querytracer/query-tracer.jsx
+++ b/client/js/app/src/app/pages/querytracer/query-tracer.jsx
@@ -1,25 +1,25 @@
 import React, { useState } from 'react';
-import { Textarea } from '@mantine/core';
-import { Container } from 'app/components';
+import { Stack, Textarea } from '@mantine/core';
 import { DownloadJeager } from 'app/pages/querybuilder/query-response/download-jeager';
 
 export function QueryTracer() {
   const [response, setResponse] = useState('');
 
   return (
-    <Container>
+    <Stack>
       <Textarea
-        styles={{
-          root: { height: '100%' },
-          wrapper: { height: '100%' },
-          input: { height: '100%' },
-        }}
+        styles={(theme) => ({
+          input: {
+            fontFamily: theme.fontFamilyMonospace,
+            fontSize: theme.fontSizes.xs,
+          },
+        })}
         minRows={21}
         autosize
         value={response}
         onChange={({ target }) => setResponse(target.value)}
-      ></Textarea>
+      />
       <DownloadJeager fullWidth response={response} />
-    </Container>
+    </Stack>
   );
 }