fix(replay): Do not show a Browser icon for mobile replays in the replay list (#92419)

**Before**

![SCR-20250527-jsau](https://github.com/user-attachments/assets/c355dcc9-5738-4180-8ea3-145a13c3c1e0)


**After**

![SCR-20250529-nkjr](https://github.com/user-attachments/assets/848c6556-c107-4cd1-9bd0-5e9cd89354ba)


Fixes REPLAY-229

Author: ryan953

static/app/components/replays/platformIcon.tsx renamed to static/app/components/replays/replayPlatformIcon.tsx

@@ -22,7 +22,7 @@ const iconStyle = (theme: Theme) => ({
   border: '1px solid ' + theme.translucentGray100,
 });
 
-const PlatformIcon = styled(
+const ReplayPlatformIcon = styled(
   ({className, name, version, showVersion, showTooltip}: Props) => {
     const theme = useTheme();
     const icon = generatePlatformIconName(name, version);
@@ -55,4 +55,4 @@ const PlatformIcon = styled(
   align-items: center;
 `;
 
-export default PlatformIcon;
+export default ReplayPlatformIcon;

static/app/views/replays/detail/browserOSIcons.tsx

@@ -2,8 +2,8 @@ import {Fragment} from 'react';
 
 import {Tooltip} from 'sentry/components/core/tooltip';
 import Placeholder from 'sentry/components/placeholder';
-import PlatformIcon from 'sentry/components/replays/platformIcon';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
+import ReplayPlatformIcon from 'sentry/components/replays/replayPlatformIcon';
 
 export default function BrowserOSIcons({
   showBrowser = true,
@@ -20,7 +20,7 @@ export default function BrowserOSIcons({
   ) : (
     <Fragment>
       <Tooltip title={`${replayRecord?.os.name ?? ''} ${replayRecord?.os.version ?? ''}`}>
-        <PlatformIcon
+        <ReplayPlatformIcon
           name={replayRecord?.os.name ?? ''}
           version={replayRecord?.os.version ?? undefined}
           showVersion
@@ -32,7 +32,7 @@ export default function BrowserOSIcons({
             replayRecord?.browser.version ?? ''
           }`}
         >
-          <PlatformIcon
+          <ReplayPlatformIcon
             name={replayRecord?.browser.name ?? ''}
             version={replayRecord?.browser.version ?? undefined}
             showVersion

static/app/views/replays/replayTable/tableCell.tsx

@@ -9,7 +9,7 @@ import {Tooltip} from 'sentry/components/core/tooltip';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import Duration from 'sentry/components/duration/duration';
 import Link from 'sentry/components/links/link';
-import PlatformIcon from 'sentry/components/replays/platformIcon';
+import ReplayPlatformIcon from 'sentry/components/replays/replayPlatformIcon';
 import ReplayPlayPauseButton from 'sentry/components/replays/replayPlayPauseButton';
 import ScoreBar from 'sentry/components/scoreBar';
 import TimeSince from 'sentry/components/timeSince';
@@ -19,6 +19,7 @@ import {
   IconDelete,
   IconEllipsis,
   IconFire,
+  IconNot,
   IconPlay,
 } from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
@@ -489,7 +490,7 @@ export function TransactionCell({
 }
 
 export function OSCell({replay, showDropdownFilters}: Props) {
-  const {name, version} = replay.os ?? {};
+  const {name, version} = replay.os;
   const theme = useTheme();
   const hasRoomForColumns = useMedia(`(min-width: ${theme.breakpoints.large})`);
 
@@ -500,7 +501,7 @@ export function OSCell({replay, showDropdownFilters}: Props) {
     <Item>
       <Container>
         <Tooltip title={`${name ?? ''} ${version ?? ''}`}>
-          <PlatformIcon
+          <ReplayPlatformIcon
             name={name ?? ''}
             version={version && hasRoomForColumns ? version : undefined}
             showVersion={false}
@@ -516,18 +517,27 @@ export function OSCell({replay, showDropdownFilters}: Props) {
 }
 
 export function BrowserCell({replay, showDropdownFilters}: Props) {
-  const {name, version} = replay.browser ?? {};
+  const {name, version} = replay.browser;
   const theme = useTheme();
   const hasRoomForColumns = useMedia(`(min-width: ${theme.breakpoints.large})`);
 
   if (replay.is_archived) {
     return <Item isArchived />;
   }
+
+  if (name === null && version === null) {
+    return (
+      <Item>
+        {/* <Tag icon={<IconNot />} /> */}
+        <IconNot size="xs" color="gray300" />
+      </Item>
+    );
+  }
   return (
     <Item>
       <Container>
         <Tooltip title={`${name} ${version}`}>
-          <PlatformIcon
+          <ReplayPlatformIcon
             name={name ?? ''}
             version={version && hasRoomForColumns ? version : undefined}
             showVersion={false}