Fix background

2 files changed, 16 insertions, 7 deletions

diff --git a/client/js/app/src/app/pages/querybuilder/index.jsx b/client/js/app/src/app/pages/querybuilder/index.jsx
index 13be497ed52..b8889dfd7c5 100644
--- a/client/js/app/src/app/pages/querybuilder/index.jsx
+++ b/client/js/app/src/app/pages/querybuilder/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { SimpleGrid } from '@mantine/core';
-import { Container } from 'app/components';
+import { SimpleGrid, Title } from '@mantine/core';
+import { Container, Content, Icon } from 'app/components';
 import { QueryBuilderProvider } from 'app/pages/querybuilder/context/query-builder-provider';
 import { QueryFilters } from 'app/pages/querybuilder/query-filters/query-filters';
 import { QueryDerived } from 'app/pages/querybuilder/query-derived/query-derived';
@@ -11,15 +11,24 @@ export function QueryBuilder() {
   return (
     <QueryBuilderProvider>
       <Container sx={{ rowGap: '21px' }}>
+        <Title order={2}>
+          <Icon name="arrows-to-dot" /> Query Builder
+        </Title>
         <QueryEndpoint />
         <SimpleGrid
           breakpoints={[{ maxWidth: 'sm', cols: 1 }]}
           cols={3}
-          spacing="xl"
+          spacing="lg"
         >
-          <QueryFilters />
-          <QueryDerived />
-          <QueryResponse />
+          <Content>
+            <QueryFilters />
+          </Content>
+          <Content>
+            <QueryDerived />
+          </Content>
+          <Content>
+            <QueryResponse />
+          </Content>
         </SimpleGrid>
       </Container>
     </QueryBuilderProvider>
diff --git a/client/js/app/src/app/pages/querybuilder/query-filters/query-filters.jsx b/client/js/app/src/app/pages/querybuilder/query-filters/query-filters.jsx
index 7a68bebc6e9..628f52908a1 100644
--- a/client/js/app/src/app/pages/querybuilder/query-filters/query-filters.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-filters/query-filters.jsx
@@ -128,7 +128,7 @@ export function QueryFilters() {
         <Badge variant="filled">Query filters</Badge>
       </Group>
       <Container sx={{ alignContent: 'start' }}>
-        <Content>
+        <Content padding={0}>
           <Inputs type={type.children} inputs={children} />
         </Content>
       </Container>