[DevTools] Text layout fixes for stack traces with badges (#34925)

Author: eps1lon

packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css

@@ -3,8 +3,9 @@
 }
 
 .CallSite, .BuiltInCallSite {
-  display: block;
+  display: flex;
   padding-left: 1rem;
+  white-space-collapse: preserve;
 }
 
 .IgnoredCallSite, .BuiltInCallSite {
@@ -20,13 +21,15 @@
   white-space: pre;
   overflow: hidden;
   text-overflow: ellipsis;
-  flex: 1;
   cursor: pointer;
   border-radius: 0.125rem;
-  padding: 0px 2px;
 }
 
 .Link:hover {
   background-color: var(--color-background-hover);
 }
 
+.ElementBadges {
+  margin-left: 0.25rem;
+}
+

packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js

@@ -86,8 +86,10 @@ export function CallSiteView({
           </span>
         </>
       )}
-
-      <ElementBadges environmentName={environmentName} />
+      <ElementBadges
+        className={styles.ElementBadges}
+        environmentName={environmentName}
+      />
     </div>
   );
 }