Fix some alignments

Also modify a bit the code in the ConfigurationItem, trying to get rid of a binding loop, but I couldn't (so weird)

Contributes to CURA-5876.

resources/qml/Menus/ConfigurationMenu/AutoConfiguration.qml

@@ -31,6 +31,7 @@ Item
     ConfigurationListView
     {
         anchors.top: header.bottom
+        anchors.topMargin: UM.Theme.getSize("default_margin").width
         width: parent.width
 
         outputDevice: Cura.MachineManager.printerOutputDevices.length >= 1 ? Cura.MachineManager.printerOutputDevices[0] : null

resources/qml/Menus/ConfigurationMenu/ConfigurationItem.qml

@@ -14,120 +14,115 @@ Button
     property var configuration: null
     hoverEnabled: true
 
-    height: background.height
-
     background: Rectangle
     {
-        height: childrenRect.height
         color: parent.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button")
         border.color: parent.checked ? UM.Theme.getColor("primary") : UM.Theme.getColor("lining")
         border.width: UM.Theme.getSize("default_lining").width
         radius: UM.Theme.getSize("default_radius").width
+    }
 
-        Column
+    contentItem: Column
+    {
+        id: contentColumn
+        width: parent.width
+        padding: UM.Theme.getSize("default_margin").width
+        spacing: UM.Theme.getSize("narrow_margin").height
+
+        Row
         {
-            id: contentColumn
+            id: extruderRow
-            width: parent.width
-            padding: UM.Theme.getSize("wide_margin").width
-            spacing: UM.Theme.getSize("narrow_margin").height
 
-            Row
+            anchors
             {
-                id: extruderRow
+                left: parent.left
-
+                leftMargin: 2 * parent.padding
-                anchors
+                right: parent.right
-                {
+                rightMargin: 2 * parent.padding
-                    left: parent.left
-                    leftMargin: parent.padding
-                    right: parent.right
-                    rightMargin: parent.padding
-                }
-                height: childrenRect.height
-
-                spacing: UM.Theme.getSize("default_margin").width
-
-                Repeater
-                {
-                    id: repeater
-                    height: childrenRect.height
-                    model: configuration.extruderConfigurations
-                    delegate: PrintCoreConfiguration
-                    {
-                        width: Math.round(parent.width / 2)
-                        printCoreConfiguration: modelData
-                    }
-                }
             }
 
-            //Buildplate row separator
+            spacing: UM.Theme.getSize("default_margin").width
-            Rectangle
+
+            Repeater
             {
-                id: separator
+                id: repeater
-
+                model: configuration.extruderConfigurations
-                visible: buildplateInformation.visible
+                delegate: PrintCoreConfiguration
-                anchors
                 {
-                    left: parent.left
+                    width: Math.round(parent.width / 2)
-                    leftMargin: parent.padding
+                    printCoreConfiguration: modelData
-                    right: parent.right
-                    rightMargin: parent.padding
-                }
-                height: visible ? Math.round(UM.Theme.getSize("default_lining").height / 2) : 0
-                color: UM.Theme.getColor("lining")
-            }
-
-            Item
-            {
-                id: buildplateInformation
-
-                anchors
-                {
-                    left: parent.left
-                    leftMargin: parent.padding
-                    right: parent.right
-                    rightMargin: parent.padding
-                }
-                height: childrenRect.height
-                visible: configuration.buildplateConfiguration != ""
-
-                UM.RecolorImage
-                {
-                    id: buildplateIcon
-                    anchors.left: parent.left
-                    width: UM.Theme.getSize("main_window_header_button_icon").width
-                    height: UM.Theme.getSize("main_window_header_button_icon").height
-                    source: UM.Theme.getIcon("buildplate")
-                    color: UM.Theme.getColor("text")
-                }
-
-                Label
-                {
-                    id: buildplateLabel
-                    anchors.left: buildplateIcon.right
-                    anchors.verticalCenter: buildplateIcon.verticalCenter
-                    anchors.leftMargin: Math.round(UM.Theme.getSize("default_margin").height / 2)
-                    text: configuration.buildplateConfiguration
-                    renderType: Text.NativeRendering
-                    color: UM.Theme.getColor("text")
                 }
             }
         }
 
-        Connections
+        //Buildplate row separator
+        Rectangle
         {
-            target: Cura.MachineManager
+            id: separator
-            onCurrentConfigurationChanged:
+
+            visible: buildplateInformation.visible
+            anchors
             {
-                configurationItem.checked = Cura.MachineManager.matchesConfiguration(configuration)
+                left: parent.left
+                leftMargin: 2 * parent.padding
+                right: parent.right
+                rightMargin: 2 * parent.padding
             }
+            height: visible ? Math.round(UM.Theme.getSize("default_lining").height / 2) : 0
+            color: UM.Theme.getColor("lining")
         }
 
-        Component.onCompleted:
+        Item
+        {
+            id: buildplateInformation
+
+            anchors
+            {
+                left: parent.left
+                leftMargin: 2 * parent.padding
+                right: parent.right
+                rightMargin: 2 * parent.padding
+            }
+            height: childrenRect.height
+            visible: configuration.buildplateConfiguration != ""
+
+            UM.RecolorImage
+            {
+                id: buildplateIcon
+                anchors.left: parent.left
+                width: UM.Theme.getSize("main_window_header_button_icon").width
+                height: UM.Theme.getSize("main_window_header_button_icon").height
+                source: UM.Theme.getIcon("buildplate")
+                color: UM.Theme.getColor("text")
+            }
+
+            Label
+            {
+                id: buildplateLabel
+                anchors.left: buildplateIcon.right
+                anchors.verticalCenter: buildplateIcon.verticalCenter
+                anchors.leftMargin: Math.round(UM.Theme.getSize("default_margin").height / 2)
+                text: configuration.buildplateConfiguration
+                renderType: Text.NativeRendering
+                color: UM.Theme.getColor("text")
+            }
+        }
+    }
+
+    Connections
+    {
+        target: Cura.MachineManager
+        onCurrentConfigurationChanged:
         {
             configurationItem.checked = Cura.MachineManager.matchesConfiguration(configuration)
         }
     }
 
+    Component.onCompleted:
+    {
+        configurationItem.checked = Cura.MachineManager.matchesConfiguration(configuration)
+    }
+
     onClicked:
     {
         Cura.MachineManager.applyRemoteConfiguration(configuration)

resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml

@@ -11,7 +11,7 @@ Column
 {
     id: base
     property var outputDevice: null
-    height: childrenRect.height + 2 * padding
+    height: childrenRect.height + padding
     spacing: UM.Theme.getSize("narrow_margin").height
 
     function forceModelUpdate()
@@ -57,7 +57,6 @@ Column
             id: configurationList
             spacing: UM.Theme.getSize("narrow_margin").height
             width: container.width - ((height > container.maximumHeight) ? container.ScrollBar.vertical.background.width : 0) //Make room for scroll bar if there is any.
-            contentHeight: childrenRect.height
             height: childrenRect.height
 
             section.property: "modelData.printerType"

resources/qml/Menus/ConfigurationMenu/ConfigurationMenu.qml

@@ -34,6 +34,8 @@ Cura.ExpandablePopup
         Custom
     }
 
+    contentPadding: UM.Theme.getSize("default_lining").width
+    contentAlignment: Cura.ExpandablePopup.ContentAlignment.AlignLeft
     enabled: Cura.MachineManager.hasMaterials || Cura.MachineManager.hasVariants || Cura.MachineManager.hasVariantBuildplates; //Only let it drop down if there is any configuration that you could change.
 
     headerItem: Item
@@ -127,8 +129,9 @@ Cura.ExpandablePopup
     contentItem: Column
     {
         id: popupItem
-        width: base.width - 2 * UM.Theme.getSize("default_margin").width
+        width: UM.Theme.getSize("configuration_selector").width
         height: implicitHeight //Required because ExpandableComponent will try to use this to determine the size of the background of the pop-up.
+        padding: UM.Theme.getSize("default_margin").height
         spacing: UM.Theme.getSize("default_margin").height
 
         property bool is_connected: false //If current machine is connected to a printer. Only evaluated upon making popup visible.
@@ -141,19 +144,19 @@ Cura.ExpandablePopup
 
         Item
         {
-            width: parent.width
+            width: parent.width - 2 * parent.padding
             height:
             {
-                var height = 0;
+                var height = 0
-                if(autoConfiguration.visible)
+                if (autoConfiguration.visible)
                 {
-                    height += autoConfiguration.height;
+                    height += autoConfiguration.height
                 }
-                if(customConfiguration.visible)
+                if (customConfiguration.visible)
                 {
-                    height += customConfiguration.height;
+                    height += customConfiguration.height
                 }
-                return height;
+                return height
             }
             AutoConfiguration
             {
@@ -172,9 +175,9 @@ Cura.ExpandablePopup
         {
             id: separator
             visible: buttonBar.visible
-            x: -contentPadding
+            x: -parent.padding
 
-            width: base.width
+            width: parent.width
             height: UM.Theme.getSize("default_lining").height
 
             color: UM.Theme.getColor("lining")
@@ -186,7 +189,7 @@ Cura.ExpandablePopup
             id: buttonBar
             visible: popupItem.is_connected //Switching only makes sense if the "auto" part is possible.
 
-            width: parent.width
+            width: parent.width - 2 * parent.padding
             height: childrenRect.height
 
             Cura.SecondaryButton

resources/themes/cura-light/theme.json

@@ -356,6 +356,7 @@
 
         "expandable_component_content_header": [0.0, 3.0],
 
+        "configuration_selector": [38.0, 4.0],
         "configuration_selector_mode_tabs": [0.0, 3.0],
 
         "action_panel_widget": [25.0, 0.0],