Add a new property to the ActionButton to indicate whether the button

has a fixed width or the width will be dependant on the content.

Contributes to CURA-5786.

resources/qml/Account/GeneralOperations.qml

@@ -21,6 +21,7 @@ Row
         textColor: UM.Theme.getColor("main_window_header_button_text_active")
         textHoverColor: UM.Theme.getColor("main_window_header_button_text_active")
         onClicked: Qt.openUrlExternally("https://account.ultimaker.com")
+        fixedWidthMode: true
     }
 
     Cura.ActionButton
@@ -29,5 +30,6 @@ Row
         height: UM.Theme.getSize("account_button").height
         text: catalog.i18nc("@button", "Login")
         onClicked: Cura.API.account.login()
+        fixedWidthMode: true
     }
 }

resources/qml/Account/UserOperations.qml

@@ -21,6 +21,7 @@ Row
         textColor: UM.Theme.getColor("main_window_header_button_text_active")
         textHoverColor: UM.Theme.getColor("main_window_header_button_text_active")
         onClicked: Qt.openUrlExternally("https://account.ultimaker.com")
+        fixedWidthMode: true
     }
 
     Cura.ActionButton
@@ -29,5 +30,6 @@ Row
         height: UM.Theme.getSize("account_button").height
         text: catalog.i18nc("@button", "Logout")
         onClicked: Cura.API.account.logout()
+        fixedWidthMode: true
     }
 }

resources/qml/ActionButton.qml

@@ -24,6 +24,10 @@ Button
     property var outlineColor: color
     property var outlineHoverColor: hoverColor
     property var outlineDisabledColor: outlineColor
+    // This property is used to indicate whether the button has a fixed width or the width would depend on the contents
+    // Be careful when using fixedWidthMode, the translated texts can be too long that they won't fit. In any case,
+    // we elide the text to the right so the text will be cut off with the three dots at the end.
+    property var fixedWidthMode: false
 
     contentItem: Row
     {
@@ -50,6 +54,9 @@ Button
             visible: text != ""
             renderType: Text.NativeRendering
             anchors.verticalCenter: parent.verticalCenter
+            width: fixedWidthMode ? button.width - button.leftPadding - button.rightPadding : undefined
+            horizontalAlignment: Text.AlignHCenter
+            elide: Text.ElideRight
         }
     }
 

resources/qml/ActionPanel/OutputDevicesActionButton.qml

@@ -16,6 +16,7 @@ Item
     {
         id: saveToButton
         height: parent.height
+        fixedWidthMode: true
 
         anchors
         {

resources/qml/ActionPanel/SliceProcessWidget.qml

@@ -86,6 +86,7 @@ Column
         id: prepareButton
         width: parent.width
         height: UM.Theme.getSize("action_panel_button").height
+        fixedWidthMode: true
         text:
         {
             if ([UM.Backend.NotStarted, UM.Backend.Error].indexOf(widget.backendState) != -1)