From fe66f89728245f387c2ab60a2f6a3bc875eb89b1 Mon Sep 17 00:00:00 2001 From: lucafoscili <45429703+lucafoscili@users.noreply.github.com> Date: Tue, 3 Mar 2026 17:03:28 +0100 Subject: [PATCH] fix: Use column size for Kup images; restrict icon removal Pass the column into setCellSizeKup so image cells can inherit column.size for sizeX when sizeX is not provided. Also tighten the mouseleave selector to only remove the action icon (kup-image.f-cell__iconfunction) instead of the first kup-image in the cell, preventing accidental removal of the main BAR/IMAGE element. --- .../ketchup/src/f-components/f-cell/f-cell.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/ketchup/src/f-components/f-cell/f-cell.tsx b/packages/ketchup/src/f-components/f-cell/f-cell.tsx index 63f31e1e0..beb31e8df 100644 --- a/packages/ketchup/src/f-components/f-cell/f-cell.tsx +++ b/packages/ketchup/src/f-components/f-cell/f-cell.tsx @@ -145,7 +145,7 @@ export const FCell: FunctionalComponent = ( content = setEditableCell(cellType, classObj, cell, column, props); } else if (cell.data && kupTypes.includes(cellType)) { if (props.setSizes) { - setCellSizeKup(cellType, subcomponentProps, cell); + setCellSizeKup(cellType, subcomponentProps, cell, column); } if (!props.renderKup) { const lazyClass = 'cell-' + cellType + ' placeholder'; @@ -295,7 +295,11 @@ const handleMouseEnter = ( const handleMouseLeave = (event: MouseEvent) => { const parent = event.currentTarget as HTMLElement; - const iconContainer = parent.querySelector('kup-image'); + // only remove the action icon we added on mouse enter, not the first + // kup-image in the cell (which might be the BAR/IMAGE itself) + const iconContainer = parent.querySelector( + 'kup-image.f-cell__iconfunction' + ); if (iconContainer) { iconContainer.remove(); @@ -607,13 +611,17 @@ function setCellSize( function setCellSizeKup( cellType: string, subcomponentProps: unknown, - cell: KupDataCell + cell: KupDataCell, + column: KupDataColumn ) { switch (cellType) { case FCellTypes.BAR: if (!(subcomponentProps as FImageProps).sizeY) { (subcomponentProps as FImageProps).sizeY = '26px'; } + if (!(subcomponentProps as FImageProps).sizeX && column.size) { + (subcomponentProps as FImageProps).sizeX = column.size; + } break; case FCellTypes.BUTTON: let height: string = '';