messageOut size follow messageOutText height & width

1 files changed, 53 insertions, 40 deletions

diff --git a/MessageOut.ui.qml b/MessageOut.ui.qml
index 671d4d5..d4d3747 100644
--- a/MessageOut.ui.qml
+++ b/MessageOut.ui.qml
@@ -5,49 +5,62 @@ import QtGraphicalEffects 1.15
 import Bootstrap 5.3
 
 Item {
-    width: 360
+	width: 360
 
-    RowLayout {
-        id: rowLayout
-        anchors.fill: parent
+	RowLayout {
+		id: rowLayout
+		anchors.fill: parent
 
-        ColumnLayout {
-            Rectangle {
-                id: rectangle
-                width: 200
-                height: 200
-                color: "#2787f5"
-                radius: 16
-                Layout.fillWidth: true
+		ColumnLayout {
+			id: messageOut
+			Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
+			Layout.fillWidth: true
+			Layout.fillHeight: true
+			Rectangle {
+				id: rectangle
+				width: messageOutText.width
+				height: messageOutText.height
+				color: "#2787f5"
+				radius: 16
+				Layout.maximumHeight: messageOutText.height
+				Layout.maximumWidth: memessageOutText.width
+				Layout.minimumHeight: messageOutText.height
+				Layout.minimumWidth: memessageOutText.width
+				Layout.fillWidth: true
 
-                Label {
-                    id: messageOut
-                    text: qsTr("Hey, Marshall! How are you? Can you please change the color theme of the website to pink and purple? 😂")
-                    anchors.fill: parent
-                    wrapMode: Text.Wrap
-                }
-            }
+				Label {
+					id: messageOutText
+					text: qsTr("Hey, Marshall! How are you? Can you please change the color theme of the website to pink and purple? 😂")
+					wrapMode: Text.Wrap
+					rightPadding: 20
+					leftPadding: 20
+					bottomPadding: 16
+					topPadding: 16
+					Layout.fillWidth: true
+					width: messageOut.width
+				}
+			}
 
-            Label {
-                id: messageText
-                text: qsTr("08:45 PM")
-                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-            }
-        }
+			Label {
+				id: messageTimestamp
+				text: qsTr("08:45 PM")
+				Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+			}
+		}
 
-        Rectangle {
-            id: messageOutAvatar
-            width: 64
-            height: 64
-            color: "#ffffff"
-            radius: 100
-            Layout.maximumHeight: 64
-            Layout.maximumWidth: 64
-            Layout.minimumHeight: 24
-            Layout.minimumWidth: 24
-            Layout.preferredHeight: 64
-            Layout.preferredWidth: 64
-            Layout.alignment: Qt.AlignRight | Qt.AlignBottom
-        }
-    }
+		Rectangle {
+			id: messageOutAvatar
+			width: 64
+			height: 64
+			color: "#ffffff"
+			radius: 100
+			Layout.maximumHeight: 64
+			Layout.maximumWidth: 64
+			Layout.minimumHeight: 24
+			Layout.minimumWidth: 24
+			Layout.preferredHeight: 64
+			Layout.preferredWidth: 64
+			Layout.alignment: Qt.AlignRight | Qt.AlignBottom
+		}
+	}
 }