chore(replays): add beta badge to widget and selector table (#57693)

<img width="1191" alt="SCR-20231006-jpph"
src="https://github.com/getsentry/sentry/assets/56095982/5397126d-ebc1-4183-8ad1-9d076c5666ec">
<img width="1190" alt="SCR-20231006-jpue"
src="https://github.com/getsentry/sentry/assets/56095982/5e9bcdab-b362-4843-8046-7ecf2b62270d">


Closes https://github.com/getsentry/sentry/issues/57672

static/app/views/replays/deadRageClick/deadRageClickList.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import Alert from 'sentry/components/alert';
 import DatePageFilter from 'sentry/components/datePageFilter';
 import EnvironmentPageFilter from 'sentry/components/environmentPageFilter';
+import FeatureBadge from 'sentry/components/featureBadge';
 import * as Layout from 'sentry/components/layouts/thirds';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
@@ -55,6 +56,7 @@ export default function DeadRageClickList() {
               title={t('See the top selectors your users have dead and rage clicked on.')}
               docsUrl="https://docs.sentry.io/product/session-replay/replay-page-and-filters/"
             />
+            <FeatureBadge type="beta" />
           </Layout.Title>
         </Layout.HeaderContent>
         <div /> {/* wraps the tabs below the page title */}

static/app/views/replays/deadRageClick/deadRageSelectorCards.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import {LinkButton} from 'sentry/components/button';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
+import FeatureBadge from 'sentry/components/featureBadge';
 import Placeholder from 'sentry/components/placeholder';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import TextOverflow from 'sentry/components/textOverflow';
@@ -37,13 +38,16 @@ function DeadRageSelectorCards() {
         header={
           <div>
             <StyledWidgetHeader>
-              {t('Most Dead Clicks')}
-              <QuestionTooltip
-                size="xs"
-                position="top"
-                title={t('The top selectors your users have dead clicked on.')}
-                isHoverable
-              />
+              <TitleTooltipContainer>
+                {t('Most Dead Clicks')}
+                <QuestionTooltip
+                  size="xs"
+                  position="top"
+                  title={t('The top selectors your users have dead clicked on.')}
+                  isHoverable
+                />
+              </TitleTooltipContainer>
+              <FeatureBadge type="beta" />
             </StyledWidgetHeader>
             <Subtitle>{t('Suggested replays to watch')}</Subtitle>
           </div>
@@ -55,13 +59,16 @@ function DeadRageSelectorCards() {
         header={
           <div>
             <StyledWidgetHeader>
-              {t('Most Rage Clicks')}
-              <QuestionTooltip
-                size="xs"
-                position="top"
-                title={t('The top selectors your users have rage clicked on.')}
-                isHoverable
-              />
+              <TitleTooltipContainer>
+                {t('Most Rage Clicks')}
+                <QuestionTooltip
+                  size="xs"
+                  position="top"
+                  title={t('The top selectors your users have rage clicked on.')}
+                  isHoverable
+                />
+              </TitleTooltipContainer>
+              <FeatureBadge type="beta" />
             </StyledWidgetHeader>
             <Subtitle>{t('Suggested replays to watch')}</Subtitle>
           </div>
@@ -275,10 +282,15 @@ const StyledAccordionHeader = styled('div')`
   flex: 1;
 `;
 
+const TitleTooltipContainer = styled('div')`
+  display: flex;
+  gap: ${space(1)};
+  align-items: center;
+`;
+
 const StyledWidgetHeader = styled(HeaderTitleLegend)`
   display: grid;
-  gap: ${space(1)};
-  justify-content: start;
+  justify-content: space-between;
   align-items: center;
 `;