diff --git a/.betterer.results b/.betterer.results
index 448670006e4..f425117df77 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -6602,13 +6602,6 @@ exports[`no gf-form usage`] = {
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
     "public/app/plugins/datasource/influxdb/components/editor/annotation/AnnotationEditor.tsx:5381": [
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
     "public/app/plugins/datasource/influxdb/components/editor/query/QueryEditor.tsx:5381": [
diff --git a/public/app/plugins/datasource/influxdb/components/editor/annotation/AnnotationEditor.tsx b/public/app/plugins/datasource/influxdb/components/editor/annotation/AnnotationEditor.tsx
index d8ba3b533f6..91d289c1755 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/annotation/AnnotationEditor.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/annotation/AnnotationEditor.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { QueryEditorProps } from '@grafana/data/src';
-import { InlineFormLabel, Input } from '@grafana/ui/src';
+import { InlineFormLabel, Input, Stack } from '@grafana/ui/src';
 
 import InfluxDatasource from '../../../datasource';
 import { InfluxOptions, InfluxQuery } from '../../../types';
@@ -24,60 +24,63 @@ export const AnnotationEditor = (props: QueryEditorProps<InfluxDatasource, Influ
     });
   };
   return (
-    <div className="gf-form-group">
-      <div className="gf-form">
-        <InlineFormLabel width={12}>InfluxQL Query</InlineFormLabel>
-        <Input
-          value={eventQuery}
-          onChange={(e) => setEventQuery(e.currentTarget.value ?? '')}
-          onBlur={() => updateValue('query', eventQuery)}
-          placeholder="select text from events where $timeFilter limit 1000"
-        />
-      </div>
-      <InlineFormLabel
-        width={12}
-        tooltip={
-          <div>
-            If your influxdb query returns more than one field you need to specify the column names below. An annotation
-            event is composed of a title, tags, and an additional text field. Optionally you can map the timeEnd column
-            for region annotation usage.
-          </div>
-        }
-      >
-        Field mappings
-      </InlineFormLabel>
-      <div className="gf-form-group">
-        <div className="gf-form-inline">
-          <div className="gf-form">
+    <Stack gap={5} direction="column">
+      <Stack gap={0.5} direction="column">
+        <Stack gap={0}>
+          <InlineFormLabel width={12}>InfluxQL Query</InlineFormLabel>
+          <Input
+            value={eventQuery}
+            onChange={(e) => setEventQuery(e.currentTarget.value ?? '')}
+            onBlur={() => updateValue('query', eventQuery)}
+            placeholder="select text from events where $timeFilter limit 1000"
+          />
+        </Stack>
+        <InlineFormLabel
+          width={12}
+          tooltip={
+            <div>
+              If your influxdb query returns more than one field you need to specify the column names below. An
+              annotation event is composed of a title, tags, and an additional text field. Optionally you can map the
+              timeEnd column for region annotation usage.
+            </div>
+          }
+        >
+          Field mappings
+        </InlineFormLabel>
+        <Stack gap={0.5} alignItems={'flex-start'} wrap={'wrap'}>
+          <Stack gap={0}>
             <InlineFormLabel width={12}>Text</InlineFormLabel>
             <Input
               value={textColumn}
               onChange={(e) => setTextColumn(e.currentTarget.value ?? '')}
               onBlur={() => updateValue('textColumn', textColumn)}
             />
-          </div>
-          <div className="gf-form">
+          </Stack>
+          <Stack gap={0}>
             <InlineFormLabel width={12}>Tags</InlineFormLabel>
             <Input
               value={tagsColumn}
               onChange={(e) => setTagsColumn(e.currentTarget.value ?? '')}
               onBlur={() => updateValue('tagsColumn', tagsColumn)}
             />
-          </div>
-          <div className="gf-form">
+          </Stack>
+
+          <Stack gap={0}>
             <InlineFormLabel width={12}>TimeEnd</InlineFormLabel>
             <Input
               value={timeEndColumn}
               onChange={(e) => setTimeEndColumn(e.currentTarget.value ?? '')}
               onBlur={() => updateValue('timeEndColumn', timeEndColumn)}
             />
-          </div>
+          </Stack>
           <div className="gf-form ng-hide">
             <InlineFormLabel width={12}>Title</InlineFormLabel>
             <Input defaultValue={titleColumn} />
           </div>
-        </div>
-      </div>
-    </div>
+        </Stack>
+      </Stack>
+      {/*Empty div to preserve the bottom margin */}
+      <div />
+    </Stack>
   );
 };