diff --git a/CHANGES.md b/CHANGES.md
index 46159061a7..a058c7edf3 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -115,6 +115,7 @@ New Themes:
 Dev Improvements:
 
 - (chore) greatly improve match scope visualization in dev tool (#3126) [NullVoxPopuli][]
+- (fix) CSS used for devtool needed an adjustment to fix too wide of content (#3133) [NullVoxPopuli][]
 
 [Farzad Sadeghi]: https://github.com/terminaldweller
 [Martijn Bastiaan]: https://github.com/martijnbastiaan
diff --git a/tools/developer.html b/tools/developer.html
index 693ac8956a..8d3f81903a 100644
--- a/tools/developer.html
+++ b/tools/developer.html
@@ -39,16 +39,16 @@
     }
 
     .visible-structure pre code span {
-      display: inline-flex;
-      align-items: baseline;
-      padding: 0.25rem;
-      padding-bottom: 0.125rem;
-      padding-top: 0.5rem;
-      margin: 0.5rem 0.25rem 0.125rem 0.25rem;
+      display: inline flow-root list-item;
+      list-style: none;
+      padding: 0.2rem 0.25rem;
+      padding-bottom: 0.25rem;
+      margin: 0.5rem 0.25rem 0.25rem 0.25rem;
       border: 1px dashed #777;
-      border-radius: 5px;
+      border-radius: 3px;
       white-space: pre;
       position: relative;
+      vertical-align: super;
     }
 
     .visible-structure pre code span:before {
@@ -67,11 +67,15 @@
     }
 
     .visible-structure pre code span:after {
-      display: block;
+      /* this hidden element is for stretching the span
+         to be at least the width of the before pseudo element */
       opacity: 0;
       font-size: 70%;
       content: attr(data-klass);
       margin-top: -1rem;
+      position: relative;
+      left: -100%;
+      display: flex;
     }
   </style>
 </head>