Simplify box, tabs and popups size handling

src/qml/Base/HBox.qml

@@ -5,18 +5,13 @@ import "../utils.js" as Utils
 Rectangle {
     id: interfaceBox
     color: theme.controls.box.background
-    implicitWidth: Math.min(
-        window.width, theme.minimumSupportedWidthPlusSpacing * multiplyWidth
-    )
+    implicitWidth: theme.controls.box.defaultWidth
     implicitHeight: childrenRect.height
 
     Keys.onReturnPressed: if (clickButtonOnEnter) enterClickButton()
     Keys.onEnterPressed: Keys.onReturnPressed(event)
 
 
-    property real multiplyWidth: 1.0
-
-    property alias title: interfaceTitle.text
     property alias buttonModel: buttonRepeater.model
     property var buttonCallbacks: []
     property string focusButton: ""
@@ -45,30 +40,11 @@ Rectangle {
         width: parent.width
         spacing: theme.spacing
 
-        HLabel {
-            id: interfaceTitle
-            visible: Boolean(text)
-            font.pixelSize: theme.fontSize.bigger
-            horizontalAlignment: Text.AlignHCenter
-            wrapMode: Text.Wrap
-
-            Layout.preferredWidth: parent.width
-            Layout.fillWidth: true
-            Layout.topMargin: theme.spacing
-            Layout.leftMargin: theme.spacing
-            Layout.rightMargin: theme.spacing
-        }
-
         HColumnLayout {
             id: interfaceBody
-            spacing: theme.spacing
+            spacing: parent.spacing
 
-            Layout.preferredWidth: parent.width
-            Layout.fillWidth: true
-            Layout.topMargin:
-                interfaceTitle.visible ? 0 : theme.spacing
-            Layout.leftMargin: theme.spacing
-            Layout.rightMargin: theme.spacing
+            Layout.margins: spacing
         }
 
         HGridLayout {
@@ -77,8 +53,6 @@ Rectangle {
             flow: width >= buttonRepeater.childrenImplicitWidth ?
                   GridLayout.LeftToRight : GridLayout.TopToBottom
 
-            Layout.preferredWidth: parent.width
-
             HRepeater {
                 id: buttonRepeater
                 model: []

src/qml/Base/HPopup.qml

@@ -7,6 +7,7 @@ Popup {
     modal: true
     focus: true
     padding: 0
+    margins: theme.spacing
 
 
     enter: Transition {

src/qml/Base/HTabButton.qml

@@ -13,7 +13,6 @@ TabButton {
     iconItem.svgName: loading ? "hourglass" : icon.name
     icon.color: theme.icons.colorize
 
-    // Must be explicitely set to display correctly on KDE
     implicitWidth: Math.max(
         implicitBackgroundWidth + leftInset + rightInset,
         // FIXME: why is *2 needed to not get ellided text in AddAccount page?

src/qml/Base/HTabbedBoxes.qml

@@ -3,14 +3,10 @@ import QtQuick.Controls 2.12
 import QtQuick.Layouts 1.12
 
 HColumnLayout {
-    implicitWidth: Math.min(
-        parent.width,
-        Math.max(tabBar.contentWidth, swipeView.contentWidth),
-    )
-
     Layout.alignment: Qt.AlignCenter
     Layout.fillWidth: false
     Layout.fillHeight: false
+    Layout.maximumWidth: parent.width
 
     property alias tabIndex: tabBar.currentIndex
     property alias tabModel: tabRepeater.model

src/qml/Popups/BoxPopup.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.12
 import QtQuick.Layouts 1.12
 import "../Base"
+import "../utils.js" as Utils
 
 HPopup {
     id: popup
@@ -22,9 +23,12 @@ HPopup {
     property bool okEnabled: true
 
 
-    contentItem: HBox {
+    HBox {
         id: box
         clickButtonOnEnter: "ok"
+        implicitWidth: Math.min(
+            window.width - popup.margins, theme.controls.popup.defaultWidth,
+        )
 
         buttonModel: [
             { name: "ok", text: okText, iconName: "ok", enabled: okEnabled},

src/qml/Popups/LogoutPopup.qml

@@ -15,7 +15,6 @@ BoxPopup {
         "you sign in again, by importing this file in your account settings."
     )
 
-    box.multiplyWidth: 1.5
     box.focusButton: "ok"
     box.buttonModel: [
         { name: "ok", text: qsTr("Export keys"), iconName: "export-keys" },
@@ -23,6 +22,7 @@ BoxPopup {
           iconColor: theme.colors.middleBackground },
         { name: "cancel", text: qsTr("Cancel"), iconName: "cancel" },
     ]
+
     box.buttonCallbacks: ({
         ok: button => {
             Utils.makeObject(

src/qml/Popups/PasswordPopup.qml

@@ -57,7 +57,9 @@ BoxPopup {
 
 
     HRowLayout {
-        spacing: box.horizontalSpacing
+        spacing: theme.spacing
+
+        Layout.fillWidth: true
 
         HTextField {
             id: passwordField

src/themes/Default.qpl

@@ -98,10 +98,12 @@ icons:
 
 controls:
     box:
-        color background: colors.strongBackground
+        int defaultWidth: minimumSupportedWidthPlusSpacing
         int radius:       theme.radius
+        color background: colors.strongBackground
 
     popup:
+        int defaultWidth: minimumSupportedWidthPlusSpacing * 2
         color background: colors.strongBackground
 
     header: