fix(frontend): Prevent "copy to clipboard" icon clipping (#19054)

PostHog · Dec 4, 2023 · 4561ac4 · 4561ac4
1 parent 16587d0
commit 4561ac4
Showing 1 changed file with 41 additions and 31 deletions.
diff --git a/frontend/src/lib/components/CopyToClipboard.tsx b/frontend/src/lib/components/CopyToClipboard.tsx
@@ -1,17 +1,19 @@
+import clsx from 'clsx'
 import { IconCopy } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { copyToClipboard } from 'lib/utils/copyToClipboard'
-import { HTMLProps } from 'react'
 
-interface InlinePropsBase extends HTMLProps<HTMLSpanElement> {
+interface InlinePropsBase {
     description?: string
     /** Makes text selectable instead of copying on click anywhere */
     selectable?: boolean
     isValueSensitive?: boolean
     tooltipMessage?: string | null
     iconStyle?: Record<string, string | number>
     iconPosition?: 'end' | 'start'
+    className?: string
+    /** @deprecated */
     style?: React.CSSProperties
 }
 interface InlinePropsWithStringInside extends InlinePropsBase {
@@ -33,41 +35,49 @@ export function CopyToClipboardInline({
     tooltipMessage = null,
     iconStyle,
     iconPosition = 'end',
+    className,
     style,
     ...props
 }: InlineProps): JSX.Element {
     const copy = async (): Promise<boolean> => await copyToClipboard((explicitValue ?? children) as string, description)
 
-    const content = (
-        <span
-            className={isValueSensitive ? 'ph-no-capture' : ''}
-            // eslint-disable-next-line react/forbid-dom-props
-            style={{
-                position: 'relative',
-                overflow: 'hidden',
-                cursor: selectable ? 'text' : 'pointer',
-                display: 'inline-flex',
-                alignItems: 'center',
-                flexDirection: iconPosition === 'end' ? 'row' : 'row-reverse',
-                flexWrap: 'nowrap',
-                width: 'fit-content',
-                wordBreak: 'break-all',
-                ...style,
-            }}
-            onClick={!selectable ? copy : undefined}
-            {...props}
-        >
-            {children && <span className={iconPosition === 'start' ? 'grow-1' : undefined}>{children}</span>}
-            <LemonButton
-                size="small"
-                icon={<IconCopy style={{ ...iconStyle }} />}
-                noPadding
-                className="ml-1"
-                data-attr="copy-icon"
-                onClick={!selectable ? undefined : copy}
-            />
-        </span>
+    let content = (
+        <LemonButton
+            size="small"
+            icon={<IconCopy style={{ ...iconStyle }} />}
+            noPadding
+            className="ml-1"
+            data-attr="copy-icon"
+            onClick={!selectable ? undefined : copy}
+        />
     )
+
+    if (children) {
+        content = (
+            <span
+                className={clsx(
+                    'relative truncate inline-flex items-center flex-nowrap w-fit break-all',
+                    selectable ? 'cursor-text' : 'cursor-pointer',
+                    iconPosition === 'end' ? 'flex-row' : 'flex-row-reverse',
+                    isValueSensitive && 'ph-no-capture',
+                    className
+                )}
+                style={style}
+                onClick={!selectable ? copy : undefined}
+                {...props}
+            >
+                <span className={iconPosition === 'start' ? 'grow-1' : undefined}>{children}</span>
+                <LemonButton
+                    size="small"
+                    icon={<IconCopy style={{ ...iconStyle }} />}
+                    noPadding
+                    className="ml-1"
+                    data-attr="copy-icon"
+                    onClick={!selectable ? undefined : copy}
+                />
+            </span>
+        )
+    }
     return !selectable || tooltipMessage !== null ? (
         <Tooltip title={tooltipMessage || 'Click to copy'}>{content}</Tooltip>
     ) : (