From 09ba68e38f5df15d47859b06dc31c464d6ef3ea6 Mon Sep 17 00:00:00 2001
From: Sebastian Sebbie Silbermann <sebastian.silbermann@vercel.com>
Date: Mon, 20 Oct 2025 19:18:34 +0200
Subject: [PATCH] [DevTools] Text layout fixes for stack traces with badges

---
 .../src/devtools/views/Components/StackTraceView.css     | 9 ++++++---
 .../src/devtools/views/Components/StackTraceView.js      | 6 ++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css
index bd13a89c6c9..98200ee9dfd 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.css
+++ b/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;
+}
+
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js
index d3d797f7810..a3cf91f14b7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js
+++ b/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>
   );
 }