From 1085c6fd6b1c8e2c09565cb4a117dcc9ece7d301 Mon Sep 17 00:00:00 2001
From: Shrief Gabr <shrief.gabr@qt.io>
Date: Mon, 15 Jan 2024 09:24:47 +0200
Subject: [PATCH] QmlDesigner: Fix edit property dialog clipping issue

Task-number: QDS-11539
Change-Id: I32079b3778dc16bace63eeb29770e93f5def79e8
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>
---
 .../CollectionDetailsView.qml                      | 14 +++++++++-----
 .../EditPropertyDialog.qml                         | 12 +++++++-----
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml
index 4fef5f036b6..598ed562295 100644
--- a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml
+++ b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml
@@ -18,7 +18,6 @@ Rectangle {
 
     implicitWidth: 300
     implicitHeight: 400
-
     color: StudioTheme.Values.themeControlBackground
 
     ColumnLayout {
@@ -124,7 +123,7 @@ Rectangle {
                             tableView.model.selectColumn(index)
 
                             if (mouse.button === Qt.RightButton) {
-                                let posX = index === root.model.columnCount() - 1 ? parent.width - editProperyDialog.width : 0
+                                let posX = index === root.model.columnCount() - 1 ? parent.width - editPropertyDialog.width : 0
 
                                 headerMenu.clickedHeaderIndex = index
                                 headerMenu.dialogPos = parent.mapToGlobal(posX, parent.height)
@@ -159,8 +158,8 @@ Rectangle {
 
                     StudioControls.MenuItem {
                         text: qsTr("Edit")
-                        onTriggered: editProperyDialog.openDialog(headerMenu.clickedHeaderIndex,
-                                                                  headerMenu.dialogPos)
+                        onTriggered: editPropertyDialog.openDialog(headerMenu.clickedHeaderIndex,
+                                                                   headerMenu.dialogPos)
                     }
 
                     StudioControls.MenuItem {
@@ -476,10 +475,15 @@ Rectangle {
     }
 
     EditPropertyDialog {
-        id: editProperyDialog
+        id: editPropertyDialog
         model: root.model
     }
 
+    Connections {
+        target: root.parent
+        onIsHorizontalChanged: editPropertyDialog.close()
+    }
+
     StudioControls.Dialog {
         id: deleteColumnDialog
 
diff --git a/share/qtcreator/qmldesigner/collectionEditorQmlSource/EditPropertyDialog.qml b/share/qtcreator/qmldesigner/collectionEditorQmlSource/EditPropertyDialog.qml
index 37fd92cdd61..27e3527e017 100644
--- a/share/qtcreator/qmldesigner/collectionEditorQmlSource/EditPropertyDialog.qml
+++ b/share/qtcreator/qmldesigner/collectionEditorQmlSource/EditPropertyDialog.qml
@@ -36,6 +36,11 @@ StudioControls.Dialog {
         root.open()
     }
 
+    onWidthChanged: {
+        if (visible && x > parent.width)
+            root.close()
+    }
+
     onAccepted: {
         if (nameTextField.text !== "" && nameTextField.text !== root.__currentName)
             root.model.renameColumn(root.__propertyIndex, nameTextField.text)
@@ -50,13 +55,13 @@ StudioControls.Dialog {
         Grid {
             columns: 2
             rows: 2
-            spacing: 2
+            rowSpacing: 2
+            columnSpacing: 25
             verticalItemAlignment: Grid.AlignVCenter
 
             Text {
                 text: qsTr("Name")
                 color: StudioTheme.Values.themeTextColor
-                width: 50
                 verticalAlignment: Text.AlignVCenter
             }
 
@@ -129,14 +134,12 @@ StudioControls.Dialog {
         Row {
             height: 40
             spacing: 5
-            anchors.right: parent.right
 
             HelperWidgets.Button {
                 id: editButton
 
                 text: qsTr("Apply")
                 enabled: nameTextField.text !== ""
-                width: 70
                 anchors.bottom: parent.bottom
 
                 onClicked: root.accept()
@@ -145,7 +148,6 @@ StudioControls.Dialog {
             HelperWidgets.Button {
                 text: qsTr("Cancel")
                 anchors.bottom: parent.bottom
-                width: 70
 
                 onClicked: root.reject()
             }