fix(devtool): improved CSS to scope name debugging (#3133)

* fix(devtool): use correct CSS to hide psuedo element used for hacking the width of the wrapping content to be *at least* the width of the green class tag / decoration

* Hybrid approach to both new and old dev tool

* fix spacing issues, but cause minor text alignment issues -- looks ok~ish tho

* Use vertical-align: super to fix text alignment

* Compress the spacing a bit in the dev tool

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

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>