flow: ui

src/client/index.scss

@@ -189,7 +189,11 @@ select {
     align-items: center;
     display: flex;
     height: 100%;
+    padding: 0 0.5em;
     justify-content: space-evenly;
+    .text {
+      padding: 0 0.5em;
+    }
   }
   .icon {
     padding: 0.75em;

src/client/resources.raw.scss

@@ -2,16 +2,3 @@
   height: 100%;
   width: 100%;
 }
-
-.react-tabs__tab .wrapper {
-  padding: 0 0.5em;
-}
-
-.react-tabs__tab .wrapper .text {
-  padding: 0 0.5em;
-}
-
-// :scope > .react-tabs > .react-tabs__tab-list {
-//   margin-left: 4em;
-//   width: calc(100% - 3em);
-// }

src/common/resources/entity/trait-tab.jsx

@@ -6,7 +6,7 @@ const TraitTab = (props) => {
   return (
     <span className="wrapper">
       <span className="icon" />
-      {type}
+      <span className="text">{type}</span>
       <span className="close">✕</span>
     </span>
   );

src/common/resources/entity/traits.raw.scss

@@ -18,10 +18,6 @@ form {
   margin: 1em;
 }
 
-.text {
-  margin-right: 0.5em;
-}
-
 .unrenderable {
   font-size: 2em;
 }