diff --git a/.betterer.results b/.betterer.results
index e15196995a1..9c88390a961 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -725,7 +725,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "2"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
     ],
-    "packages/grafana-ui/src/components/Table/TableCellInspectModal.tsx:5381": [
+    "packages/grafana-ui/src/components/Table/TableCellInspector.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "packages/grafana-ui/src/components/Table/reducer.ts:5381": [
diff --git a/.betterer.results.json b/.betterer.results.json
index 7ee6947ecb6..e6c8fad35dd 100644
--- a/.betterer.results.json
+++ b/.betterer.results.json
@@ -1657,7 +1657,7 @@
           "count": 1
         },
         {
-          "path": "/packages/grafana-ui/src/components/Table/TableCellInspectModal.tsx",
+          "path": "/packages/grafana-ui/src/components/Table/TableCellInspector.tsx",
           "count": 1
         },
         {
diff --git a/packages/grafana-ui/src/components/Table/CellActions.tsx b/packages/grafana-ui/src/components/Table/CellActions.tsx
index 22b17628051..c7455711747 100644
--- a/packages/grafana-ui/src/components/Table/CellActions.tsx
+++ b/packages/grafana-ui/src/components/Table/CellActions.tsx
@@ -5,7 +5,7 @@ import { IconButton } from '../IconButton/IconButton';
 import { Stack } from '../Layout/Stack/Stack';
 import { TooltipPlacement } from '../Tooltip';
 
-import { TableCellInspectModal } from './TableCellInspectModal';
+import { TableCellInspector } from './TableCellInspector';
 import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR, TableCellProps } from './types';
 import { getTextAlign } from './utils';
 
@@ -70,7 +70,7 @@ export function CellActions({ field, cell, previewMode, showFilters, onCellFilte
       </div>
 
       {isInspecting && (
-        <TableCellInspectModal
+        <TableCellInspector
           mode={previewMode}
           value={cell.value}
           onDismiss={() => {
diff --git a/packages/grafana-ui/src/components/Table/TableCellInspectModal.tsx b/packages/grafana-ui/src/components/Table/TableCellInspector.tsx
similarity index 73%
rename from packages/grafana-ui/src/components/Table/TableCellInspectModal.tsx
rename to packages/grafana-ui/src/components/Table/TableCellInspector.tsx
index 37729684b14..cca2b8a7385 100644
--- a/packages/grafana-ui/src/components/Table/TableCellInspectModal.tsx
+++ b/packages/grafana-ui/src/components/Table/TableCellInspector.tsx
@@ -2,16 +2,16 @@ import { isString } from 'lodash';
 import React from 'react';
 
 import { ClipboardButton } from '../ClipboardButton/ClipboardButton';
-import { Modal } from '../Modal/Modal';
+import { Drawer } from '../Drawer/Drawer';
 import { CodeEditor } from '../Monaco/CodeEditor';
 
-interface TableCellInspectModalProps {
+interface TableCellInspectorProps {
   value: any;
   onDismiss: () => void;
   mode: 'code' | 'text';
 }
 
-export function TableCellInspectModal({ value, onDismiss, mode }: TableCellInspectModalProps) {
+export function TableCellInspector({ value, onDismiss, mode }: TableCellInspectorProps) {
   let displayValue = value;
   if (isString(value)) {
     const trimmedValue = value.trim();
@@ -36,7 +36,7 @@ export function TableCellInspectModal({ value, onDismiss, mode }: TableCellInspe
   }
 
   return (
-    <Modal onDismiss={onDismiss} isOpen={true} title="Inspect value">
+    <Drawer onClose={onDismiss} title="Inspect value">
       {mode === 'code' ? (
         <CodeEditor
           width="100%"
@@ -50,11 +50,9 @@ export function TableCellInspectModal({ value, onDismiss, mode }: TableCellInspe
       ) : (
         <pre>{text}</pre>
       )}
-      <Modal.ButtonRow>
-        <ClipboardButton icon="copy" getText={() => text}>
-          Copy to Clipboard
-        </ClipboardButton>
-      </Modal.ButtonRow>
-    </Modal>
+      <ClipboardButton icon="copy" getText={() => text}>
+        Copy to Clipboard
+      </ClipboardButton>
+    </Drawer>
   );
 }