diff --git a/weave-js/src/components/Panel2/PanelTable/ColumnHeader.tsx b/weave-js/src/components/Panel2/PanelTable/ColumnHeader.tsx index 0e9d85ea3ee0..d497a261cb7b 100644 --- a/weave-js/src/components/Panel2/PanelTable/ColumnHeader.tsx +++ b/weave-js/src/components/Panel2/PanelTable/ColumnHeader.tsx @@ -496,6 +496,17 @@ export const ColumnHeader: React.FC<{ }; }, [cellFrame, weave, propsSelectFunction, inputArrayNode]); + const columnNameStyle = columnFormat?.textAlign === 'right' + ? {marginLeft: `-${colControlsWidth}px`} + : {marginRight: `-${colControlsWidth}px`}; + + // When there is a right justified column, reverse the order of the indicators + // and set z-index to 1 otherwise click events on the Ellipses icon is blocked + // by the click event on the column name due to DOM ordering and negative margins. + const columnActionContainerStyle = columnFormat?.textAlign === 'right' + ? {zIndex: 1, flexDirection: 'row-reverse'} + : {flexDirection: 'row'}; + return ( setColumnSettingsOpen(!columnSettingsOpen)}> {propsColumnName !== '' ? ( {propsColumnName} @@ -657,10 +663,7 @@ export const ColumnHeader: React.FC<{ {({anchorRef, setOpen, open}) => ( + style={columnActionContainerStyle}> {isPinned && ( setColumnPinState(false)} />