tips: title should not go outside the box

Change-Id: I28ed5573adb50b4372f4b763d3565eefeb00ae35
GitLab: #1018

src/app/mainview/components/BackupTipBox.qml

@@ -31,6 +31,10 @@ Item {
     width: parent.width
     height: backupLayout.height
 
+    property var iconSize: 26
+    property var margin: 5
+    property var prefWidth: 170
+
     signal ignore
 
     ColumnLayout {
@@ -50,9 +54,9 @@ Item {
                 visible: !opened
 
                 Layout.alignment: Qt.AlignLeft
-                Layout.topMargin: 5
-                Layout.preferredWidth: 26
-                Layout.preferredHeight: 26
+                Layout.topMargin: root.margin
+                Layout.preferredWidth: root.iconSize
+                Layout.preferredHeight: root.iconSize
 
                 containerHeight: Layout.preferredHeight
                 containerWidth: Layout.preferredWidth
@@ -61,21 +65,22 @@ Item {
                 color: JamiTheme.buttonTintedBlue
             }
 
-            Label {
+            Text {
                 text: JamiStrings.backupAccountBtn
                 color: JamiTheme.textColor
                 font.weight: Font.Medium
-                Layout.topMargin: 5
+                Layout.topMargin: root.margin
                 visible: !opened
                 Layout.alignment: Qt.AlignLeft
-                Layout.leftMargin: 5
+                Layout.leftMargin: root.margin
+                Layout.preferredWidth: root.prefWidth - 2 * root.margin - root.iconSize
                 font.pixelSize: JamiTheme.tipBoxTitleFontSize
+                elide: Qt.ElideRight
             }
         }
 
         Text {
-
-            Layout.preferredWidth: 170
+            Layout.preferredWidth: root.prefWidth
             Layout.leftMargin: 20
             Layout.topMargin: 8
             Layout.bottomMargin: 15

src/app/mainview/components/CustomizeTipBox.qml

@@ -26,9 +26,12 @@ import net.jami.Constants 1.1
 import "../../commoncomponents"
 
 ColumnLayout {
-
+    id: column
     width: parent.width
 
+    property var iconSize: 26
+    property var margin: 5
+    property var prefWidth: 170
 
     RowLayout {
 
@@ -41,9 +44,9 @@ ColumnLayout {
             visible: !opened
 
             Layout.alignment: Qt.AlignLeft
-            Layout.topMargin: 5
-            Layout.preferredWidth: 26
-            Layout.preferredHeight: 26
+            Layout.topMargin: column.margin
+            Layout.preferredWidth: column.iconSize
+            Layout.preferredHeight: column.iconSize
 
             containerHeight: Layout.preferredHeight
             containerWidth: Layout.preferredWidth
@@ -56,16 +59,17 @@ ColumnLayout {
             text: JamiStrings.customize
             color: JamiTheme.textColor
             font.weight: Font.Medium
-            Layout.topMargin: 5
+            Layout.topMargin: column.margin
+            Layout.preferredWidth: column.prefWidth - 2 * column.margin - column.iconSize
             visible: !opened
             Layout.alignment: Qt.AlignLeft
-            Layout.leftMargin: 5
+            Layout.leftMargin: column.margin
             font.pixelSize: JamiTheme.tipBoxTitleFontSize
+            elide: Qt.ElideRight
         }
     }
 
     Text {
-
         Layout.preferredWidth: 170
         Layout.leftMargin: 20
         Layout.topMargin: 8

src/app/mainview/components/InformativeTipBox.qml

@@ -27,9 +27,12 @@ import "../../commoncomponents"
 
 
 ColumnLayout {
-
+    id: column
     width: parent.width
 
+    property var iconSize: 26
+    property var margin: 5
+    property var prefWidth: 170
 
     RowLayout {
 
@@ -42,9 +45,9 @@ ColumnLayout {
             visible: !opened
 
             Layout.alignment: Qt.AlignLeft
-            Layout.topMargin: 5
-            Layout.preferredWidth: 26
-            Layout.preferredHeight: 26
+            Layout.topMargin: column.margin
+            Layout.preferredWidth: column.iconSize
+            Layout.preferredHeight: column.iconSize
 
             containerHeight: Layout.preferredHeight
             containerWidth: Layout.preferredWidth
@@ -57,16 +60,17 @@ ColumnLayout {
             text: JamiStrings.tip
             color: JamiTheme.textColor
             font.weight: Font.Medium
-            Layout.topMargin: 5
+            Layout.topMargin: column.margin
             visible: !opened
             Layout.alignment: Qt.AlignLeft
             Layout.leftMargin: 8
+            Layout.preferredWidth: column.prefWidth - 2 * column.margin - column.iconSize
             font.pixelSize: JamiTheme.tipBoxTitleFontSize
+            elide: Qt.ElideRight
         }
     }
 
     Text {
-
         Layout.preferredWidth: opened ? 140 : 150
         Layout.leftMargin: 20
         Layout.topMargin: opened ? 0 : 8