fix(HoldingsDropdown): Implement dynamic height

ui/app/AppLayouts/Chat/controls/community/ExtendedDropdownContent.qml

@@ -28,6 +28,10 @@ Item {
 
     signal itemClicked(string key, string name, url iconSource)
     signal navigateDeep(string key, var subItems)
+    signal layoutChanged()
+
+    implicitHeight: content.implicitHeight
+    implicitWidth: content.implicitWidth
 
     enum Type{
         Assets,
@@ -317,6 +321,7 @@ Item {
     // List elements content
 
     ColumnLayout {
+        id: content
         anchors.fill: parent
 
         SearchBox {
@@ -360,6 +365,7 @@ Item {
 
             Layout.fillWidth: true
             Layout.fillHeight: true
+            onItemChanged: root.layoutChanged()
         }
     }
 
@@ -380,6 +386,12 @@ Item {
                 else if(key === "IMPORT") console.log("TODO: Import existing asset")
             }
             onItemClicked: root.itemClicked(key, shortName, iconSource)
+            onImplicitHeightChanged: root.layoutChanged()
+            Binding on implicitHeight {
+                value: contentHeight
+                //avoid too many changes of the implicit height
+                delayed: true
+            }
         }
     }
 
@@ -414,6 +426,12 @@ Item {
                     root.itemClicked(key, name, iconSource)
                 }
             }
+            onImplicitHeightChanged: root.layoutChanged()
+            Binding on implicitHeight {
+                value: contentHeight
+                //avoid too many changes of the implicit height
+                delayed: true
+            }
         }
     }
 
@@ -431,6 +449,12 @@ Item {
                 d.reset()
                 root.itemClicked(key, name, iconSource)
             }
+            onImplicitHeightChanged: root.layoutChanged()
+            Binding on implicitHeight {
+                value: contentHeight
+                //avoid too many changes of the implicit height
+                delayed: true
+            }
         }
     }
 }

ui/app/AppLayouts/Chat/controls/community/HoldingsDropdown.qml

@@ -1,5 +1,6 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQml 2.15
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -108,6 +109,7 @@ StatusDropdown {
         readonly property int backButtonWidth: 56
         readonly property int backButtonHeight: 24
         readonly property int backButtonToContentSpace: 8
+        readonly property int bottomInset: 20
 
         function setInitialFlow() {
             statesStack.clear()
@@ -123,6 +125,11 @@ StatusDropdown {
             root.assetAmount = 0
             root.collectibleAmount = 1
         }
+
+        function forceLayout() {
+            root.height = 0         //setting height to 0 before because Popup cannot properly resize if the current contentHeight exceeds the available height
+            root.height = undefined //use implicit height
+        }
     }
 
     StatesStack {
@@ -131,7 +138,9 @@ StatusDropdown {
 
     width: d.defaultWidth
     padding: d.padding
-    margins: 0  // force keeping within the bounds of the enclosing window
+    bottomInset: d.bottomInset
+    bottomPadding: d.padding + d.bottomInset
+
     contentItem: ColumnLayout {
         id: content
 
@@ -165,19 +174,16 @@ StatusDropdown {
                 State {
                     name: HoldingTypes.Type.Asset
                     PropertyChanges {target: loader; sourceComponent: listLayout}
-                    PropertyChanges {target: root; height: d.extendedContentHeight}
                     PropertyChanges {target: d; extendedDropdownType: ExtendedDropdownContent.Type.Assets}
                 },
                 State {
                     name: HoldingTypes.Type.Collectible
                     PropertyChanges {target: loader; sourceComponent: listLayout}
-                    PropertyChanges {target: root; height: d.extendedContentHeight}
                     PropertyChanges {target: d; extendedDropdownType: ExtendedDropdownContent.Type.Collectibles}
                 },
                 State {
                     name: HoldingTypes.Type.Ens
                     PropertyChanges {target: loader; sourceComponent: ensLayout}
-                    PropertyChanges {target: root; height: undefined} // use implicit height
                 }
             ]
 
@@ -203,6 +209,7 @@ StatusDropdown {
             id: loader
             Layout.fillWidth: true
             Layout.fillHeight: true
+            onItemChanged: d.forceLayout()
         }
 
         states: [
@@ -210,12 +217,10 @@ StatusDropdown {
                 name: HoldingsDropdown.FlowType.Selected
                 PropertyChanges {target: loader; sourceComponent: (d.currentHoldingType === HoldingTypes.Type.Asset) ? assetLayout :
                                                                                                                        ((d.currentHoldingType === HoldingTypes.Type.Collectible) ? collectibleLayout : ensLayout) }
-                PropertyChanges {target: root; height: undefined} // use implicit height
             },
             State {
                 name: HoldingsDropdown.FlowType.List_Deep1
                 PropertyChanges {target: loader; sourceComponent: listLayout}
-                PropertyChanges {target: root; height: d.extendedContentHeight}
                 PropertyChanges {target: d; extendedDeepNavigation: false}
             },
             State {
@@ -272,6 +277,8 @@ StatusDropdown {
                 statesStack.push(HoldingsDropdown.FlowType.List_Deep2)
             }
 
+            onLayoutChanged: d.forceLayout()
+
             Component.onCompleted: {
                 if(d.extendedDeepNavigation)
                     listPanel.goForward(d.currentItemKey,