diff --git a/.betterer.results b/.betterer.results
index 15b1090b3fe..8e66e335258 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -3238,11 +3238,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "2"],
       [0, 0, 0, "Styles should be written using objects.", "3"]
     ],
-    "public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
-    ],
     "public/app/features/transformers/editors/ReduceTransformerEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
@@ -5417,13 +5412,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"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
-    "public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.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"]
-    ],
     "public/app/features/variables/adhoc/picker/AdHocFilter.tsx:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
diff --git a/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx b/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
index 1cf27f090b6..40156b7cb62 100644
--- a/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
@@ -12,7 +12,17 @@ import {
 } from '@grafana/data';
 import { createOrderFieldsComparer } from '@grafana/data/src/transformations/transformers/order';
 import { OrganizeFieldsTransformerOptions } from '@grafana/data/src/transformations/transformers/organize';
-import { Input, IconButton, Icon, FieldValidationMessage, useStyles2 } from '@grafana/ui';
+import {
+  Input,
+  IconButton,
+  Icon,
+  FieldValidationMessage,
+  useStyles2,
+  Stack,
+  InlineLabel,
+  Text,
+  Box,
+} from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
 import { useAllFieldNamesFromDataFrames } from '../utils';
@@ -151,9 +161,9 @@ const DraggableFieldName = ({
   return (
     <Draggable draggableId={fieldName} index={index}>
       {(provided) => (
-        <div className="gf-form-inline" ref={provided.innerRef} {...provided.draggableProps}>
-          <div className="gf-form gf-form--grow">
-            <div className="gf-form-label gf-form-label--justify-left width-30">
+        <Box marginBottom={0.5} display="flex" gap={0} ref={provided.innerRef} {...provided.draggableProps}>
+          <InlineLabel width={60} as="div">
+            <Stack gap={0} justifyContent="flex-start" alignItems="center" width="100%">
               <span {...provided.dragHandleProps}>
                 <Icon name="draggabledots" title="Drag and drop to reorder" size="lg" className={styles.draggable} />
               </span>
@@ -164,18 +174,17 @@ const DraggableFieldName = ({
                 onClick={() => onToggleVisibility(fieldName, visible)}
                 tooltip={visible ? 'Disable' : 'Enable'}
               />
-              <span className={styles.name} title={fieldName}>
+              <Text truncate={true} element="p" variant="bodySmall" weight="bold">
                 {fieldName}
-              </span>
-            </div>
-            <Input
-              className="flex-grow-1"
-              defaultValue={renamedFieldName || ''}
-              placeholder={`Rename ${fieldName}`}
-              onBlur={(event) => onRenameField(fieldName, event.currentTarget.value)}
-            />
-          </div>
-        </div>
+              </Text>
+            </Stack>
+          </InlineLabel>
+          <Input
+            defaultValue={renamedFieldName || ''}
+            placeholder={`Rename ${fieldName}`}
+            onBlur={(event) => onRenameField(fieldName, event.currentTarget.value)}
+          />
+        </Box>
       )}
     </Draggable>
   );
@@ -184,23 +193,16 @@ const DraggableFieldName = ({
 DraggableFieldName.displayName = 'DraggableFieldName';
 
 const getFieldNameStyles = (theme: GrafanaTheme2) => ({
-  toggle: css`
-    margin: 0 8px;
-    color: ${theme.colors.text.secondary};
-  `,
-  draggable: css`
-    opacity: 0.4;
-    &:hover {
-      color: ${theme.colors.text.maxContrast};
-    }
-  `,
-  name: css`
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: ${theme.typography.bodySmall.fontSize};
-    font-weight: ${theme.typography.fontWeightMedium};
-  `,
+  toggle: css({
+    margin: theme.spacing(0, 1),
+    color: theme.colors.text.secondary,
+  }),
+  draggable: css({
+    opacity: 0.4,
+    '&:hover': {
+      color: theme.colors.text.maxContrast,
+    },
+  }),
 });
 
 const reorderToIndex = (fieldNames: string[], startIndex: number, endIndex: number) => {