Styling on the funcs panel

browser/vue-flow/src/components/panel.vue

@@ -33,7 +33,7 @@
             draggable="true"
             v-for="k in funcsGroup(g)"
             @dragstart="fnDrag($event,k)"
-            :style="{'background':registry[k].style && registry[k].style.color}">
+            :style="{ 'background': registry[k].style && registry[k].style.color, }">
             {{ k }}
           </div>
         </div>
@@ -133,8 +133,9 @@ export default {
 
 .flow-funcs__src {
   font-size:12px;
-  padding:11px 5px;
+  padding:4px;
   margin-top:1px;
+  height:35px;
   text-align:center;
   transition: all 0.3s;
   position:relative;
@@ -151,15 +152,17 @@ export default {
 .flow-funcs__group.blocks {
   flex-flow: row;
   flex-wrap: wrap;
-  justify-content: flex-start;
   align-content: center;
 }
 
 .flow-funcs__group.blocks .flow-funcs__src {
+  width: calc(50% - 2px);
+  display:block;
+  padding:15px 4px;
   text-overflow: ellipsis;
+  height:40px;
   margin:1px;
-  width: 60px;
-  height:60px;
+  word-wrap: break-all;
   overflow:hidden;
 }
 

go/src/flowserver/cmd/flowserver/main.go

@@ -17,6 +17,7 @@ func main() {
 
 	log.Println("Running version:", flowserver.Version)
 
+	flow.Register("somebigfunctionthatoverflows", strCat)
 	flow.Register("str.cat", strCat)
 	flow.Register("str.reverse", strReverse)
 	flow.Register("str.split", strings.Split)