fix(replay): Fix row-clicks inside replay table (#95691)

**Purpose**
We were inconsistent with adding analytics to "view replay details"
links in the rows and in the `ReplaySessionColumn`. So I wanted to
simplify that and aim to have one link in the mix instead of 3 (the row,
the displayName, and the shortLink).

Also, there is a problem with the existing `onRowClick` prop: it doesn't
care about modifier keys. So CMD+clicking a row (to open a new browser
tab) will also make the original browser tab navigate to the replay :(

**Solution**
So I spent a bunch of time, and looked at how issues does it, to make it
so that rows within a `<ReplayTable>` can be clickable, and accessible
at the same time.

Basically what we have now is:
- If any column is self-declared as `interactive` then we'll add the
`<InteractionStateLayer>` to the row
- There is no row-level interaction that can be defined within the
table... but `position: relative` was removed from the RowCell, it only
exists on the Row now.
- So cells can be relative to the row by implementing the `:before {
position: absolute; ... }` pattern.
- If a cell does make itself absolute positioned, then z-index can
control if that cell sits above, or below, it's neighbors.

There's 4 columns that each set some combination of those properties.
Together these properties create a stack/layer of columns across the
whole row.

| Column | `interactive: true` | `z-index: 1` | `:before{postition:
absolute}` |
| --- | --- | --- | --- |
| ReplayDetailsLinkColumn | true | true | -
| ReplayPlayPauseColumn | true | true | true 
| ReplaySelectColumn | true | true | - 
| ReplaySessionColumn | true | - | true

**Layers in action**

In the **main replay table** we have the columns:
`ReplaySelectColumn | ReplaySessionColumn | ...rest`
1. The Select column uses `z-index:1` to appear on top of the Session
column
2. The Session column uses the `:before` selector to make itself spread
across the whole row. It's clickable everywhere, except under the select
column

Something like this:
<img width="988" height="124" alt="SCR-20250716-swuc"
src="https://github.com/user-attachments/assets/e03b9094-93a0-4baa-b52b-04923c94281b"
/>



In the **Issues>Replay** table are the columns:
`ReplayPlayPauseColumn | ReplaySessionColumn | ...rest |
ReplayDetailsLinkColumn`
1. The PlayPause column uses `:before` and `z-index:1` to spread across
the whole row.
2. The Session column also uses `:before` to spread across the whole
row, but it's not clickable because PlayPause is above it with it's
z-index
3. The Details column sets it's own z-index, which puts it above the
other two columns. But it's only clickable in it's own column.

Something like this:
<img width="990" height="121" alt="SCR-20250716-swwd"
src="https://github.com/user-attachments/assets/c2b55f16-4443-4fa4-9f1f-114d2b148a6f"
/>

Author: ryan953

static/app/components/replays/table/replayTable.tsx

@@ -25,20 +25,19 @@ type Props = SortProps & {
   isPending: boolean;
   replays: ReplayListRecord[];
   showDropdownFilters: boolean;
-  onClickRow?: (props: {replay: ReplayListRecord; rowIndex: number}) => void;
 };
 
 export default function ReplayTable({
   columns,
   error,
   isPending,
-  onClickRow,
   onSortClick,
   replays,
   showDropdownFilters,
   sort,
 }: Props) {
   const gridTemplateColumns = columns.map(col => col.width ?? 'max-content').join(' ');
+  const hasInteractiveColumn = columns.some(col => col.interactive);
 
   if (isPending) {
     return (
@@ -93,33 +92,24 @@ export default function ReplayTable({
       {replays.length === 0 && (
         <SimpleTable.Empty>{t('No replays found')}</SimpleTable.Empty>
       )}
-      {replays.map((replay, rowIndex) => {
-        const rows = columns.map((column, columnIndex) => (
-          <RowCell key={`${replay.id}-${column.sortKey}`}>
-            <column.Component
-              columnIndex={columnIndex}
-              replay={replay}
-              rowIndex={rowIndex}
-              showDropdownFilters={showDropdownFilters}
-            />
-          </RowCell>
-        ));
-        return (
-          <SimpleTable.Row
-            key={replay.id}
-            variant={replay.is_archived ? 'faded' : 'default'}
-          >
-            {onClickRow ? (
-              <RowContentButton as="div" onClick={() => onClickRow({replay, rowIndex})}>
-                <InteractionStateLayer />
-                {rows}
-              </RowContentButton>
-            ) : (
-              rows
-            )}
-          </SimpleTable.Row>
-        );
-      })}
+      {replays.map((replay, rowIndex) => (
+        <SimpleTable.Row
+          key={replay.id}
+          variant={replay.is_archived ? 'faded' : 'default'}
+        >
+          {hasInteractiveColumn ? <InteractionStateLayer /> : null}
+          {columns.map((column, columnIndex) => (
+            <RowCell key={`${replay.id}-${columnIndex}-${column.sortKey}`}>
+              <column.Component
+                columnIndex={columnIndex}
+                replay={replay}
+                rowIndex={rowIndex}
+                showDropdownFilters={showDropdownFilters}
+              />
+            </RowCell>
+          ))}
+        </SimpleTable.Row>
+      ))}
     </StyledSimpleTable>
   );
 }
@@ -150,18 +140,7 @@ function getErrorMessage(fetchError: RequestError) {
   );
 }
 
-const RowContentButton = styled('button')`
-  display: contents;
-  cursor: pointer;
-
-  border: none;
-  background: transparent;
-  margin: 0;
-  padding: 0;
-`;
-
 const RowCell = styled(SimpleTable.RowCell)`
-  position: relative;
   overflow: auto;
 
   /* Used for cell menu items that are hidden by default */