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

@@ -21,7 +21,7 @@ export const JSONViewCell: FC<TableCellProps> = props => {
   return (
   return (
     <div className={cx(txt, tableStyles.tableCell)}>
     <div className={cx(txt, tableStyles.tableCell)}>
       <Tooltip placement="auto" content={content} theme={'info'}>
       <Tooltip placement="auto" content={content} theme={'info'}>
-        <span>{displayValue}</span>
+        <div className={tableStyles.overflow}>{displayValue}</div>
       </Tooltip>
       </Tooltip>
     </div>
     </div>
   );
   );

packages/grafana-ui/src/components/Table/styles.ts

@@ -17,6 +17,7 @@ export interface TableStyles {
   row: string;
   row: string;
   theme: GrafanaTheme;
   theme: GrafanaTheme;
   resizeHandle: string;
   resizeHandle: string;
+  overflow: string;
 }
 }
 
 
 export const getTableStyles = stylesFactory(
 export const getTableStyles = stylesFactory(
@@ -92,6 +93,10 @@ export const getTableStyles = stylesFactory(
         white-space: nowrap;
         white-space: nowrap;
         overflow: hidden;
         overflow: hidden;
       `,
       `,
+      overflow: css`
+        overflow: hidden;
+        text-overflow: ellipsis;
+      `,
       resizeHandle: css`
       resizeHandle: css`
         label: resizeHandle;
         label: resizeHandle;
         cursor: col-resize !important;
         cursor: col-resize !important;