fix(insights): sample panel overflowing (#72455)

static/app/views/performance/cache/samplePanel/samplePanel.tsx

@@ -276,22 +276,20 @@ export function CacheSamplePanel() {
                   tooltip={project.slug}
                 />
               )}
-              <TitleContainer>
-                <Title>
-                  <Link
-                    to={normalizeUrl(
-                      `/organizations/${organization.slug}/performance/summary?${qs.stringify(
-                        {
-                          project: query.project,
-                          transaction: query.transaction,
-                        }
-                      )}`
-                    )}
-                  >
-                    {query.transaction}
-                  </Link>
-                </Title>
-              </TitleContainer>
+              <Title>
+                <Link
+                  to={normalizeUrl(
+                    `/organizations/${organization.slug}/performance/summary?${qs.stringify(
+                      {
+                        project: query.project,
+                        transaction: query.transaction,
+                      }
+                    )}`
+                  )}
+                >
+                  {query.transaction}
+                </Link>
+              </Title>
             </HeaderContainer>
           </ModuleLayout.Full>
 
@@ -478,26 +476,23 @@ const SpanSummaryProjectAvatar = styled(ProjectAvatar)`
   padding-right: ${space(1)};
 `;
 
+// TODO - copy of static/app/views/starfish/views/spanSummaryPage/sampleList/index.tsx
 const HeaderContainer = styled('div')`
   display: grid;
   grid-template-rows: auto auto auto;
+  align-items: center;
 
   @media (min-width: ${p => p.theme.breakpoints.small}) {
     grid-template-rows: auto;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: auto 1fr;
   }
 `;
 
-const TitleContainer = styled('div')`
-  width: 100%;
-  position: relative;
-  height: 40px;
-`;
-
 const Title = styled('h4')`
-  position: absolute;
-  bottom: 0;
-  margin-bottom: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0;
 `;
 
 const MetricsRibbon = styled('div')`

static/app/views/performance/http/httpSamplesPanel.tsx

@@ -319,26 +319,24 @@ export function HTTPSamplesPanel() {
                   tooltip={project.slug}
                 />
               )}
-              <TitleContainer>
-                <Title>
-                  <Link
-                    to={normalizeUrl(
-                      `/organizations/${organization.slug}/performance/summary?${qs.stringify(
-                        {
-                          project: query.project,
-                          transaction: query.transaction,
-                        }
-                      )}`
-                    )}
-                  >
-                    {query.transaction &&
-                    query.transactionMethod &&
-                    !query.transaction.startsWith(query.transactionMethod)
-                      ? `${query.transactionMethod} ${query.transaction}`
-                      : query.transaction}
-                  </Link>
-                </Title>
-              </TitleContainer>
+              <Title>
+                <Link
+                  to={normalizeUrl(
+                    `/organizations/${organization.slug}/performance/summary?${qs.stringify(
+                      {
+                        project: query.project,
+                        transaction: query.transaction,
+                      }
+                    )}`
+                  )}
+                >
+                  {query.transaction &&
+                  query.transactionMethod &&
+                  !query.transaction.startsWith(query.transactionMethod)
+                    ? `${query.transactionMethod} ${query.transaction}`
+                    : query.transaction}
+                </Link>
+              </Title>
             </HeaderContainer>
           </ModuleLayout.Full>
 
@@ -603,26 +601,23 @@ const HTTP_RESPONSE_CODE_CLASS_OPTIONS = [
   },
 ];
 
+// TODO - copy of static/app/views/starfish/views/spanSummaryPage/sampleList/index.tsx
 const HeaderContainer = styled('div')`
   display: grid;
   grid-template-rows: auto auto auto;
+  align-items: center;
 
   @media (min-width: ${p => p.theme.breakpoints.small}) {
     grid-template-rows: auto;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: auto 1fr;
   }
 `;
 
-const TitleContainer = styled('div')`
-  width: 100%;
-  position: relative;
-  height: 40px;
-`;
-
 const Title = styled('h4')`
-  position: absolute;
-  bottom: 0;
-  margin-bottom: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0;
 `;
 
 const MetricsRibbon = styled('div')`

static/app/views/performance/queues/destinationSummary/messageSpanSamplesPanel.tsx

@@ -523,20 +523,20 @@ const HeaderContainer = styled('div')`
 
   @media (min-width: ${p => p.theme.breakpoints.small}) {
     grid-template-rows: auto;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: auto 1fr;
   }
 `;
 
 const TitleContainer = styled('div')`
   width: 100%;
-  position: relative;
-  height: 40px;
+  overflow: hidden;
 `;
 
 const Title = styled('h4')`
-  position: absolute;
-  bottom: 0;
-  margin-bottom: 0;
+  overflow: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0;
 `;
 
 const MetricsRibbonContainer = styled('div')`

static/app/views/starfish/views/spanSummaryPage/sampleList/index.tsx

@@ -46,7 +46,6 @@ type Props = {
   moduleName: ModuleName;
   transactionName: string;
   onClose?: () => void;
-  spanDescription?: string;
   transactionMethod?: string;
   transactionRoute?: string;
 };
@@ -56,7 +55,6 @@ export function SampleList({
   moduleName,
   transactionName,
   transactionMethod,
-  spanDescription,
   onClose,
   transactionRoute = '/performance/summary/',
 }: Props) {
@@ -191,12 +189,9 @@ export function SampleList({
               tooltip={project.slug}
             />
           )}
-          <TitleContainer>
-            {spanDescription && <SpanDescription>{spanDescription}</SpanDescription>}
-            <Title>
-              <Link to={link}>{label}</Link>
-            </Title>
-          </TitleContainer>
+          <Title>
+            <Link to={link}>{label}</Link>
+          </Title>
         </HeaderContainer>
         <PageAlert />
 
@@ -272,31 +267,19 @@ const HeaderContainer = styled('div')`
 
   display: grid;
   grid-template-rows: auto auto auto;
+  align-items: center;
 
   @media (min-width: ${p => p.theme.breakpoints.small}) {
     grid-template-rows: auto;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: auto 1fr;
   }
 `;
 
-const TitleContainer = styled('div')`
-  width: 100%;
-  position: relative;
-  height: 40px;
-`;
-
 const Title = styled('h4')`
-  position: absolute;
-  bottom: 0;
-  margin-bottom: 0;
-`;
-
-const SpanDescription = styled('div')`
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 35vw;
+  overflow: hidden;
+  white-space: nowrap;
+  margin: 0;
 `;
 
 const StyledSearchBar = styled(SearchBar)`