fix(insights-mobile-ui): Ellipsize txn links in tables (#73935)

Properly ellipsizes the screen/txn links inside the tables, for both app
start and screen load module

Before:
<img width="220" alt="image"
src="https://github.com/getsentry/sentry/assets/1411808/4d5a3a40-ccac-46f4-8545-5ff1a5f185f2">

After:
<img width="300" alt="image"
src="https://github.com/getsentry/sentry/assets/1411808/b2e06de1-9f19-4922-8f42-d5ad28af0751">

Author: markushi

static/app/views/insights/mobile/appStarts/components/tables/screensTable.tsx

@@ -13,6 +13,7 @@ import {
   PRIMARY_RELEASE_ALIAS,
   SECONDARY_RELEASE_ALIAS,
 } from 'sentry/views/insights/common/components/releaseSelector';
+import {OverflowEllipsisTextContainer} from 'sentry/views/insights/common/components/textAlign';
 import {useReleaseSelection} from 'sentry/views/insights/common/queries/useReleases';
 import {useModuleURL} from 'sentry/views/insights/common/utils/useModuleURL';
 import Breakdown from 'sentry/views/insights/mobile/appStarts/components/breakdown';
@@ -76,18 +77,19 @@ export function AppStartScreens({data, eventView, isLoading, pageLinks}: Props)
       return (
         <Fragment>
           <TopResultsIndicator count={TOP_SCREENS} index={index} />
-          <Link
-            to={`${moduleURL}/spans/?${qs.stringify({
-              ...location.query,
-              project: row['project.id'],
-              transaction: row.transaction,
-              primaryRelease,
-              secondaryRelease,
-            })}`}
-            style={{display: `block`, width: `100%`}}
-          >
-            {row.transaction}
-          </Link>
+          <OverflowEllipsisTextContainer>
+            <Link
+              to={`${moduleURL}/spans/?${qs.stringify({
+                ...location.query,
+                project: row['project.id'],
+                transaction: row.transaction,
+                primaryRelease,
+                secondaryRelease,
+              })}`}
+            >
+              {row.transaction}
+            </Link>
+          </OverflowEllipsisTextContainer>
         </Fragment>
       );
     }

static/app/views/insights/mobile/screenload/components/tables/screensTable.tsx

@@ -28,6 +28,7 @@ import {
   PRIMARY_RELEASE_ALIAS,
   SECONDARY_RELEASE_ALIAS,
 } from 'sentry/views/insights/common/components/releaseSelector';
+import {OverflowEllipsisTextContainer} from 'sentry/views/insights/common/components/textAlign';
 import {useReleaseSelection} from 'sentry/views/insights/common/queries/useReleases';
 import {useModuleURL} from 'sentry/views/insights/common/utils/useModuleURL';
 import useCrossPlatformProject from 'sentry/views/insights/mobile/common/queries/useCrossPlatformProject';
@@ -98,18 +99,19 @@ export function ScreensTable({data, eventView, isLoading, pageLinks, onCursor}:
       return (
         <Fragment>
           <TopResultsIndicator count={TOP_SCREENS} index={index} />
-          <Link
-            to={`${moduleURL}/spans/?${qs.stringify({
-              ...location.query,
-              project: row['project.id'],
-              transaction: row.transaction,
-              primaryRelease,
-              secondaryRelease,
-            })}`}
-            style={{display: `block`, width: `100%`}}
-          >
-            {row.transaction}
-          </Link>
+          <OverflowEllipsisTextContainer>
+            <Link
+              to={`${moduleURL}/spans/?${qs.stringify({
+                ...location.query,
+                project: row['project.id'],
+                transaction: row.transaction,
+                primaryRelease,
+                secondaryRelease,
+              })}`}
+            >
+              {row.transaction}
+            </Link>
+          </OverflowEllipsisTextContainer>
         </Fragment>
       );
     }