makeItemResponsive

Author: odeimaiz

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

@@ -94,6 +94,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
           break;
         case "tsr-rating":
           control = osparc.dashboard.CardBase.createTSRLayout();
+          this.__makeItemResponsive(control);
           this._add(control, {
             row: 0,
             column: osparc.dashboard.ListButtonBase.POS.TSR
@@ -223,7 +224,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
       const label = this.getChildControl("owner");
       const user = this.createOwner(value);
       label.setValue(user);
-      label.setVisibility(value ? "visible" : "excluded");
+      this.__makeItemResponsive(label);
       return;
     },
 
@@ -260,6 +261,18 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
       }
     },
 
+    __makeItemResponsive: function(item) {
+      [
+        "appear",
+        "resize",
+      ].forEach(ev => {
+        this.addListener(ev, () => {
+          const bounds = this.getBounds() || this.getSizeHint();
+          item.setVisibility(bounds.width > 700 ? "visible" : "excluded");
+        });
+      });
+    },
+
     // overridden
     _applyMultiSelectionMode: function(value) {
       if (value) {

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

@@ -255,9 +255,9 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
           "appear",
           "resize",
         ].forEach(ev => {
-          container.addListener(ev, e => {
-            const data = e.getData();
-            card.setWidth(data.width);
+          container.addListener(ev, () => {
+            const bounds = container.getBounds() || container.getSizeHint();
+            card.setWidth(bounds.width);
           });
         });
       }