Clarify request mapping UI

apps/ui/css/wizard.css

@@ -202,6 +202,7 @@
   display: grid;
   grid-template-columns:
     minmax(130px, 1fr)
+    24px
     minmax(105px, 0.65fr)
     minmax(130px, 1fr)
     minmax(120px, 0.8fr)
@@ -216,7 +217,39 @@
 }
 
 .response-mapping-row {
-  grid-template-columns: minmax(160px, 1fr) minmax(140px, 1fr) 34px;
+  grid-template-columns: minmax(160px, 1fr) 24px minmax(140px, 1fr) 34px;
+}
+
+.mapping-field {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+}
+
+.mapping-field-label {
+  color: var(--text-muted);
+  font-size: 10.5px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.mapping-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: end;
+  width: 24px;
+  height: 34px;
+  color: var(--accent);
+  font-size: 18px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.mapping-default-value {
+  border-style: dashed;
 }
 
 .mapping-row-remove {
@@ -331,6 +364,12 @@
     grid-template-columns: 1fr;
   }
 
+  .mapping-arrow {
+    width: 100%;
+    height: 18px;
+    transform: rotate(90deg);
+  }
+
   .mapping-row-remove {
     width: 100%;
   }