From f714357fbfa5863d786434a6ff87cd23617d27bd Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Fri, 8 May 2020 12:11:41 +0200
Subject: [PATCH] TablePanel: Fix JSON tooltip positioning (#24420)

* Fix block element and overflow

* Width not needed

* Add to styles file
---
 packages/grafana-ui/src/components/Table/JSONViewCell.tsx | 2 +-
 packages/grafana-ui/src/components/Table/styles.ts        | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Table/JSONViewCell.tsx b/packages/grafana-ui/src/components/Table/JSONViewCell.tsx
index 7989fd26d7d..b642be28efc 100644
--- a/packages/grafana-ui/src/components/Table/JSONViewCell.tsx
+++ b/packages/grafana-ui/src/components/Table/JSONViewCell.tsx
@@ -21,7 +21,7 @@ export const JSONViewCell: FC<TableCellProps> = props => {
   return (
     <div className={cx(txt, tableStyles.tableCell)}>
       <Tooltip placement="auto" content={content} theme={'info'}>
-        <span>{displayValue}</span>
+        <div className={tableStyles.overflow}>{displayValue}</div>
       </Tooltip>
     </div>
   );
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index c7b08c0f3d9..4c3a5254b72 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -17,6 +17,7 @@ export interface TableStyles {
   row: string;
   theme: GrafanaTheme;
   resizeHandle: string;
+  overflow: string;
 }
 
 export const getTableStyles = stylesFactory(
@@ -92,6 +93,10 @@ export const getTableStyles = stylesFactory(
         white-space: nowrap;
         overflow: hidden;
       `,
+      overflow: css`
+        overflow: hidden;
+        text-overflow: ellipsis;
+      `,
       resizeHandle: css`
         label: resizeHandle;
         cursor: col-resize !important;