Fixed dark-theme content-input

* **UI/UX**: modal-data nows shows node results order by vertical
position from top to bottom

browser/vue-flow/src/assets/dark-theme.css

@@ -44,6 +44,7 @@
   stroke: var(--primary);
 }
 
+.dark .content-input,
 .dark input {
   outline: none;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);

browser/vue-flow/src/assets/default-theme.css

@@ -119,6 +119,8 @@ input {
   outline: none;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
   transition: all var(--transition-speed);
+  background: var(--background);
+  color: var(--normal);
 }
 
 /* only resize textarea vertical */

browser/vue-flow/src/assets/style.css

@@ -91,7 +91,6 @@ em {
 input {
   font-size: 12px;
   outline: none;
-  background: #fff;
   width: 100%;
   border: none;
   padding: 10px;

browser/vue-flow/src/components/flow/modal-data.vue

@@ -6,8 +6,8 @@
     <div class="flow-modal-data__container">
       <div
         class="flow-modal-data__item"
-        v-for="(n,k) of nodeSelection"
-        :key="'data'+k"
+        v-for="n of nodes"
+        :key="'data'+n.id"
       >
         Node: [{{ n.id }}] - {{ n.label }}
         <img
@@ -26,6 +26,16 @@ export default {
     nodeActivity () {
       return this.activity && this.activity.nodes && this.activity.nodes[this.nodeInspect.id]
     },
+    nodes () {
+      const nodes = []
+
+      // Extract to array
+      for (let k in this.nodeSelection) {
+        nodes.push(this.nodeSelection[k])
+      }
+
+      return nodes.sort((a, b) => a.y - b.y)
+    },
     nodeInspect () {
       return this.$store.state.flow.nodeInspect
     },
@@ -55,6 +65,12 @@ export default {
 .flow-modal-data__item {
   display:flex;
   flex-flow:column;
+  flex-basis:25%;
   padding:10px;
 }
+
+.flow-modal-data__item img {
+  width:100%;
+  height:auto;
+}
 </style>