fix: test + bad css merge

Author: rfding

src/design/styles/base.css

@@ -16,6 +16,7 @@
 .pd-design__fragment {
   position: relative;
   transition: outline 0.2s ease-in-out;
+  outline: 1px solid transparent;
 }
 
 .pd-design__component {
@@ -26,12 +27,6 @@
   --pd-design-color: #8402ad;
 }
 
-.pd-design__region {
-  --pd-design-color: #008827;
-  min-width: 50px;
-  min-height: 50px;
-}
-
 /* Shared state styles */
 .pd-design__frame--visible {
   outline: 1px solid var(--pd-design-color);
@@ -51,18 +46,17 @@
   background: var(--pd-design-color);
   color: white;
   display: inline-flex;
+  align-items: center;
+  padding: 0 12px;
   font-family: 'Salesforce Sans', sans-serif;
   font-size: 12px;
   font-weight: 500;
-  height: 32px;
-  left: 50%;
   letter-spacing: 0.5px;
   opacity: 0;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   visibility: hidden;
   transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
-  visibility: hidden;
   white-space: nowrap;
 }
 
@@ -75,7 +69,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
+  margin-right: 8px;
 }
 
 .pd-design__frame__toolbox {
@@ -97,12 +91,8 @@
   background: rgba(0, 0, 0, 0);
   border: none;
   cursor: pointer;
-  display: flex;
-  height: 20px;
-  justify-content: center;
-  padding: 0;
   transition: background-color 0.2s ease-in-out;
-  width: 20px;
+  padding: 0;
 }
 
 .pd-design__frame__toolbox-button:hover {