fix(replays): fix text overflow and update padding (#57217)

Changes (per @Jesse-Box's request):
- remove `<code>` wrapping around table items
- fix up padding to minimize keylines

Also fixed bug w/ text overflow 

<img width="1212" alt="SCR-20230929-jqta"
src="https://github.com/getsentry/sentry/assets/56095982/3322ac76-e2d4-456c-917a-78e2529dd57e">

static/app/views/performance/landing/widgets/components/accordion.tsx

@@ -15,9 +15,15 @@ interface Props {
   expandedIndex: number;
   items: AccordionItemContent[];
   setExpandedIndex: (index: number) => void;
+  buttonOnLeft?: boolean;
 }
 
-export default function Accordion({expandedIndex, setExpandedIndex, items}: Props) {
+export default function Accordion({
+  expandedIndex,
+  setExpandedIndex,
+  items,
+  buttonOnLeft,
+}: Props) {
   return (
     <AccordionContainer>
       {items.map((item, index) => (
@@ -27,6 +33,7 @@ export default function Accordion({expandedIndex, setExpandedIndex, items}: Prop
           key={index}
           content={item.content()}
           setExpandedIndex={setExpandedIndex}
+          buttonOnLeft={buttonOnLeft}
         >
           {item.header()}
         </AccordionItem>
@@ -41,14 +48,31 @@ function AccordionItem({
   children,
   setExpandedIndex,
   content,
+  buttonOnLeft,
 }: {
   children: ReactNode;
   content: ReactNode;
   currentIndex: number;
   isExpanded: boolean;
   setExpandedIndex: (index: number) => void;
+  buttonOnLeft?: boolean;
 }) {
-  return (
+  return buttonOnLeft ? (
+    <StyledLineItem>
+      <ButtonLeftListItemContainer>
+        <Button
+          icon={<IconChevron size="xs" direction={isExpanded ? 'up' : 'down'} />}
+          aria-label={t('Expand')}
+          aria-expanded={isExpanded}
+          size="zero"
+          borderless
+          onClick={() => setExpandedIndex(index)}
+        />
+        {children}
+      </ButtonLeftListItemContainer>
+      <LeftContentContainer>{isExpanded && content}</LeftContentContainer>
+    </StyledLineItem>
+  ) : (
     <StyledLineItem>
       <ListItemContainer>
         {children}
@@ -76,6 +100,14 @@ const AccordionContainer = styled('ul')`
   list-style-type: none;
 `;
 
+const ButtonLeftListItemContainer = styled('div')`
+  display: flex;
+  border-top: 1px solid ${p => p.theme.border};
+  padding: ${space(1)} ${space(2)};
+  font-size: ${p => p.theme.fontSizeMedium};
+  column-gap: ${space(1.5)};
+`;
+
 const ListItemContainer = styled('div')`
   display: flex;
   border-top: 1px solid ${p => p.theme.border};
@@ -86,3 +118,7 @@ const ListItemContainer = styled('div')`
 const StyledContentContainer = styled('div')`
   padding: ${space(0)} ${space(2)};
 `;
+
+const LeftContentContainer = styled('div')`
+  padding: ${space(0)} ${space(0.25)};
+`;

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

@@ -15,7 +15,6 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import Accordion from 'sentry/views/performance/landing/widgets/components/accordion';
-import {RightAlignedCell} from 'sentry/views/performance/landing/widgets/components/selectableList';
 import {
   ContentContainer,
   HeaderContainer,
@@ -116,6 +115,7 @@ function AccordionWidget({
       ) : (
         <LeftAlignedContentContainer>
           <Accordion
+            buttonOnLeft
             expandedIndex={selectedListIndex}
             setExpandedIndex={setSelectListIndex}
             items={filteredData.map(d => {
@@ -268,4 +268,11 @@ const StyledWidgetContainer = styled(WidgetContainer)`
   margin-bottom: 0;
 `;
 
+export const RightAlignedCell = styled('div')`
+  text-align: right;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 export default DeadRageSelectorCards;

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

@@ -1,4 +1,4 @@
-import {Fragment, ReactNode, useCallback, useMemo} from 'react';
+import {ReactNode, useCallback, useMemo} from 'react';
 import styled from '@emotion/styled';
 import type {Location} from 'history';
 
@@ -10,7 +10,7 @@ import useQueryBasedSorting from 'sentry/components/replays/useQueryBasedSorting
 import TextOverflow from 'sentry/components/textOverflow';
 import {Tooltip} from 'sentry/components/tooltip';
 import {IconCursorArrow} from 'sentry/icons';
-import {tct} from 'sentry/locale';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {ColorOrAlias} from 'sentry/utils/theme';
 import {useLocation} from 'sentry/utils/useLocation';
@@ -113,11 +113,7 @@ export default function SelectorTable({
           );
         case 'element':
         case 'aria_label':
-          return (
-            <TextOverflow>
-              <code>{value}</code>
-            </TextOverflow>
-          );
+          return <TextOverflow>{value}</TextOverflow>;
         default:
           return renderClickCount<DeadRageSelectorItem>(column, dataRow);
       }
@@ -154,16 +150,7 @@ export function SelectorLink({
   const organization = useOrganization();
   const location = useLocation();
   return (
-    <Tooltip
-      title={tct('Search for replays with clicks on: [selector]', {
-        selector: (
-          <Fragment>
-            <br />
-            <code>{value}</code>
-          </Fragment>
-        ),
-      })}
-    >
+    <StyledTextOverflow>
       <Link
         to={{
           pathname: normalizeUrl(`/organizations/${organization.slug}/replays/`),
@@ -174,11 +161,14 @@ export function SelectorLink({
           },
         }}
       >
-        <StyledTextOverflow>
-          <code>{value}</code>
-        </StyledTextOverflow>
+        <StyledTooltip
+          position="top-start"
+          title={t('Search for replays with clicks on this selector')}
+        >
+          {value}
+        </StyledTooltip>
       </Link>
-    </Tooltip>
+    </StyledTextOverflow>
   );
 }
 
@@ -203,7 +193,9 @@ const ClickColor = styled(TextOverflow)<{color: ColorOrAlias}>`
 `;
 
 const StyledTextOverflow = styled(TextOverflow)`
-  & code {
-    color: ${p => p.theme.blue300};
-  }
+  color: ${p => p.theme.blue300};
+`;
+
+const StyledTooltip = styled(Tooltip)`
+  display: inherit;
 `;