replay(feat): Iterate on rendering for browser/device icons inside Replay Details (#95384)

**Before**

<img width="181" height="97" alt="SCR-20250711-ngel"
src="https://github.com/user-attachments/assets/f84e3848-07b1-42ed-8845-81f6a5efd7e7"
/>

**After**

<img width="230" height="89" alt="SCR-20250711-ngal"
src="https://github.com/user-attachments/assets/65544c00-1bd9-43da-98c2-6aad423d8b8d"
/>

Author: ryan953

static/app/components/replays/replayPlatformIcon.tsx

@@ -17,7 +17,7 @@ type Props = {
   showVersion?: boolean;
 };
 
-const iconSize = '16px';
+const iconSize = '20px';
 const iconStyle = (theme: Theme) => ({
   border: '1px solid ' + theme.translucentGray100,
 });

static/app/components/replays/replayView.tsx

@@ -2,6 +2,7 @@ import {Fragment, useState} from 'react';
 import styled from '@emotion/styled';
 
 import NegativeSpaceContainer from 'sentry/components/container/negativeSpaceContainer';
+import {Flex} from 'sentry/components/core/layout';
 import ExternalLink from 'sentry/components/links/externalLink';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
@@ -71,13 +72,15 @@ function ReplayView({toggleFullscreen, isLoading}: Props) {
             ) : (
               <ReplayCurrentUrl />
             )}
-            <BrowserOSIcons showBrowser={!isVideoReplay} isLoading={isLoading} />
-            {isFullscreen ? (
-              <ReplaySidebarToggleButton
-                isOpen={isSidebarOpen}
-                setIsOpen={setIsSidebarOpen}
-              />
-            ) : null}
+            <Flex gap={space(1)}>
+              <BrowserOSIcons showBrowser={!isVideoReplay} isLoading={isLoading} />
+              {isFullscreen ? (
+                <ReplaySidebarToggleButton
+                  isOpen={isSidebarOpen}
+                  setIsOpen={setIsSidebarOpen}
+                />
+              ) : null}
+            </Flex>
           </ContextContainer>
           {isLoading ? (
             <FluidHeight>
@@ -128,7 +131,7 @@ const ContextContainer = styled('div')`
   grid-auto-flow: column;
   grid-template-columns: 1fr max-content;
   align-items: center;
-  gap: ${space(1)};
+  gap: ${space(1.5)};
 `;
 
 const ScreenNameContainer = styled('div')`

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

@@ -1,9 +1,11 @@
-import {Fragment} from 'react';
+import styled from '@emotion/styled';
 
+import {Flex} from 'sentry/components/core/layout';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import Placeholder from 'sentry/components/placeholder';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import ReplayPlatformIcon from 'sentry/components/replays/replayPlatformIcon';
+import {space} from 'sentry/styles/space';
 
 export default function BrowserOSIcons({
   showBrowser = true,
@@ -18,7 +20,7 @@ export default function BrowserOSIcons({
   return isLoading ? (
     <Placeholder width="50px" height="32px" />
   ) : (
-    <Fragment>
+    <Flex direction="row-reverse">
       <Tooltip title={`${replayRecord?.os.name ?? ''} ${replayRecord?.os.version ?? ''}`}>
         <ReplayPlatformIcon
           name={replayRecord?.os.name ?? ''}
@@ -27,18 +29,25 @@ export default function BrowserOSIcons({
         />
       </Tooltip>
       {showBrowser && (
-        <Tooltip
-          title={`${replayRecord?.browser.name ?? ''} ${
-            replayRecord?.browser.version ?? ''
-          }`}
-        >
-          <ReplayPlatformIcon
-            name={replayRecord?.browser.name ?? ''}
-            version={replayRecord?.browser.version ?? undefined}
-            showVersion
-          />
-        </Tooltip>
+        <Overlap>
+          <Tooltip
+            title={`${replayRecord?.browser.name ?? ''} ${
+              replayRecord?.browser.version ?? ''
+            }`}
+          >
+            <ReplayPlatformIcon
+              name={replayRecord?.browser.name ?? ''}
+              version={replayRecord?.browser.version ?? undefined}
+              showVersion
+            />
+          </Tooltip>
+        </Overlap>
       )}
-    </Fragment>
+    </Flex>
   );
 }
+
+const Overlap = styled('div')`
+  margin-right: -${space(0.75)};
+  z-index: 1;
+`;