fix(issues): Add padding to stack trace thread (#78888)

static/app/components/events/interfaces/threads.tsx

@@ -61,7 +61,7 @@ function getIntendedStackView(
   return stacktrace?.hasSystemFrames ? StackView.APP : StackView.FULL;
 }
 
-export function getThreadStateIcon(state: ThreadStates | undefined) {
+function ThreadStateIcon({state}: {state: ThreadStates | undefined}) {
   if (state === null || state === undefined) {
     return null;
   }
@@ -253,22 +253,23 @@ export function Threads({data, event, projectSlug, groupingCurrentLevel}: Props)
               )}
             </div>
             {activeThread?.state && (
-              <div>
+              <TheadStateContainer>
                 <ThreadHeading>{t('Thread State')}</ThreadHeading>
                 <ThreadStateWrapper>
-                  {getThreadStateIcon(threadStateDisplay)}
-                  <ThreadState>{threadStateDisplay}</ThreadState>
+                  <ThreadStateIcon state={threadStateDisplay} />
+                  <TextOverflow>{threadStateDisplay}</TextOverflow>
                   {threadStateDisplay && (
                     <QuestionTooltip
                       position="top"
                       size="xs"
                       containerDisplayMode="block"
                       title={getThreadStateHelpText(threadStateDisplay)}
+                      skipWrapper
                     />
                   )}
                   <LockReason>{getLockReason(activeThread?.heldLocks)}</LockReason>
                 </ThreadStateWrapper>
-              </div>
+              </TheadStateContainer>
             )}
           </Grid>
           {!hideThreadTags && (
@@ -373,22 +374,21 @@ export function Threads({data, event, projectSlug, groupingCurrentLevel}: Props)
 const Grid = styled('div')`
   display: grid;
   grid-template-columns: auto 1fr;
+  gap: ${space(2)};
+`;
+
+const TheadStateContainer = styled('div')`
+  ${p => p.theme.overflowEllipsis}
 `;
 
 const ThreadStateWrapper = styled('div')`
   display: flex;
   position: relative;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: center;
   gap: ${space(0.5)};
 `;
 
-const ThreadState = styled(TextOverflow)`
-  max-width: 100%;
-  text-align: left;
-  font-weight: ${p => p.theme.fontWeightBold};
-`;
-
 const LockReason = styled(TextOverflow)`
   font-weight: ${p => p.theme.fontWeightNormal};
   color: ${p => p.theme.gray300};