flow: ui

src/client/components/traits.jsx

@@ -94,7 +94,7 @@ const makeTabSelector = (context, type) => createSelector(
     return TraitComponent
       ? <TraitComponent params={params} state={state} />
       : (
-        <form>
+        <form className="trait-component-builtin">
           {renderComponents(paramsDescription, params)}
           {renderComponents(stateDescription, state)}
         </form>

src/client/components/traits.raw.scss

@@ -30,3 +30,7 @@ form {
 .unrenderable {
   font-size: 2em;
 }
+
+.trait-component-builtin {
+  font-size: 1em;
+}

src/client/components/types/steps.jsx

@@ -60,17 +60,21 @@ const Steps = (props) => {
             return (
               <div className="invoke">
                 <span className="paren open">(</span>
+                  {console.log(steps)}
                   {step.args.map((arg) => (
                     <div className="arg">
-                      <Value.component
-                        context={context}
-                        type={
-                          arg.steps
-                            ? typeFromSteps(context, arg.steps)
-                            : typeFromLiteral(arg)
-                        }
-                        value={arg}
-                      />
+                      <label>
+                        {arg.label}
+                        <Value.component
+                          context={context}
+                          type={
+                            arg.steps
+                              ? typeFromSteps(context, arg.steps)
+                              : typeFromLiteral(arg)
+                          }
+                          value={arg}
+                        />
+                      </label>
                     </div>
                   ))}
                 <span className="paren close">)</span>

src/client/components/types/value.raw.scss

@@ -7,6 +7,6 @@
   align-items: center;
 }
 
-.literal select {
-  margin-right: 0.25em;
+.literal select:first-child {
+  border-right: none;
 }

src/client/index.scss

@@ -78,7 +78,7 @@ label {
   flex-direction: column;
   flex-wrap: wrap;
   font-family: "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
-  font-size: 0.6em;
+  font-size: 1em;
   min-height: 3em;
   padding: 0.5em 0.5em 0.5em 1em;
   user-select: none;
@@ -87,9 +87,6 @@ label {
     flex-direction: row;
     justify-content: space-between;
   }
-  @media(min-width: 32em) {
-    font-size: 0.8em;
-  }
 }
 
 label:nth-of-type(2n+1) {