no magic numbers

Author: odeimaiz

services/static-webserver/client/source/class/osparc/dashboard/GridButtonBase.js

@@ -43,22 +43,19 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
   statics: {
     ITEM_WIDTH: 190,
     ITEM_HEIGHT: 220,
-    PADDING: 10,
-    TITLE_PADDING: 6,
+    PADDING: 8,
     SPACING_IN: 5,
     SPACING: 15,
     THUMBNAIL_SIZE: 50,
     POS: {
       TITLE: {
         row: 0,
         column: 0,
-        rowSpan: 1,
         colSpan: 4
       },
       THUMBNAIL: {
         row: 2,
         column: 0,
-        rowSpan: 1,
         colSpan: 4
       },
       AVATAR_GROUP: {
@@ -72,7 +69,6 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
       FOOTER: {
         row: 5,
         column: 0,
-        rowSpan: 1,
         colSpan: 4
       }
     },

services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js

@@ -81,20 +81,22 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
           layout = this.getChildControl("footer");
           layout.add(control, osparc.dashboard.GridButtonBase.FPOS.HITS);
           break;
-        case "avatar-group":
-          control = new osparc.ui.basic.AvatarGroup(24, "left", 150);
-          layout = this.getChildControl("main-layout");
-          layout.add(control, osparc.dashboard.GridButtonBase.POS.AVATAR_GROUP);
+        case "avatar-group": {
+          const maxWidth = osparc.dashboard.GridButtonBase.ITEM_WIDTH - osparc.dashboard.GridButtonBase.PADDING * 2;
+          control = new osparc.ui.basic.AvatarGroup(24, "left", maxWidth).set({
+            paddingLeft: osparc.dashboard.GridButtonBase.PADDING,
+          });
+          this.getChildControl("main-layout").add(control, osparc.dashboard.GridButtonBase.POS.AVATAR_GROUP);
           break;
+        }
         case "tags":
           control = new qx.ui.container.Composite(new qx.ui.layout.Flow(5, 3)).set({
             anonymous: true,
             paddingLeft: osparc.dashboard.GridButtonBase.PADDING,
             paddingRight: osparc.dashboard.GridButtonBase.PADDING,
             paddingBottom: osparc.dashboard.GridButtonBase.PADDING / 2
           });
-          layout = this.getChildControl("main-layout");
-          layout.add(control, osparc.dashboard.GridButtonBase.POS.TAGS);
+          this.getChildControl("main-layout").add(control, osparc.dashboard.GridButtonBase.POS.TAGS);
           break;
         case "menu-selection-stack":
           control = new qx.ui.container.Stack();