diff --git a/src/components/SqlEditor.tsx b/src/components/SqlEditor.tsx
index 937e283c..d03e0cf2 100644
--- a/src/components/SqlEditor.tsx
+++ b/src/components/SqlEditor.tsx
@@ -110,7 +110,7 @@ export const SqlEditor = (props: SqlEditorProps) => {
 
   return (
     <>
-      <div className={'gf-form ' + styles.QueryEditor.queryType}>
+      <div className={`${styles.QueryEditor.queryType} ${styles.Common.flexContainer}`}>
         <QueryTypeSwitcher queryType={queryType} onChange={(queryType) => saveChanges({ queryType })} sqlEditor />
       </div>
       <div className={styles.Common.wrapper}>
diff --git a/src/components/configEditor/HttpHeadersConfig.tsx b/src/components/configEditor/HttpHeadersConfig.tsx
index 165c8321..773b409b 100644
--- a/src/components/configEditor/HttpHeadersConfig.tsx
+++ b/src/components/configEditor/HttpHeadersConfig.tsx
@@ -72,7 +72,6 @@ export const HttpHeadersConfig = (props: HttpHeadersConfigProps) => {
       <Field label={labels.forwardGrafanaHeaders.label} description={labels.forwardGrafanaHeaders.tooltip}>
         <Switch
           data-testid={selectors.forwardGrafanaHeadersSwitch}
-          className={'gf-form'}
           value={forwardGrafanaHeaders}
           onChange={(e) => updateForwardGrafanaHeaders(e.currentTarget.checked)}
         />
@@ -155,7 +154,6 @@ const HttpHeaderEditor = (props: HttpHeaderEditorProps) => {
           <Field label={labels.secureLabel}>
             <Switch
               data-testid={selectors.headerSecureSwitch}
-              className="gf-form"
               value={secure}
               onChange={(e) => setSecure(e.currentTarget.checked)}
               onBlur={() => onUpdate()}
diff --git a/src/components/configEditor/LabeledInput.tsx b/src/components/configEditor/LabeledInput.tsx
index 78650577..a4b688b0 100644
--- a/src/components/configEditor/LabeledInput.tsx
+++ b/src/components/configEditor/LabeledInput.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Input, InlineFormLabel } from '@grafana/ui';
+import { styles } from 'styles';
 
 interface LabeledInputProps {
   label: string;
@@ -14,7 +15,7 @@ export function LabeledInput(props: LabeledInputProps) {
   const { label, tooltip, placeholder, disabled, value, onChange } = props;
 
   return (
-    <div className="gf-form">
+    <div className={styles.Common.flex}>
       <InlineFormLabel width={12} className="query-keyword" tooltip={tooltip || label}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/configEditor/LogsConfig.tsx b/src/components/configEditor/LogsConfig.tsx
index ca45c9b9..996e2913 100644
--- a/src/components/configEditor/LogsConfig.tsx
+++ b/src/components/configEditor/LogsConfig.tsx
@@ -9,6 +9,7 @@ import { CHLogsConfig } from 'types/config';
 import allLabels from 'labels';
 import { columnLabelToPlaceholder } from 'data/utils';
 import { Switch } from 'components/queryBuilder/Switch';
+import { styles } from 'styles';
 
 interface LogsConfigProps {
   logsConfig?: CHLogsConfig;
@@ -125,7 +126,7 @@ export const LogsConfig = (props: LogsConfigProps) => {
           onChange={onSelectContextColumnsChange}
           wide
         />
-        <div className="gf-form">
+        <div className={styles.Common.flex}>
           <InlineFormLabel width={12} className="query-keyword" tooltip={labels.contextColumns.columns.tooltip}>
             {labels.contextColumns.columns.label}
           </InlineFormLabel>
diff --git a/src/components/configEditor/QuerySettingsConfig.tsx b/src/components/configEditor/QuerySettingsConfig.tsx
index e6a14dfa..73c42c51 100644
--- a/src/components/configEditor/QuerySettingsConfig.tsx
+++ b/src/components/configEditor/QuerySettingsConfig.tsx
@@ -100,7 +100,7 @@ export const QuerySettingsConfig = (props: QuerySettingsConfigProps) => {
       </Field>
 
       <Field label={labels.validateSql.label} description={labels.validateSql.tooltip}>
-        <Switch className="gf-form" value={validateSql || false} onChange={onValidateSqlChange} role="checkbox" />
+        <Switch value={validateSql || false} onChange={onValidateSqlChange} role="checkbox" />
       </Field>
     </ConfigSection>
   );
diff --git a/src/components/queryBuilder/AggregateEditor.test.tsx b/src/components/queryBuilder/AggregateEditor.test.tsx
index d88356bc..fe5e4069 100644
--- a/src/components/queryBuilder/AggregateEditor.test.tsx
+++ b/src/components/queryBuilder/AggregateEditor.test.tsx
@@ -30,8 +30,8 @@ describe('AggregateEditor', () => {
     const addButton = result.getByTestId(selectors.components.QueryBuilder.AggregateEditor.addButton);
     expect(addButton).toBeInTheDocument();
     await userEvent.click(addButton);
-    expect(onAggregatesChange).toBeCalledTimes(1);
-    expect(onAggregatesChange).toBeCalledWith([expect.anything()]);
+    expect(onAggregatesChange).toHaveBeenCalledTimes(1);
+    expect(onAggregatesChange).toHaveBeenCalledWith([expect.anything()]);
   });
 
   it('should call onAggregatesChange when remove aggregate button is clicked', async () => {
@@ -45,7 +45,7 @@ describe('AggregateEditor', () => {
     const removeButton = result.getByTestId(selectors.components.QueryBuilder.AggregateEditor.itemRemoveButton);
     expect(removeButton).toBeInTheDocument();
     await userEvent.click(removeButton);
-    expect(onAggregatesChange).toBeCalledWith([]);
+    expect(onAggregatesChange).toHaveBeenCalledWith([]);
   });
 
   it('should call onAggregatesChange when aggregate is updated', async () => {
@@ -62,6 +62,6 @@ describe('AggregateEditor', () => {
     fireEvent.keyDown(aggregateSelect, { key: 'ArrowDown' });
     fireEvent.keyDown(aggregateSelect, { key: 'ArrowDown' });
     fireEvent.keyDown(aggregateSelect, { key: 'Enter' });
-    expect(onAggregatesChange).toBeCalledWith([expectedAggregate]);
+    expect(onAggregatesChange).toHaveBeenCalledWith([expectedAggregate]);
   });
 });
diff --git a/src/components/queryBuilder/AggregateEditor.tsx b/src/components/queryBuilder/AggregateEditor.tsx
index 0e57ba3f..846632ff 100644
--- a/src/components/queryBuilder/AggregateEditor.tsx
+++ b/src/components/queryBuilder/AggregateEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { SelectableValue } from '@grafana/data';
-import { InlineFormLabel, Select, Button, Input, HorizontalGroup } from '@grafana/ui';
+import { InlineFormLabel, Select, Button, Input, Stack } from '@grafana/ui';
 import { AggregateColumn, AggregateType, TableColumn } from 'types/queryBuilder';
 import labels from 'labels';
 import { selectors } from 'selectors';
@@ -43,7 +43,7 @@ const Aggregate = (props: AggregateProps) => {
   }
 
   return (
-    <HorizontalGroup wrap align="flex-start" justify="flex-start">
+    <Stack wrap alignItems="flex-start" justifyContent="flex-start">
       <Select
         width={20}
         className={styles.Common.inlineSelect}
@@ -83,7 +83,7 @@ const Aggregate = (props: AggregateProps) => {
         icon="trash-alt"
         onClick={() => removeAggregate(index)}
       />
-    </HorizontalGroup>
+    </Stack>
   );
 };
 
diff --git a/src/components/queryBuilder/ColumnsEditor.test.tsx b/src/components/queryBuilder/ColumnsEditor.test.tsx
index 02566931..7f3c2d68 100644
--- a/src/components/queryBuilder/ColumnsEditor.test.tsx
+++ b/src/components/queryBuilder/ColumnsEditor.test.tsx
@@ -49,8 +49,8 @@ describe('ColumnsEditor', () => {
     fireEvent.keyDown(multiSelect, { key: 'ArrowDown' });
     fireEvent.keyDown(multiSelect, { key: 'Enter' });
 
-    expect(onSelectedColumnsChange).toBeCalledTimes(1);
-    expect(onSelectedColumnsChange).toBeCalledWith([expect.any(Object), expect.any(Object)]);
+    expect(onSelectedColumnsChange).toHaveBeenCalledTimes(1);
+    expect(onSelectedColumnsChange).toHaveBeenCalledWith([expect.any(Object), expect.any(Object)]);
   });
 
   it('should call onSelectedColumnsChange when a column is deselected', () => {
@@ -67,8 +67,8 @@ describe('ColumnsEditor', () => {
 
     const removeButton = result.getByTestId('times'); // find by "x" symbol
     fireEvent.click(removeButton);
-    expect(onSelectedColumnsChange).toBeCalledTimes(1);
-    expect(onSelectedColumnsChange).toBeCalledWith([]);
+    expect(onSelectedColumnsChange).toHaveBeenCalledTimes(1);
+    expect(onSelectedColumnsChange).toHaveBeenCalledWith([]);
   });
 
   it('should close when clicked outside', () => {
diff --git a/src/components/queryBuilder/ColumnsEditor.tsx b/src/components/queryBuilder/ColumnsEditor.tsx
index 7f70e65c..a8d38331 100644
--- a/src/components/queryBuilder/ColumnsEditor.tsx
+++ b/src/components/queryBuilder/ColumnsEditor.tsx
@@ -79,7 +79,7 @@ export const ColumnsEditor = (props: ColumnsEditorProps) => {
   };
 
   return (
-    <div className="gf-form">
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/DatabaseTableSelect.test.tsx b/src/components/queryBuilder/DatabaseTableSelect.test.tsx
index 7385a79b..b128e649 100644
--- a/src/components/queryBuilder/DatabaseTableSelect.test.tsx
+++ b/src/components/queryBuilder/DatabaseTableSelect.test.tsx
@@ -41,8 +41,8 @@ describe('DatabaseSelect', () => {
     );
     expect(result.container.firstChild).not.toBeNull();
 
-    expect(onDatabaseChange).toBeCalledTimes(1);
-    expect(onDatabaseChange).toBeCalledWith(defaultDB);
+    expect(onDatabaseChange).toHaveBeenCalledTimes(1);
+    expect(onDatabaseChange).toHaveBeenCalledWith(defaultDB);
   });
 
   it('should call onDatabaseChange when a database is selected', async () => {
@@ -61,8 +61,8 @@ describe('DatabaseSelect', () => {
     fireEvent.keyDown(multiSelect, { key: 'ArrowDown' }); // "other" db, a custom value
     fireEvent.keyDown(multiSelect, { key: 'ArrowDown' }); // "default" db
     fireEvent.keyDown(multiSelect, { key: 'Enter' });
-    expect(onDatabaseChange).toBeCalledTimes(1);
-    expect(onDatabaseChange).toBeCalledWith(defaultDB);
+    expect(onDatabaseChange).toHaveBeenCalledTimes(1);
+    expect(onDatabaseChange).toHaveBeenCalledWith(defaultDB);
   });
 });
 
@@ -116,8 +116,8 @@ describe('TableSelect', () => {
     fireEvent.keyDown(multiSelect, { key: 'ArrowDown' }); // "other" table, a custom value
     fireEvent.keyDown(multiSelect, { key: 'ArrowDown' }); // test table
     fireEvent.keyDown(multiSelect, { key: 'Enter' });
-    expect(onTableChange).toBeCalledTimes(1);
-    expect(onTableChange).toBeCalledWith(testTable);
+    expect(onTableChange).toHaveBeenCalledTimes(1);
+    expect(onTableChange).toHaveBeenCalledWith(testTable);
   });
 });
 
diff --git a/src/components/queryBuilder/EditorTypeSwitcher.tsx b/src/components/queryBuilder/EditorTypeSwitcher.tsx
index e6d51887..b7f509ba 100644
--- a/src/components/queryBuilder/EditorTypeSwitcher.tsx
+++ b/src/components/queryBuilder/EditorTypeSwitcher.tsx
@@ -8,6 +8,7 @@ import { EditorType, CHQuery, defaultCHBuilderQuery } from 'types/sql';
 import { QueryBuilderOptions } from 'types/queryBuilder';
 import { mapQueryTypeToGrafanaFormat } from 'data/utils';
 import { Datasource } from 'data/CHDatasource';
+import { styles } from 'styles';
 
 interface CHEditorTypeSwitcherProps {
   query: CHQuery;
@@ -85,7 +86,7 @@ export const EditorTypeSwitcher = (props: CHEditorTypeSwitcherProps) => {
     setCannotConvertModalState(false);
   };
   return (
-    <span>
+    <span className={styles.Common.flexContainer}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/FilterEditor.test.tsx b/src/components/queryBuilder/FilterEditor.test.tsx
index 0e7db95b..cb34bde6 100644
--- a/src/components/queryBuilder/FilterEditor.test.tsx
+++ b/src/components/queryBuilder/FilterEditor.test.tsx
@@ -31,9 +31,9 @@ describe('FilterEditor', () => {
       expect(result.container.firstChild).not.toBeNull();
       expect(result.getAllByText(selectors.components.QueryEditor.QueryBuilder.WHERE.label).length).toBe(1);
       expect(result.getByTestId('query-builder-filters-add-button')).toBeInTheDocument();
-      expect(onFiltersChange).toBeCalledTimes(0);
+      expect(onFiltersChange).toHaveBeenCalledTimes(0);
       await userEvent.click(result.getByTestId('query-builder-filters-add-button'));
-      expect(onFiltersChange).toBeCalledTimes(1);
+      expect(onFiltersChange).toHaveBeenCalledTimes(1);
       expect(onFiltersChange).toHaveBeenCalledWith([defaultNewFilter]);
     });
     it('should render buttons and labels correctly', async () => {
@@ -105,10 +105,10 @@ describe('FilterEditor', () => {
       expect(result.getAllByTestId('query-builder-filters-inline-add-button').length).toBe(1);
       expect(result.getAllByTestId('query-builder-filters-remove-button').length).toBe(filters.length);
       await userEvent.click(result.getByTestId('query-builder-filters-inline-add-button'));
-      expect(onFiltersChange).toBeCalledTimes(1);
+      expect(onFiltersChange).toHaveBeenCalledTimes(1);
       expect(onFiltersChange).toHaveBeenNthCalledWith(1, [...filters, defaultNewFilter]);
       await userEvent.click(result.getAllByTestId('query-builder-filters-remove-button')[0]);
-      expect(onFiltersChange).toBeCalledTimes(2);
+      expect(onFiltersChange).toHaveBeenCalledTimes(2);
       expect(onFiltersChange).toHaveBeenNthCalledWith(2, [filters[1]]);
     });
   });
diff --git a/src/components/queryBuilder/FilterEditor.tsx b/src/components/queryBuilder/FilterEditor.tsx
index ae6300e3..374d96ba 100644
--- a/src/components/queryBuilder/FilterEditor.tsx
+++ b/src/components/queryBuilder/FilterEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { SelectableValue } from '@grafana/data';
-import { Button, HorizontalGroup, InlineFormLabel, Input, MultiSelect, RadioButtonGroup, Select } from '@grafana/ui';
+import { Button, InlineFormLabel, Input, MultiSelect, RadioButtonGroup, Select, Stack } from '@grafana/ui';
 import { Filter, FilterOperator, TableColumn, NullFilter } from 'types/queryBuilder';
 import * as utils from 'components/queryBuilder/utils';
 import labels from 'labels';
@@ -360,7 +360,7 @@ export const FilterEditor = (props: {
   };
 
   return (
-    <HorizontalGroup wrap align="flex-start" justify="flex-start">
+    <Stack wrap alignItems="flex-start" justifyContent="flex-start">
       {index !== 0 && (
         <RadioButtonGroup options={conditions} value={filter.condition} onChange={(e) => onFilterConditionChange(e!)} />
       )}
@@ -407,7 +407,7 @@ export const FilterEditor = (props: {
         className={styles.Common.smallBtn}
         onClick={() => removeFilter(index)}
       />
-    </HorizontalGroup>
+    </Stack>
   );
 };
 
diff --git a/src/components/queryBuilder/GroupByEditor.test.tsx b/src/components/queryBuilder/GroupByEditor.test.tsx
index 77b4c75d..a443f3e7 100644
--- a/src/components/queryBuilder/GroupByEditor.test.tsx
+++ b/src/components/queryBuilder/GroupByEditor.test.tsx
@@ -33,7 +33,7 @@ describe('GroupByEditor', () => {
     expect(result.queryAllByText('a').length).toBe(1); // is popup open
     fireEvent.keyDown(multiSelect, { key: 'Enter' });
     expect(result.queryAllByText('a').length).toBe(0); // is popup closed
-    expect(onGroupByChange).toBeCalledTimes(1);
-    expect(onGroupByChange).toBeCalledWith(expect.any(Object));
+    expect(onGroupByChange).toHaveBeenCalledTimes(1);
+    expect(onGroupByChange).toHaveBeenCalledWith(expect.any(Object));
   });
 });
diff --git a/src/components/queryBuilder/GroupByEditor.tsx b/src/components/queryBuilder/GroupByEditor.tsx
index e2bab9f9..d6997e31 100644
--- a/src/components/queryBuilder/GroupByEditor.tsx
+++ b/src/components/queryBuilder/GroupByEditor.tsx
@@ -24,7 +24,7 @@ export const GroupByEditor = (props: GroupByEditorProps) => {
   };
 
   return (
-    <div className="gf-form">
+    <div>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/LimitEditor.test.tsx b/src/components/queryBuilder/LimitEditor.test.tsx
index f7fabe97..71ba00bd 100644
--- a/src/components/queryBuilder/LimitEditor.test.tsx
+++ b/src/components/queryBuilder/LimitEditor.test.tsx
@@ -19,7 +19,7 @@ describe('LimitEditor', () => {
     fireEvent.change(limitInput, { target: { value: 5 } });
     fireEvent.blur(limitInput);
     expect(limitInput).toHaveValue(5);
-    expect(onLimitChange).toBeCalledTimes(1);
-    expect(onLimitChange).toBeCalledWith(5);
+    expect(onLimitChange).toHaveBeenCalledTimes(1);
+    expect(onLimitChange).toHaveBeenCalledWith(5);
   });
 });
diff --git a/src/components/queryBuilder/LimitEditor.tsx b/src/components/queryBuilder/LimitEditor.tsx
index f4142d9b..0329a6ac 100644
--- a/src/components/queryBuilder/LimitEditor.tsx
+++ b/src/components/queryBuilder/LimitEditor.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { InlineFormLabel, Input } from '@grafana/ui';
 import labels from 'labels';
 import { selectors } from 'selectors';
+import { styles } from 'styles';
 
 interface LimitEditorProps {
   limit: number;
@@ -13,7 +14,7 @@ export const LimitEditor = (props: LimitEditorProps) => {
   const { label, tooltip } = labels.components.LimitEditor;
 
   return (
-    <div className="gf-form">
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/ModeSwitch.test.tsx b/src/components/queryBuilder/ModeSwitch.test.tsx
index b17c9380..1379b5f6 100644
--- a/src/components/queryBuilder/ModeSwitch.test.tsx
+++ b/src/components/queryBuilder/ModeSwitch.test.tsx
@@ -29,15 +29,15 @@ describe('ModeSwitch', () => {
     expect(buttonB).toBeInTheDocument();
 
     fireEvent.click(buttonB);
-    expect(onChange).toBeCalledTimes(1);
-    expect(onChange).toBeCalledWith(true);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(true);
 
     result.rerender(
       <ModeSwitch labelA={labelA} labelB={labelB} value={true} onChange={onChange} label={label} tooltip={tooltip} />
     );
 
     fireEvent.click(buttonA);
-    expect(onChange).toBeCalledTimes(2);
-    expect(onChange).toBeCalledWith(false);
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(onChange).toHaveBeenCalledWith(false);
   });
 });
diff --git a/src/components/queryBuilder/ModeSwitch.tsx b/src/components/queryBuilder/ModeSwitch.tsx
index eb100691..59e75fe8 100644
--- a/src/components/queryBuilder/ModeSwitch.tsx
+++ b/src/components/queryBuilder/ModeSwitch.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { RadioButtonGroup, InlineFormLabel } from '@grafana/ui';
+import { styles } from 'styles';
 
 export interface ModeSwitchProps {
   labelA: string;
@@ -28,7 +29,7 @@ export const ModeSwitch = (props: ModeSwitchProps) => {
   ];
 
   return (
-    <div className="gf-form">
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/OrderByEditor.test.tsx b/src/components/queryBuilder/OrderByEditor.test.tsx
index 70afa340..7c911372 100644
--- a/src/components/queryBuilder/OrderByEditor.test.tsx
+++ b/src/components/queryBuilder/OrderByEditor.test.tsx
@@ -79,10 +79,10 @@ describe('OrderByEditor', () => {
     expect(result.getByTestId('query-builder-orderby-add-button')).toBeInTheDocument();
     expect(result.queryByTestId('query-builder-orderby-item-wrapper')).not.toBeInTheDocument();
     expect(result.queryByTestId('query-builder-orderby-remove-button')).not.toBeInTheDocument();
-    expect(onOrderByChange).toBeCalledTimes(0);
+    expect(onOrderByChange).toHaveBeenCalledTimes(0);
     await userEvent.click(result.getByTestId('query-builder-orderby-add-button'));
-    expect(onOrderByChange).toBeCalledTimes(1);
-    expect(onOrderByChange).toBeCalledWith([{ name: 'foo', dir: OrderByDirection.ASC }]);
+    expect(onOrderByChange).toHaveBeenCalledTimes(1);
+    expect(onOrderByChange).toHaveBeenCalledWith([{ name: 'foo', dir: OrderByDirection.ASC }]);
   });
   it('should remove items when remove button clicked', async () => {
     const onOrderByChange = jest.fn();
@@ -97,11 +97,11 @@ describe('OrderByEditor', () => {
       />
     );
     expect(result.container.firstChild).not.toBeNull();
-    expect(onOrderByChange).toBeCalledTimes(0);
+    expect(onOrderByChange).toHaveBeenCalledTimes(0);
     await userEvent.click(result.getAllByTestId('query-builder-orderby-remove-button')[1]);
     await userEvent.click(result.getAllByTestId('query-builder-orderby-remove-button')[0]);
     await userEvent.click(result.getAllByTestId('query-builder-orderby-add-button')[0]);
-    expect(onOrderByChange).toBeCalledTimes(3);
+    expect(onOrderByChange).toHaveBeenCalledTimes(3);
     expect(onOrderByChange).toHaveBeenNthCalledWith(1, [{ name: 'foo', dir: OrderByDirection.ASC }]);
     expect(onOrderByChange).toHaveBeenNthCalledWith(2, [{ name: 'bar', dir: OrderByDirection.ASC }]);
     expect(onOrderByChange).toHaveBeenNthCalledWith(3, [
diff --git a/src/components/queryBuilder/OtelVersionSelect.test.tsx b/src/components/queryBuilder/OtelVersionSelect.test.tsx
index c355ed4a..ffa84ddb 100644
--- a/src/components/queryBuilder/OtelVersionSelect.test.tsx
+++ b/src/components/queryBuilder/OtelVersionSelect.test.tsx
@@ -42,8 +42,8 @@ describe('OtelVersionSelect', () => {
     const toggle = result.getByRole('checkbox');
     expect(toggle).toBeInTheDocument();
     fireEvent.click(toggle);
-    expect(onEnabledChange).toBeCalledTimes(1);
-    expect(onEnabledChange).toBeCalledWith(true);
+    expect(onEnabledChange).toHaveBeenCalledTimes(1);
+    expect(onEnabledChange).toHaveBeenCalledWith(true);
   });
 
   it('should call onEnabledChange when the switch is disabled', () => {
@@ -61,8 +61,8 @@ describe('OtelVersionSelect', () => {
     const toggle = result.getByRole('checkbox');
     expect(toggle).toBeInTheDocument();
     fireEvent.click(toggle);
-    expect(onEnabledChange).toBeCalledTimes(1);
-    expect(onEnabledChange).toBeCalledWith(false);
+    expect(onEnabledChange).toHaveBeenCalledTimes(1);
+    expect(onEnabledChange).toHaveBeenCalledWith(false);
   });
 
   it('should call onVersionChange when a new version is selected', () => {
@@ -81,8 +81,8 @@ describe('OtelVersionSelect', () => {
     expect(select).toBeInTheDocument();
     fireEvent.keyDown(select, { key: 'ArrowDown' });
     fireEvent.keyDown(select, { key: 'Enter' });
-    expect(onVersionChange).toBeCalledTimes(1);
-    expect(onVersionChange).toBeCalledWith(expect.any(String));
+    expect(onVersionChange).toHaveBeenCalledTimes(1);
+    expect(onVersionChange).toHaveBeenCalledWith(expect.any(String));
   });
 
   it('should disable version selection when switch is disabled', () => {
diff --git a/src/components/queryBuilder/QueryBuilder.tsx b/src/components/queryBuilder/QueryBuilder.tsx
index fb6adff8..62e813a4 100644
--- a/src/components/queryBuilder/QueryBuilder.tsx
+++ b/src/components/queryBuilder/QueryBuilder.tsx
@@ -18,7 +18,7 @@ import {
   setTable,
 } from 'hooks/useBuilderOptionsState';
 import TraceIdInput from './TraceIdInput';
-import { Alert, Button, VerticalGroup } from '@grafana/ui';
+import { Alert, Button, Stack } from '@grafana/ui';
 import { Components as allSelectors } from 'selectors';
 import allLabels from 'labels';
 
@@ -49,7 +49,7 @@ export const QueryBuilder = (props: QueryBuilderProps) => {
 
   return (
     <div data-testid="query-editor-section-builder">
-      <div className={'gf-form ' + styles.QueryEditor.queryType}>
+      <div className={styles.QueryEditor.queryType}>
         <DatabaseTableSelect
           datasource={datasource}
           database={builderOptions.database}
@@ -58,7 +58,7 @@ export const QueryBuilder = (props: QueryBuilderProps) => {
           onTableChange={onTableChange}
         />
       </div>
-      <div className={'gf-form ' + styles.QueryEditor.queryType}>
+      <div className={styles.QueryEditor.queryType} style={{ marginBottom: '4px' }}>
         <QueryTypeSwitcher queryType={builderOptions.queryType} onChange={onQueryTypeChange} />
       </div>
 
@@ -142,7 +142,7 @@ const MinimizedQueryViewer = (props: MinimizedQueryBuilder) => {
     <div data-testid="query-editor-minimized-viewer">
       {showConfigWarning && (
         <Alert title="" severity="warning">
-          <VerticalGroup>
+          <Stack direction="column">
             <div>
               {`To enable data linking, enter your default ${configQueryType} configuration in your `}
               <a
@@ -152,14 +152,14 @@ const MinimizedQueryViewer = (props: MinimizedQueryBuilder) => {
                 ClickHouse Data Source settings
               </a>
             </div>
-          </VerticalGroup>
+          </Stack>
         </Alert>
       )}
       {!traceId && (
         <Alert title="" severity="warning">
-          <VerticalGroup>
+          <Stack>
             <div>Trace ID is empty</div>
-          </VerticalGroup>
+          </Stack>
         </Alert>
       )}
 
diff --git a/src/components/queryBuilder/QueryTypeSwitcher.test.tsx b/src/components/queryBuilder/QueryTypeSwitcher.test.tsx
index f7aed13f..7d92ad06 100644
--- a/src/components/queryBuilder/QueryTypeSwitcher.test.tsx
+++ b/src/components/queryBuilder/QueryTypeSwitcher.test.tsx
@@ -28,7 +28,7 @@ describe('QueryTypeSwitcher', () => {
     const timeSeriesButton = result.getByLabelText(options.TimeSeries);
     expect(timeSeriesButton).toBeInTheDocument();
     fireEvent.click(timeSeriesButton);
-    expect(onChange).toBeCalledTimes(1);
-    expect(onChange).toBeCalledWith(QueryType.TimeSeries);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(QueryType.TimeSeries);
   });
 });
diff --git a/src/components/queryBuilder/SqlPreview.tsx b/src/components/queryBuilder/SqlPreview.tsx
index 1bffd7e6..70ee00a6 100644
--- a/src/components/queryBuilder/SqlPreview.tsx
+++ b/src/components/queryBuilder/SqlPreview.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { InlineFormLabel } from '@grafana/ui';
 import labels from 'labels';
+import { styles } from 'styles';
 
 interface SqlPreviewProps {
   sql: string;
@@ -11,7 +12,7 @@ export const SqlPreview = (props: SqlPreviewProps) => {
   const { label, tooltip } = labels.components.SqlPreview;
 
   return (
-    <div className="gf-form">
+    <div className={styles.Common.flex}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/Switch.tsx b/src/components/queryBuilder/Switch.tsx
index 973d60f5..5c7b1e9d 100644
--- a/src/components/queryBuilder/Switch.tsx
+++ b/src/components/queryBuilder/Switch.tsx
@@ -26,17 +26,12 @@ export const Switch = (props: SwitchProps) => {
   const labelStyle = 'query-keyword ' + (inline ? styles.QueryEditor.inlineField : '');
 
   return (
-    <div className="gf-form">
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel width={wide ? 12 : 8} className={labelStyle} tooltip={tooltip}>
         {label}
       </InlineFormLabel>
       <div style={switchContainerStyle}>
-        <GrafanaSwitch
-          disabled={disabled}
-          className="gf-form"
-          value={value}
-          onChange={(e) => onChange(e.currentTarget.checked)}
-        />
+        <GrafanaSwitch disabled={disabled} value={value} onChange={(e) => onChange(e.currentTarget.checked)} />
       </div>
     </div>
   );
diff --git a/src/components/queryBuilder/TraceIdInput.tsx b/src/components/queryBuilder/TraceIdInput.tsx
index 24a27834..48c4376f 100644
--- a/src/components/queryBuilder/TraceIdInput.tsx
+++ b/src/components/queryBuilder/TraceIdInput.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import allLabels from 'labels';
 import { InlineFormLabel, Input } from '@grafana/ui';
 import { selectors } from 'selectors';
+import { styles } from 'styles';
 
 interface TraceIdInputProps {
   traceId: string;
@@ -19,7 +20,7 @@ const TraceIdInput = (props: TraceIdInputProps) => {
   }, [traceId]);
 
   return (
-    <div className="gf-form">
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
diff --git a/src/components/queryBuilder/views/LogsQueryBuilder.tsx b/src/components/queryBuilder/views/LogsQueryBuilder.tsx
index 5f92d1ee..f9573217 100644
--- a/src/components/queryBuilder/views/LogsQueryBuilder.tsx
+++ b/src/components/queryBuilder/views/LogsQueryBuilder.tsx
@@ -11,7 +11,7 @@ import { getColumnByHint } from 'data/sqlGenerator';
 import { columnFilterDateTime, columnFilterString } from 'data/columnFilters';
 import { Datasource } from 'data/CHDatasource';
 import { useBuilderOptionChanges } from 'hooks/useBuilderOptionChanges';
-import { Alert, Button, InlineFormLabel, Input, VerticalGroup } from '@grafana/ui';
+import { Alert, Button, InlineFormLabel, Input, Stack } from '@grafana/ui';
 import useColumns from 'hooks/useColumns';
 import { BuilderOptionsReducerAction, setOptions, setOtelEnabled, setOtelVersion } from 'hooks/useBuilderOptionsState';
 import useIsNewQuery from 'hooks/useIsNewQuery';
@@ -121,7 +121,7 @@ export const LogsQueryBuilder = (props: LogsQueryBuilderProps) => {
 
   const configWarning = showConfigWarning && (
     <Alert title="" severity="warning" buttonContent="Close" onRemove={() => setConfigWarningOpen(false)}>
-      <VerticalGroup>
+      <Stack direction="column">
         <div>
           {'To speed up your query building, enter your default logs configuration in your '}
           <a
@@ -131,7 +131,7 @@ export const LogsQueryBuilder = (props: LogsQueryBuilderProps) => {
             ClickHouse Data Source settings
           </a>
         </div>
-      </VerticalGroup>
+      </Stack>
     </Alert>
   );
 
@@ -150,61 +150,61 @@ export const LogsQueryBuilder = (props: LogsQueryBuilderProps) => {
         selectedColumns={builderState.selectedColumns}
         onSelectedColumnsChange={onOptionChange('selectedColumns')}
       />
-      <div className="gf-form">
-        <ColumnSelect
-          disabled={builderState.otelEnabled}
-          allColumns={allColumns}
-          selectedColumn={builderState.timeColumn}
-          invalid={!builderState.timeColumn}
-          onColumnChange={onOptionChange('timeColumn')}
-          columnFilterFn={columnFilterDateTime}
-          columnHint={ColumnHint.Time}
-          label={labels.logTimeColumn.label}
-          tooltip={labels.logTimeColumn.tooltip}
-        />
-        <ColumnSelect
-          disabled={builderState.otelEnabled}
-          allColumns={allColumns}
-          selectedColumn={builderState.logLevelColumn}
-          invalid={!builderState.logLevelColumn}
-          onColumnChange={onOptionChange('logLevelColumn')}
-          columnFilterFn={columnFilterString}
-          columnHint={ColumnHint.LogLevel}
-          label={labels.logLevelColumn.label}
-          tooltip={labels.logLevelColumn.tooltip}
-          inline
-        />
-      </div>
-      <div className="gf-form">
-        <ColumnSelect
-          disabled={builderState.otelEnabled}
-          allColumns={allColumns}
-          selectedColumn={builderState.messageColumn}
-          invalid={!builderState.messageColumn}
-          onColumnChange={onOptionChange('messageColumn')}
-          columnFilterFn={columnFilterString}
-          columnHint={ColumnHint.LogMessage}
-          label={labels.logMessageColumn.label}
-          tooltip={labels.logMessageColumn.tooltip}
-        />
-        <ColumnSelect
-          disabled={builderState.otelEnabled}
-          allColumns={allColumns}
-          selectedColumn={builderState.labelsColumn}
-          invalid={!builderState.labelsColumn}
-          onColumnChange={onOptionChange('labelsColumn')}
-          columnHint={ColumnHint.LogLabels}
-          label={labels.logLabelsColumn.label}
-          tooltip={labels.logLabelsColumn.tooltip}
-          inline
-        />
-        {/* <Switch
-          value={builderState.liveView}
-          onChange={onOptionChange('liveView')}
-          label={labels.liveView.label}
-          tooltip={labels.liveView.tooltip}
-          inline
-        /> */}
+      <div className={styles.Common.flex}>
+        <div className={styles.Common.flexColumn}>
+          <ColumnSelect
+            disabled={builderState.otelEnabled}
+            allColumns={allColumns}
+            selectedColumn={builderState.timeColumn}
+            invalid={!builderState.timeColumn}
+            onColumnChange={onOptionChange('timeColumn')}
+            columnFilterFn={columnFilterDateTime}
+            columnHint={ColumnHint.Time}
+            label={labels.logTimeColumn.label}
+            tooltip={labels.logTimeColumn.tooltip}
+          />
+          <ColumnSelect
+            disabled={builderState.otelEnabled}
+            allColumns={allColumns}
+            selectedColumn={builderState.logLevelColumn}
+            invalid={!builderState.logLevelColumn}
+            onColumnChange={onOptionChange('logLevelColumn')}
+            columnFilterFn={columnFilterString}
+            columnHint={ColumnHint.LogLevel}
+            label={labels.logLevelColumn.label}
+            tooltip={labels.logLevelColumn.tooltip}
+          />
+        </div>
+        <div className={styles.Common.flexColumn}>
+          <ColumnSelect
+            disabled={builderState.otelEnabled}
+            allColumns={allColumns}
+            selectedColumn={builderState.messageColumn}
+            invalid={!builderState.messageColumn}
+            onColumnChange={onOptionChange('messageColumn')}
+            columnFilterFn={columnFilterString}
+            columnHint={ColumnHint.LogMessage}
+            label={labels.logMessageColumn.label}
+            tooltip={labels.logMessageColumn.tooltip}
+          />
+          <ColumnSelect
+            disabled={builderState.otelEnabled}
+            allColumns={allColumns}
+            selectedColumn={builderState.labelsColumn}
+            invalid={!builderState.labelsColumn}
+            onColumnChange={onOptionChange('labelsColumn')}
+            columnHint={ColumnHint.LogLabels}
+            label={labels.logLabelsColumn.label}
+            tooltip={labels.logLabelsColumn.tooltip}
+          />
+          {/* <Switch
+            value={builderState.liveView}
+            onChange={onOptionChange('liveView')}
+            label={labels.liveView.label}
+            tooltip={labels.liveView.tooltip}
+            inline
+          /> */}
+        </div>
       </div>
       <OrderByEditor
         orderByOptions={getOrderByOptions(builderOptions, allColumns)}
@@ -240,12 +240,12 @@ const LogMessageLikeInput = (props: LogMessageLikeInputProps) => {
   }, [logMessageLike]);
 
   return (
-    <div className="gf-form">
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>
       <Input
-        width={200}
+        // width={200}
         value={input}
         type="string"
         onChange={(e) => setInput(e.currentTarget.value)}
diff --git a/src/components/queryBuilder/views/TraceQueryBuilder.tsx b/src/components/queryBuilder/views/TraceQueryBuilder.tsx
index ed8d421d..efdc9ec0 100644
--- a/src/components/queryBuilder/views/TraceQueryBuilder.tsx
+++ b/src/components/queryBuilder/views/TraceQueryBuilder.tsx
@@ -19,6 +19,7 @@ import { OrderByEditor, getOrderByOptions } from '../OrderByEditor';
 import { LimitEditor } from '../LimitEditor';
 import { LabeledInput } from 'components/configEditor/LabeledInput';
 import { Switch } from '../Switch';
+import { styles } from 'styles';
 
 interface TraceQueryBuilderProps {
   datasource: Datasource;
@@ -180,7 +181,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
           onVersionChange={(v) => builderOptionsDispatch(setOtelVersion(v))}
           wide
         />
-        <div className="gf-form">
+        <div className={styles.Common.flex}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -202,10 +203,9 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             label={labels.columns.spanId.label}
             tooltip={labels.columns.spanId.tooltip}
             wide
-            inline
           />
         </div>
-        <div className="gf-form">
+        <div className={styles.Common.flex}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -227,10 +227,9 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             label={labels.columns.serviceName.label}
             tooltip={labels.columns.serviceName.tooltip}
             wide
-            inline
           />
         </div>
-        <div className="gf-form">
+        <div className={styles.Common.flex}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -252,10 +251,9 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             label={labels.columns.startTime.label}
             tooltip={labels.columns.startTime.tooltip}
             wide
-            inline
           />
         </div>
-        <div className="gf-form">
+        <div className={styles.Common.flex}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -271,10 +269,9 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             disabled={builderState.otelEnabled}
             unit={builderState.durationUnit}
             onChange={onOptionChange('durationUnit')}
-            inline
           />
         </div>
-        <div className="gf-form">
+        <div className={styles.Common.flex}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -296,10 +293,9 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             label={labels.columns.serviceTags.label}
             tooltip={labels.columns.serviceTags.tooltip}
             wide
-            inline
           />
         </div>
-        <div className="gf-form">
+        <div className={styles.Common.flex}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -321,10 +317,9 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             label={labels.columns.statusCode.label}
             tooltip={labels.columns.statusCode.tooltip}
             wide
-            inline
           />
         </div>
-        <div className="gf-form">
+        <div className={styles.Common.flex}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -346,10 +341,9 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             label={labels.columns.state.label}
             tooltip={labels.columns.state.tooltip}
             wide
-            inline
           />
         </div>
-        <div className="gf-form">
+        <div className={styles.Common.flex}>
           <ColumnSelect
             disabled={builderState.otelEnabled}
             allColumns={allColumns}
@@ -371,10 +365,9 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             label={labels.columns.instrumentationLibraryVersion.label}
             tooltip={labels.columns.instrumentationLibraryVersion.tooltip}
             wide
-            inline
           />
         </div>
-        <div className="gf-form">
+        <div>
           <Switch
             disabled={builderState.otelEnabled}
             label={labels.columns.flattenNested.label}
@@ -384,7 +377,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             wide
           />
         </div>
-        <div className="gf-form">
+        <div>
           <LabeledInput
             disabled={builderState.otelEnabled}
             label={labels.columns.eventsPrefix.label}
@@ -393,7 +386,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
             onChange={onOptionChange('traceEventsColumnPrefix')}
           />
         </div>
-        <div className="gf-form">
+        <div>
           <LabeledInput
             disabled={builderState.otelEnabled}
             label={labels.columns.linksPrefix.label}
diff --git a/src/data/CHDatasource.test.ts b/src/data/CHDatasource.test.ts
index 8b2339b3..501cf8bb 100644
--- a/src/data/CHDatasource.test.ts
+++ b/src/data/CHDatasource.test.ts
@@ -2,14 +2,13 @@ import {
   arrayToDataFrame,
   CoreApp,
   DataQueryRequest,
-  DataQueryResponse,
   SupplementaryQueryType,
   TimeRange,
   TypedVariableModel,
   toDataFrame,
 } from '@grafana/data';
 import { DataQuery } from '@grafana/schema';
-import { Observable, of } from 'rxjs';
+import { of } from 'rxjs';
 import { DataSourceWithBackend } from '@grafana/runtime';
 import { mockDatasource } from '__mocks__/datasource';
 import { CHBuilderQuery, CHQuery, CHSqlQuery, EditorType } from 'types/sql';
@@ -619,14 +618,14 @@ describe('ClickHouseDatasource', () => {
 
     describe('getDataProvider', () => {
       it('should not support LogsSample yet', async () => {
-        expect(datasource.getDataProvider(SupplementaryQueryType.LogsSample, {} as any)).toBeUndefined();
+        expect(datasource.getSupplementaryQueryRequest(SupplementaryQueryType.LogsSample, {} as any)).toBeUndefined();
       });
 
       it('should do nothing if there are no supplementary queries for targets', async () => {
         jest.spyOn(Datasource.prototype, 'getSupplementaryLogsVolumeQuery').mockReturnValue(undefined);
         jest.spyOn(logs, 'getIntervalInfo').mockReturnValue({ interval: '1d' });
         expect(
-          datasource.getDataProvider(SupplementaryQueryType.LogsVolume, {
+          datasource.getSupplementaryQueryRequest(SupplementaryQueryType.LogsVolume, {
             scopedVars: {
               __interval: {},
             },
@@ -635,42 +634,26 @@ describe('ClickHouseDatasource', () => {
         ).toBeUndefined();
       });
 
-      it('should call logVolumeQuery if there are supplementary log volume queries for targets', async () => {
-        const range = ['from', 'to'];
-        const supplementaryQuery = {
-          rawSql: 'supplementaryQuery',
-        } as CHSqlQuery;
+      it('should build a LogsVolume request when supplementary targets exist', async () => {
+        const range = ['from', 'to'] as any;
+        const supplementaryQuery = { rawSql: 'supplementaryQuery' } as CHSqlQuery;
+
         jest.spyOn(Datasource.prototype, 'getSupplementaryLogsVolumeQuery').mockReturnValue(supplementaryQuery);
-        jest.spyOn(logs, 'getIntervalInfo').mockReturnValue({ interval: '1d' });
-        const queryLogsVolumeSpy = jest
-          .spyOn(logs, 'queryLogsVolume')
-          .mockReturnValue('queryLogsVolumeResponse' as unknown as Observable<DataQueryResponse>);
-        expect(
-          datasource.getDataProvider(SupplementaryQueryType.LogsVolume, {
-            scopedVars: {
-              __interval: {},
-            },
-            targets: ['initialTarget'],
-            range,
-          } as any)
-        ).toEqual('queryLogsVolumeResponse');
-        expect(queryLogsVolumeSpy).toBeCalledTimes(1);
-        expect(queryLogsVolumeSpy).toHaveBeenLastCalledWith(
-          datasource,
-          {
-            hideFromInspector: true,
-            interval: '1d',
-            scopedVars: {
-              __interval: {
-                text: '1d',
-                value: '1d',
-              },
-            },
-            targets: [supplementaryQuery],
-            range,
-          },
-          { range, targets: ['initialTarget'] }
-        );
+        jest.spyOn(logs, 'getIntervalInfo').mockReturnValue({ interval: '1d' } as any);
+
+        const req = datasource.getSupplementaryQueryRequest(SupplementaryQueryType.LogsVolume, {
+          scopedVars: { __interval: {} },
+          targets: ['initialTarget'] as any,
+          range,
+        } as any);
+
+        expect(req).toEqual({
+          hideFromInspector: true,
+          interval: '1d',
+          scopedVars: { __interval: { text: '1d', value: '1d' } },
+          targets: [supplementaryQuery],
+          range,
+        });
       });
     });
   });
diff --git a/src/data/CHDatasource.ts b/src/data/CHDatasource.ts
index e173c416..658a4b38 100644
--- a/src/data/CHDatasource.ts
+++ b/src/data/CHDatasource.ts
@@ -202,6 +202,61 @@ export class Datasource
     };
   }
 
+  // REMOVE this whole method
+  // getDataProvider(type: SupplementaryQueryType, request: DataQueryRequest<CHQuery>): Observable<DataQueryResponse> | undefined { ... }
+
+  // ADD this instead:
+  getSupplementaryQueryRequest(
+    type: SupplementaryQueryType,
+    request: DataQueryRequest<CHQuery>
+  ): DataQueryRequest<CHQuery> | undefined {
+    if (!this.getSupportedSupplementaryQueryTypes().includes(type)) {
+      return undefined;
+    }
+
+    switch (type) {
+      case SupplementaryQueryType.LogsVolume: {
+        const logsVolumeRequest = cloneDeep(request);
+
+        // derive interval + scoped vars
+        const intervalInfo = getIntervalInfo(logsVolumeRequest.scopedVars);
+        logsVolumeRequest.interval = intervalInfo.interval;
+        logsVolumeRequest.scopedVars = {
+          ...logsVolumeRequest.scopedVars,
+          __interval: { value: intervalInfo.interval, text: intervalInfo.interval },
+        };
+        logsVolumeRequest.hideFromInspector = true;
+
+        if (intervalInfo.intervalMs !== undefined) {
+          logsVolumeRequest.intervalMs = intervalInfo.intervalMs;
+          logsVolumeRequest.scopedVars.__interval_ms = {
+            value: intervalInfo.intervalMs,
+            text: intervalInfo.intervalMs,
+          };
+        }
+
+        // build supplementary targets
+        const targets: CHQuery[] = [];
+        for (const target of logsVolumeRequest.targets) {
+          const supplementaryQuery = this.getSupplementaryLogsVolumeQuery(logsVolumeRequest, target);
+          if (supplementaryQuery) {
+            targets.push(supplementaryQuery);
+          }
+        }
+
+        if (!targets.length) {
+          return undefined;
+        }
+
+        // return a request Grafana will execute
+        return { ...logsVolumeRequest, targets };
+      }
+
+      default:
+        return undefined;
+    }
+  }
+
   getSupplementaryQuery(options: SupplementaryQueryOptions, originalQuery: CHQuery): CHQuery | undefined {
     return undefined;
   }
@@ -228,7 +283,7 @@ export class Datasource
     }
     // convention - assume the first field is an id field
     const ids = frame?.fields[0]?.values;
-    return frame?.fields[1]?.values.map((text, i) => ({ text, value: ids.get(i) }));
+    return frame?.fields[1]?.values.map((text, i) => ({ text, value: ids[i] }));
   }
 
   applyTemplateVariables(query: CHQuery, scoped: ScopedVars, filters: AdHocVariableFilter[] = []): CHQuery {
@@ -940,7 +995,7 @@ export class Datasource
         continue;
       }
 
-      let value = field.values.get(row.rowIndex);
+      let value = field.values[row.rowIndex];
       if (value && field.type === 'other' && isMapKey) {
         value = value[keyName];
       }
diff --git a/src/data/adHocFilter.ts b/src/data/adHocFilter.ts
index f4b07a4c..65d3e56a 100644
--- a/src/data/adHocFilter.ts
+++ b/src/data/adHocFilter.ts
@@ -40,7 +40,7 @@ export class AdHocFilter {
       .map((f, i) => {
         const key = escapeKey(f.key);
         const value = escapeValueBasedOnOperator(f.value, f.operator);
-        const condition = i !== adHocFilters.length - 1 ? (f.condition ? f.condition : 'AND') : '';
+        const condition = i !== adHocFilters.length - 1 ? 'AND' : '';
         const operator = convertOperatorToClickHouseOperator(f.operator);
         return ` ${key} ${operator} ${value} ${condition}`;
       })
diff --git a/src/data/logs.ts b/src/data/logs.ts
index 4466d00d..c4272a36 100644
--- a/src/data/logs.ts
+++ b/src/data/logs.ts
@@ -9,7 +9,6 @@ import {
   FieldType,
   LoadingState,
   LogLevel,
-  MutableDataFrame,
   ScopedVars,
   TimeRange,
   toDataFrame,
@@ -48,7 +47,7 @@ const LogLevelColor = {
 };
 
 function getThemeColor(dark: string, light: string): string {
-  return config.bootData.user.lightTheme ? light : dark;
+  return config.bootData.user.theme ? light : dark;
 }
 
 /**
@@ -89,14 +88,14 @@ export function queryLogsVolume<TQuery extends DataQuery, TOptions extends DataS
         observer.complete();
       },
       next: (dataQueryResponse: DataQueryResponse) => {
-        const { error } = dataQueryResponse;
-        if (error !== undefined) {
+        const { errors } = dataQueryResponse;
+        if (errors !== undefined) {
           observer.next({
             state: LoadingState.Error,
-            error,
+            errors,
             data: [],
           });
-          observer.error(error);
+          observer.error(errors);
         } else {
           rawLogsVolume = rawLogsVolume.concat(dataQueryResponse.data.map(toDataFrame));
         }
@@ -131,22 +130,23 @@ export function aggregateRawLogsVolume(rawLogsVolume: DataFrame[]): DataFrame[]
   }
 
   const oneLevelDetected = levelFields.length === 1 && levelFields[0].name === DEFAULT_LOGS_ALIAS;
-  if (oneLevelDetected) {
-    levelFields[0].name = 'logs';
-  }
 
-  const totalLength = timeField.values.length;
   return levelFields.map((field) => {
-    const logLevel = LogLevel[field.name as keyof typeof LogLevel] || LogLevel.unknown;
-    const df = new MutableDataFrame();
-    df.addField({ name: 'Time', type: FieldType.time, values: timeField.values }, totalLength);
-    df.addField({
-      name: 'Value',
-      type: FieldType.number,
-      config: getLogVolumeFieldConfig(logLevel, oneLevelDetected),
-      values: field.values,
+    const effectiveName = oneLevelDetected && field.name === DEFAULT_LOGS_ALIAS ? 'logs' : field.name;
+
+    const logLevel = LogLevel[effectiveName as keyof typeof LogLevel] ?? LogLevel.unknown;
+
+    return toDataFrame({
+      fields: [
+        { name: 'Time', type: FieldType.time, values: timeField.values },
+        {
+          name: 'Value',
+          type: FieldType.number,
+          config: getLogVolumeFieldConfig(logLevel, oneLevelDetected),
+          values: field.values,
+        },
+      ],
     });
-    return df;
   });
 }
 
diff --git a/src/labels.ts b/src/labels.ts
index f422e091..e3370ce9 100644
--- a/src/labels.ts
+++ b/src/labels.ts
@@ -157,7 +157,7 @@ export default {
         },
         validateSql: {
           label: 'Validate SQL',
-          tooltip: 'Validate SQL in the editor.',
+          tooltip: 'Validate SQL in the editor',
         },
       },
       TracesConfig: {
diff --git a/src/styles.ts b/src/styles.ts
index 9d7fe2a6..1f580a01 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -2,67 +2,78 @@ import { css } from '@emotion/css';
 
 export const styles = {
   Common: {
-    check: css`
-      margin-top: 5px;
-    `,
-    wrapper: css`
-      position: relative;
-      width: 100%;
-    `,
-    smallBtn: css`
-      margin-top: 5px;
-      margin-inline: 5px;
-    `,
-    selectWrapper: css`
-      width: 100%;
-    `,
-    inlineSelect: css`
-      margin-right: 5px;
-    `,
-    firstLabel: css`
-      margin-right: 5px;
-    `,
-    expand: css`
-      position: absolute;
-      top: 2px;
-      left: 6px;
-      z-index: 100;
-      color: gray;
-    `,
+    check: css({
+      marginTop: '5px',
+    }),
+    wrapper: css({
+      position: 'relative',
+      width: '100%',
+    }),
+    smallBtn: css({
+      marginTop: '5px',
+      marginInline: '5px',
+    }),
+    selectWrapper: css({
+      width: '100%',
+    }),
+    inlineSelect: css({
+      marginRight: '5px',
+    }),
+    firstLabel: css({
+      marginRight: '5px',
+    }),
+    expand: css({
+      position: 'absolute',
+      top: '2px',
+      left: '6px',
+      zIndex: 100,
+      color: 'gray',
+    }),
+    flexContainer: css({
+      display: 'flex',
+      marginBottom: '4px',
+    }),
+    flex: css({
+      display: 'flex',
+    }),
+    flexColumn: css({
+      display: 'flex',
+      flexDirection: 'column',
+    }),
   },
   ConfigEditor: {
-    container: css`
-      justify-content: space-between;
-      h5 {
-        line-height: 34px;
-        margin-bottom: 5px;
-      }
-      button {
-        margin-right: 5px;
-      }
-    `,
-    wide: css`
-      width: 75%;
-    `,
-    subHeader: css`
-      padding: 5px 0 5px 0;
-    `,
+    container: css({
+      justifyContent: 'space-between',
+      '& h5': {
+        lineHeight: '34px',
+        marginBottom: '5px',
+      },
+      '& button': {
+        marginRight: '5px',
+      },
+    }),
+    wide: css({
+      width: '75%',
+    }),
+    subHeader: css({
+      padding: '5px 0 5px 0',
+    }),
   },
   QueryEditor: {
-    queryType: css`
-      justify-content: space-between;
-      span {
-        display: flex;
-      }
-    `,
-    inlineField: css`
-      margin-left: 7px;
-    `,
+    queryType: css({
+      justifyContent: 'space-between',
+      '& span': {
+        display: 'flex',
+      },
+    }),
+    inlineField: css({
+      marginLeft: '7px',
+    }),
   },
   FormatSelector: {
-    formatSelector: css`
-      display: flex;
-    `,
+    formatSelector: css({
+      display: 'flex',
+    }),
   },
   VariablesEditor: {},
 };
diff --git a/src/views/CHConfigEditor.tsx b/src/views/CHConfigEditor.tsx
index 015743ca..e587b933 100644
--- a/src/views/CHConfigEditor.tsx
+++ b/src/views/CHConfigEditor.tsx
@@ -284,7 +284,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         <Field label={labels.secure.label} description={labels.secure.tooltip}>
           <Switch
             id="secure"
-            className="gf-form"
             value={jsonData.secure || false}
             onChange={(e) => {
               trackingV1.trackClickhouseConfigV1SecureConnectionToggleClicked({
@@ -326,7 +325,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
       <ConfigSection title="TLS / SSL Settings">
         <Field label={labels.tlsSkipVerify.label} description={labels.tlsSkipVerify.tooltip}>
           <Switch
-            className="gf-form"
             value={jsonData.tlsSkipVerify || false}
             onChange={(e) => {
               trackingV1.trackClickhouseConfigV1SkipTLSVerifyToggleClicked({
@@ -338,7 +336,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         </Field>
         <Field label={labels.tlsClientAuth.label} description={labels.tlsClientAuth.tooltip}>
           <Switch
-            className="gf-form"
             value={jsonData.tlsAuth || false}
             onChange={(e) => {
               trackingV1.trackClickhouseConfigV1TLSClientAuthToggleClicked({
@@ -350,7 +347,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         </Field>
         <Field label={labels.tlsAuthWithCACert.label} description={labels.tlsAuthWithCACert.tooltip}>
           <Switch
-            className="gf-form"
             value={jsonData.tlsAuthWithCACert || false}
             onChange={(e) => {
               trackingV1.trackClickhouseConfigV1WithCACertToggleClicked({ caCertToggle: e.currentTarget.checked });
@@ -613,7 +609,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         <Divider />
         <Field label={labels.enableRowLimit.label} description={labels.enableRowLimit.tooltip}>
           <Switch
-            className="gf-form"
             value={jsonData.enableRowLimit || false}
             data-testid={labels.enableRowLimit.testid}
             onChange={(e) => {
@@ -625,7 +620,6 @@ export const ConfigEditor: React.FC<ConfigEditorProps> = (props) => {
         {config.secureSocksDSProxyEnabled && versionGte(config.buildInfo.version, '10.0.0') && (
           <Field label={labels.secureSocksProxy.label} description={labels.secureSocksProxy.tooltip}>
             <Switch
-              className="gf-form"
               value={jsonData.enableSecureSocksProxy || false}
               onChange={(e) => onSwitchToggle('enableSecureSocksProxy', e.currentTarget.checked)}
             />
diff --git a/src/views/CHQueryEditor.tsx b/src/views/CHQueryEditor.tsx
index f75d38f2..126b6363 100644
--- a/src/views/CHQueryEditor.tsx
+++ b/src/views/CHQueryEditor.tsx
@@ -25,7 +25,7 @@ export const CHQueryEditor = (props: CHQueryEditorProps) => {
 
   return (
     <>
-      <div className={'gf-form ' + styles.QueryEditor.queryType}>
+      <div className={`${styles.QueryEditor.queryType} ${styles.Common.flex}`}>
         <EditorTypeSwitcher {...props} query={query} datasource={datasource} />
         <Button onClick={() => onRunQuery()}>Run Query</Button>
       </div>