[v9.3.x] Table Panel: Fix image of image cell overflowing table cell when a data link is added. (#61617)

Table Panel: Fix image of image cell overflowing table cell when a data link is added. (#59392)

* TablePanel: fix image of image cell overflowing table cell when a data link is added

* Fix image cell and gauge panel in respective places instead

(cherry picked from commit 004705a10b)

Co-authored-by: Oscar Kilhed <oscar.kilhed@grafana.com>

packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx

@@ -62,7 +62,7 @@ export const DataLinksContextMenu = ({ children, links, style }: DataLinksContex
         onClick={linkModel.onClick}
         target={linkModel.target}
         title={linkModel.title}
-        style={{ ...style, overflow: 'hidden', display: 'flex', flexGrow: 1 }}
+        style={{ ...style, overflow: 'hidden', display: 'flex' }}
         aria-label={selectors.components.DataLinksContextMenu.singleLink}
       >
         {children({})}

packages/grafana-ui/src/components/Table/ImageCell.tsx

@@ -17,7 +17,7 @@ export const ImageCell: FC<TableCellProps> = (props) => {
     <div {...cellProps} className={tableStyles.cellContainer}>
       {!hasLinks && <img src={displayValue.text} className={tableStyles.imageCell} alt="" />}
       {hasLinks && (
-        <DataLinksContextMenu links={() => getCellLinks(field, row) || []}>
+        <DataLinksContextMenu style={{ height: '100%' }} links={() => getCellLinks(field, row) || []}>
           {(api) => {
             return (
               <div onClick={api.openMenu} className={cx(tableStyles.imageCellLink, api.targetClassName)}>

public/app/plugins/panel/gauge/GaugePanel.tsx

@@ -41,7 +41,7 @@ export class GaugePanel extends PureComponent<PanelProps<PanelOptions>> {
 
     if (hasLinks && getLinks) {
       return (
-        <DataLinksContextMenu links={getLinks}>
+        <DataLinksContextMenu links={getLinks} style={{ flexGrow: 1 }}>
           {(api) => {
             return this.renderComponent(valueProps, api);
           }}