feat(replays): Iterate on copy to prompt users to inspect replays wit…

…h their browser (#45216)

**Before:**
The copy was causing some confusion with people. So we want to indicate
that their browser tools will work here.

Also, at it's most narrow width the text would overlap and become
unreadable:
<img width="358" alt="inspect min-width - before "
src="https://user-images.githubusercontent.com/187460/221989201-22d2d9ca-149d-4218-8a1b-68a7e21e47a1.png">

**After:**
Normal width:

![SCR-20230302-kg7](https://user-images.githubusercontent.com/187460/222576567-93a37eee-9d64-45eb-ae33-01da920342ba.png)

Most narrow:

![SCR-20230302-kfy](https://user-images.githubusercontent.com/187460/222576532-5f3cbf71-93e3-43d4-b879-0de84b3f7343.png)



Fixes #44602

static/app/components/replays/playerDOMAlert.tsx

@@ -18,8 +18,8 @@ function PlayerDOMAlert() {
   return (
     <DOMAlertContainer data-test-id="player-dom-alert">
       <DOMAlert>
-        <IconInfo size="xs" />
-        {t("Right click & inspect your app's DOM")}
+        <StyledIconInfo size="xs" />
+        <div>{t('Right click & inspect your app’s DOM with your browser')}</div>
         <DismissButton
           priority="link"
           size="sm"
@@ -46,15 +46,20 @@ const DOMAlertContainer = styled('div')`
 
 const DOMAlert = styled('div')`
   display: inline-flex;
-  align-items: center;
+  align-items: flex-start;
   justify-items: center;
   padding: ${space(1)} ${space(2)};
   margin: 0 ${space(1)};
   color: ${p => p.theme.white};
   background-color: ${p => p.theme.blue400};
   border-radius: ${p => p.theme.borderRadius};
   gap: 0 ${space(1)};
-  line-height: 0;
+  line-height: 1em;
+`;
+
+const StyledIconInfo = styled(IconInfo)`
+  margin-top: 1px;
+  min-width: 12px; /* Prevnt the icon from scaling down whenever text wraps */
 `;
 
 const DismissButton = styled(Button)`