diff options
-rw-r--r-- | client/js/app/src/app/pages/querybuilder/index.jsx | 6 | ||||
-rw-r--r-- | client/js/app/src/app/pages/querybuilder/query-filters/query-filters.jsx | 7 |
2 files changed, 10 insertions, 3 deletions
diff --git a/client/js/app/src/app/pages/querybuilder/index.jsx b/client/js/app/src/app/pages/querybuilder/index.jsx index a69881dfedc..13be497ed52 100644 --- a/client/js/app/src/app/pages/querybuilder/index.jsx +++ b/client/js/app/src/app/pages/querybuilder/index.jsx @@ -12,7 +12,11 @@ export function QueryBuilder() { <QueryBuilderProvider> <Container sx={{ rowGap: '21px' }}> <QueryEndpoint /> - <SimpleGrid cols={3}> + <SimpleGrid + breakpoints={[{ maxWidth: 'sm', cols: 1 }]} + cols={3} + spacing="xl" + > <QueryFilters /> <QueryDerived /> <QueryResponse /> 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 19f3a728387..7a68bebc6e9 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 @@ -7,6 +7,7 @@ import { Box, Stack, Badge, + Group, } from '@mantine/core'; import { Container, Content, Icon } from 'app/components'; import { @@ -122,8 +123,10 @@ function Inputs({ id, type, inputs }) { export function QueryFilters() { const { children, type } = useQueryBuilderContext('query'); return ( - <Stack align="flex-start"> - <Badge variant="filled">Query filters</Badge> + <Stack> + <Group> + <Badge variant="filled">Query filters</Badge> + </Group> <Container sx={{ alignContent: 'start' }}> <Content> <Inputs type={type.children} inputs={children} /> |