--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -100,27 +100,29 @@ a {
   font-weight: 600;
 }
 
 .message-repeats[value="1"] {
   display: none;
 }
 
 .message-location {
-  max-width: 40%;
+  max-width: 40vw;
+  grid-column: -1 / -2;
+  color: var(--frame-link-source);
 }
 
 .stack-trace {
   /* The markup contains extra whitespace to improve formatting of clipboard text.
      Make sure this whitespace doesn't affect the HTML rendering */
   white-space: normal;
 }
 
-.stack-trace .frame-link-source,
-.message-location .frame-link-source {
+.message-location,
+.stack-trace .frame-link-source {
   /* Makes the file name truncated (and ellipsis shown) on the left side */
   direction: rtl;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: end;
 }
 
@@ -133,17 +135,19 @@ a {
 
 .stack-trace .frame-link-function-display-name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .message-flex-body {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto max-content;
+  grid-gap: 5px;
 }
 
 .message-body {
   white-space: pre-wrap;
   word-wrap: break-word;
 }
 
 .message-flex-body > .message-body {
@@ -640,18 +644,17 @@ a.learn-more-link.webconsole-learn-more-
   color: var(--theme-body-color);
 }
 .theme-dark .webconsole-output-wrapper .message.error .tree.object-inspector,
 .theme-dark .webconsole-output-wrapper .message.warn .tree.object-inspector {
   --console-output-indent-border-color: var(--theme-body-color);
 }
 
 .webconsole-output-wrapper .message-flex-body > .message-body {
-  display: inline-block;
-  max-width: 100%;
+  overflow-x: auto;
 }
 
 .webconsole-output-wrapper .message-body > * {
   flex-shrink: 0;
   vertical-align: top;
 }
 
 .message.startGroup .message-body > .objectBox-string,
@@ -949,16 +952,17 @@ body #output-container {
 }
 
 /*
  * Make console.group, exception and XHR message's arrow look the same as the arrow
  * used in the ObjectInspector (same background-image, width, transition).
  * Properties were copied from devtools/client/shared/components/reps/reps.css.
  */
 .webconsole-output-wrapper img.collapse-button.arrow {
+  flex: none;
   mask: url("chrome://devtools/skin/images/devtools-components/arrow.svg") no-repeat;
   mask-size: 100%;
   width: 9px;
   height: 9px;
   margin-block-start: 5px;
   margin-inline-start: 4px;
   margin-inline-end: 1px;
   transform: rotate(-90deg);