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
This commit is contained in:
Oscar Kilhed 2023-01-17 14:05:58 +01:00 committed by GitHub
parent 766fa4e7d5
commit 004705a10b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 3 additions and 3 deletions

View File

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

View File

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

View File

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