Fix height and vertical layout of popup

Many things were made simpler. This took some time to fix...

Contributes to issue CURA-5876.

resources/qml/Menus/ConfigurationMenu/AutoConfiguration.qml

@@ -8,12 +8,16 @@ import UM 1.3 as UM
 
 Item
 {
+    width: parent.width
+    height: visible ? childrenRect.height : 0
+
     Label
     {
         id: header
         text: catalog.i18nc("@header", "Configurations")
         font: UM.Theme.getFont("large")
         color: UM.Theme.getColor("text")
+        height: contentHeight
 
         anchors
         {

resources/qml/Menus/ConfigurationMenu/ConfigurationMenu.qml

@@ -96,32 +96,36 @@ Cura.ExpandableComponent
         }
     }
 
-    popupItem: Item
+    popupItem: Column
     {
         id: popupItem
         width: base.width - 2 * UM.Theme.getSize("default_margin").width
-        height: 200
+        height: implicitHeight //Required because ExpandableComponent will try to use this to determine the size of the background of the pop-up.
+        spacing: UM.Theme.getSize("default_margin").height
 
         property var is_connected: false //If current machine is connected to a printer. Only evaluated upon making popup visible.
         onVisibleChanged:
         {
-            is_connected = Cura.MachineManager.activeMachineNetworkKey != "" && Cura.MachineManager.printerConnected //Re-evaluate.
+            is_connected = Cura.MachineManager.activeMachineNetworkKey !== "" && Cura.MachineManager.printerConnected //Re-evaluate.
         }
 
-        property var configuration_method: buttonBar.visible ? "auto" : "custom" //Auto if connected to a printer at start-up, or Custom if not.
+        property var configuration_method: is_connected ? "auto" : "custom" //Auto if connected to a printer at start-up, or Custom if not.
 
-        AutoConfiguration
+        Item
         {
-            id: autoConfiguration
+            width: parent.width
-            visible: popupItem.configuration_method === "auto"
+            height: childrenRect.height
-            anchors.top: parent.top
+            AutoConfiguration
-        }
+            {
+                id: autoConfiguration
+                visible: popupItem.configuration_method === "auto"
+            }
 
-        CustomConfiguration
+            CustomConfiguration
-        {
+            {
-            id: customConfiguration
+                id: customConfiguration
-            visible: popupItem.configuration_method === "custom"
+                visible: popupItem.configuration_method === "custom"
-            anchors.top: parent.top
+            }
         }
 
         Rectangle
@@ -129,30 +133,19 @@ Cura.ExpandableComponent
             id: separator
             visible: buttonBar.visible
 
-            anchors
+            width: parent.width
-            {
-                left: parent.left
-                right: parent.right
-                bottom: buttonBar.top
-                bottomMargin: UM.Theme.getSize("default_margin").height
-            }
             height: UM.Theme.getSize("default_lining").height
 
             color: UM.Theme.getColor("lining")
         }
 
         //Allow switching between custom and auto.
-        Rectangle
+        Item
         {
             id: buttonBar
             visible: popupItem.is_connected //Switching only makes sense if the "auto" part is possible.
 
-            anchors
+            width: parent.width
-            {
-                left: parent.left
-                right: parent.right
-                bottom: parent.bottom
-            }
             height: childrenRect.height
 
             Cura.ActionButton

resources/qml/Menus/ConfigurationMenu/CustomConfiguration.qml

@@ -11,6 +11,7 @@ import UM 1.3 as UM
 Item
 {
     width: parent.width
+    height: visible ? childrenRect.height : 0
 
     Label
     {
@@ -18,6 +19,7 @@ Item
         text: catalog.i18nc("@header", "Custom")
         font: UM.Theme.getFont("large")
         color: UM.Theme.getColor("text")
+        height: contentHeight
 
         anchors
         {
@@ -62,14 +64,15 @@ Item
     {
         id: tabControl
         width: parent.width
+        height: childrenRect.height
         anchors.top: tabBar.bottom
-        anchors.bottom: parent.bottom
         property var model: extrudersModel.items[tabBar.currentIndex]
         property real textWidth: Math.round(width * 0.3)
         property real controlWidth: width - textWidth
         Column
         {
             spacing: UM.Theme.getSize("default_margin").height
+
             Row
             {
                 height: UM.Theme.getSize("print_setup_item").height
@@ -165,6 +168,5 @@ Item
                 }
             }
         }
-
     }
 }