chore(preprod): add ellipsis + tooltip to file path name (EME-487) (#102329)

on compare diff table, add ellipsis + tooltip with copy button


https://github.com/user-attachments/assets/62125421-d620-43ef-8b9d-17d5a0281899


### Legal Boilerplate

Look, I get it. The entity doing business as "Sentry" was incorporated
in the State of Delaware in 2015 as Functional Software, Inc. and is
gonna need some rights from me in order to utilize my contributions in
this here PR. So here's the deal: I retain all rights, title and
interest in and to my contributions, and by keeping this boilerplate
intact I confirm that Sentry can use, modify, copy, and redistribute my
contributions, under Sentry's choice of terms.

Author: mtopo27

static/app/views/preprod/buildComparison/main/sizeCompareItemDiffTable.tsx

@@ -1,7 +1,11 @@
 import {useState} from 'react';
 import styled from '@emotion/styled';
 
+import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton';
+import {Flex} from 'sentry/components/core/layout/flex';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
+import TextOverflow from 'sentry/components/textOverflow';
 import {IconAdd, IconFix, IconSubtract} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {formatBytesBase10} from 'sentry/utils/bytes/formatBytesBase10';
@@ -144,7 +148,37 @@ export function SizeCompareItemDiffTable({diffItems}: SizeCompareItemDiffTablePr
                 {changeTypeLabel}
               </ChangeTag>
             </SimpleTable.RowCell>
-            <SimpleTable.RowCell>{diffItem.path}</SimpleTable.RowCell>
+            <SimpleTable.RowCell justify="flex-start" style={{minWidth: 0}}>
+              <Tooltip
+                title={
+                  diffItem.path ? (
+                    <Flex
+                      align="start"
+                      gap="xs"
+                      style={{maxWidth: '100%', textAlign: 'left'}}
+                    >
+                      <FilePathTooltipText>{diffItem.path}</FilePathTooltipText>
+                      <CopyToClipboardButton
+                        borderless
+                        size="zero"
+                        text={diffItem.path}
+                        style={{flexShrink: 0}}
+                      />
+                    </Flex>
+                  ) : null
+                }
+                disabled={!diffItem.path}
+                isHoverable
+                maxWidth={420}
+              >
+                <TextOverflow
+                  ellipsisDirection="right"
+                  style={{display: 'block', width: '100%'}}
+                >
+                  {diffItem.path ?? ''}
+                </TextOverflow>
+              </Tooltip>
+            </SimpleTable.RowCell>
             <SimpleTable.RowCell>
               {capitalize(diffItem.item_type ?? '')}
             </SimpleTable.RowCell>
@@ -214,6 +248,14 @@ const ChangeTag = styled('span')<{changeType: DiffType}>`
   }};
 `;
 
+const FilePathTooltipText = styled('span')`
+  flex: 1;
+  overflow-wrap: break-word;
+  word-break: break-all;
+  white-space: normal;
+  user-select: text;
+`;
+
 const ChangeAmountCell = styled(SimpleTable.RowCell)<{changeType: DiffType}>`
   align-items: end;
   color: ${p => {