ui: tweaks

src/client/types/expression.raw.scss

@@ -1,6 +1,16 @@
 :scope {
   display: flex;
   flex-wrap: wrap;
+  position: relative;
+}
+
+.label {
+  color: #999;
+  font-size: 0.8em;
+  left: -2.5em;
+  position: absolute;
+  writing-mode: vertical-lr;
+  top: -1em;
 }
 
 .key {
@@ -64,5 +74,8 @@
 
 .op {
   align-self: flex-start;
-  margin: 0.125em;
+  margin-right: 0.125em;
+  &:last-of-type {
+    margin-right: 0;
+  }
 }

src/client/types/expression.type-renderer.jsx

@@ -33,6 +33,9 @@ const Expression = (props) => {
   const opsDescription = descriptionFromOps(context, ops);
   return (
     <div className="expression">
+      {isStatement && (
+        <div className="label">{assign ? 'assign' : 'invoke'}</div>
+      )}
       {ops.map((op, i) => (
         // eslint-disable-next-line react/no-array-index-key
         <span className="op" key={i}>

src/client/types/literal.raw.scss

@@ -5,5 +5,5 @@
 }
 
 select {
-  margin-right: 0.25em;
+  margin-right: 0.125em;
 }