1506: Adds clickabe icon padding

Author: Ruben van Leeuwen

packages/orchestrator-ui-components/src/components/WfoKeyValueTable/WfoValueCell.tsx

@@ -24,17 +24,20 @@ export const WfoValueCell: FC<WfoValueCellProps> = ({
     const {
         clipboardIconSize,
         clipboardIconStyle,
-        clickable,
+        clickableStyle,
         getBackgroundColorStyleForRow,
         valueColumnStyle,
         valueCellStyle,
     } = useWithOrchestratorTheme(getStyles);
 
     const shouldRenderCopyColumn = enableCopyIcon && textToCopy;
 
-    const valueToRender = React.isValidElement(value)
-        ? value
-        : JSON.stringify(value);
+    const valueToRender =
+        typeof value === 'string' ||
+        typeof value === 'number' ||
+        React.isValidElement(value)
+            ? value
+            : JSON.stringify(value);
 
     const copyText =
         typeof textToCopy === 'object'
@@ -48,7 +51,7 @@ export const WfoValueCell: FC<WfoValueCellProps> = ({
                 {shouldRenderCopyColumn && (
                     <EuiCopy textToCopy={copyText || ''}>
                         {(copy) => (
-                            <div onClick={copy} css={clickable}>
+                            <div onClick={copy} css={clickableStyle}>
                                 <WfoClipboardCopy
                                     width={clipboardIconSize}
                                     height={clipboardIconSize}

packages/orchestrator-ui-components/src/components/WfoKeyValueTable/styles.ts

@@ -73,9 +73,10 @@ export const getStyles = ({ theme }: WfoTheme) => {
         paddingBottom: 0,
     });
 
-    const clickable = css({
+    const clickableStyle = css({
         marginLeft: clipboardIconMargin,
         cursor: 'pointer',
+        paddingRight: theme.size.s,
     });
 
     return {
@@ -87,7 +88,7 @@ export const getStyles = ({ theme }: WfoTheme) => {
         keyCellStyle,
         valueCellStyle,
         clipboardIconStyle,
-        clickable,
+        clickableStyle,
         lightBackground,
         darkBackground,
         getBackgroundColorStyleForRow,