Update: Refactored how layout positioning works.

Components/Input.qml

@@ -15,8 +15,8 @@ Column {
     property ComboBox exposeSession: sessionSelect.exposeSession
     property bool failed
 
-    // Custom addition: exposes the face icon of the currently typed/selected
+    readonly property real fontUnit: root.font.pointSize
-    // user so it can be shown in ProfilePicture, above the login field
+
     property url currentUserIcon: {
         var typedUser = username.text
         for (var i = 0; i < userRegistry.list.length; i++) {
@@ -56,58 +56,58 @@ Column {
     }
 
     Item {
-        id: errorMessageField
+            id: errorMessageField
 
-        // change also in selectSession
+            height: fontUnit * 1.5
-        height: root.font.pointSize * 2
+            width: parent.width / 2
-        width: parent.width / 2
+            anchors.horizontalCenter: parent.horizontalCenter
-        anchors.horizontalCenter: parent.horizontalCenter
 
-        Label {
+            Label {
-            id: errorMessage
+                id: errorMessage
 
-            width: parent.width
+                width: parent.width
-            horizontalAlignment: Text.AlignHCenter
+                horizontalAlignment: Text.AlignHCenter
 
-            text: failed ? config.TranslateLoginFailedWarning || textConstants.loginFailed + "!" : keyboard.capsLock ? config.TranslateCapslockWarning || textConstants.capslockWarning : null
+                text: failed ? config.TranslateLoginFailedWarning || textConstants.loginFailed + "!" : keyboard.capsLock ? config.TranslateCapslockWarning || textConstants.capslockWarning : ""
-            font.pointSize: root.font.pointSize * 0.8
-            font.italic: true
-            color: config.WarningColor
-            opacity: 0
 
-            states: [
+                font.pointSize: root.font.pointSize * 0.8
-                State {
+                font.italic: true
-                    name: "fail"
+                color: config.WarningColor
-                    when: failed
+                opacity: 0
-                    PropertyChanges {
+
-                        target: errorMessage
+                states: [
-                        opacity: 1
+                    State {
+                        name: "fail"
+                        when: failed
+                        PropertyChanges {
+                            target: errorMessage
+                            opacity: 1
+                        }
+                    },
+                    State {
+                        name: "capslock"
+                        when: keyboard.capsLock
+                        PropertyChanges {
+                            target: errorMessage
+                            opacity: 1
+                        }
                     }
-                },
+                ]
-                State {
+                transitions: [
-                    name: "capslock"
+                    Transition {
-                    when: keyboard.capsLock
+                        PropertyAnimation {
-                    PropertyChanges {
+                            properties: "opacity"
-                        target: errorMessage
+                            duration: 100
-                        opacity: 1
+                        }
                     }
-                }
+                ]
-            ]
+            }
-            transitions: [
-                Transition {
-                    PropertyAnimation {
-                        properties: "opacity"
-                        duration: 100
-                    }
-                }
-            ]
         }
-    }
 
     Item {
         id: usernameField
 
-        height: root.font.pointSize * 4.5
+        height: root.font.pointSize * 4
         width: parent.width / 2
         anchors.horizontalCenter: parent.horizontalCenter
 
@@ -142,7 +142,7 @@ Column {
 
             delegate: ItemDelegate {
                 //  minus padding
-                width: popupHandler.width - 20
+                width: popupHandler.width - (fontUnit * 1.5)
                 anchors.horizontalCenter: popupHandler.horizontalCenter
 
                 contentItem: Text {
@@ -170,8 +170,8 @@ Column {
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.leftMargin: selectUser.height * 0
 
-                icon.height: parent.height * 0.25
+                icon.height: parent.height * 0.3
-                icon.width: parent.height * 0.25
+                icon.width: parent.height * 0.3
                 enabled: false
                 icon.color: config.UserIconColor
                 icon.source: Qt.resolvedUrl("../Assets/User.svg")
@@ -195,10 +195,10 @@ Column {
                 y: parent.height - username.height / 3
                 x: config.RightToLeftLayout == "true" ? -loginButton.width + selectUser.width : 0
                 rightMargin: config.RightToLeftLayout == "true" ? root.padding + usernameField.width / 2 : undefined
-                padding: 10
+                padding: fontUnit * 0.75
 
                 contentItem: ListView {
-                    implicitHeight: contentHeight + 20
+                    implicitHeight: contentHeight + (fontUnit * 1.5)
 
                     clip: true
                     model: selectUser.popup.visible ? selectUser.delegateModel : null
@@ -308,7 +308,7 @@ Column {
     Item {
         id: passwordField
 
-        height: root.font.pointSize * 4.5
+        height: root.font.pointSize * 4
         width: parent.width / 2
         anchors.horizontalCenter: parent.horizontalCenter
 
@@ -322,8 +322,8 @@ Column {
             anchors.verticalCenter: parent.verticalCenter
             z: 2
 
-            icon.height: parent.height * 0.25
+            icon.height: parent.height * 0.3
-            icon.width: parent.height * 0.25
+            icon.width: parent.height * 0.3
             icon.color: config.PasswordIconColor
             icon.source: Qt.resolvedUrl("../Assets/Password2.svg")
 
@@ -443,9 +443,7 @@ Column {
     Item {
         id: login
 
-        // important
+        height: loginButton.implicitHeight + (fontUnit * 3.7)
-        // try 4 or 9 ...
-        height: root.font.pointSize * 9
         width: parent.width / 2
         anchors.horizontalCenter: parent.horizontalCenter
 

Components/LoginForm.qml

@@ -2,70 +2,122 @@
 // Copyright (C) 2022-2025 Keyitdev
 // Based on https://github.com/MarianArlt/sddm-sugar-dark
 // Distributed under the GPLv3+ License https://www.gnu.org/licenses/gpl-3.0.html
-
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import SddmComponents 2.0 as SDDM
-
+Item {
-ColumnLayout {
     id: formContainer
     SDDM.TextConstants { id: textConstants }
 
-    property int p: config.ScreenPadding == "" ? 0 : config.ScreenPadding
+    readonly property real fontUnit: root.font.pointSize
-    property string a: config.FormPosition
 
-    Clock {
+    readonly property real clockTopMargin: (Number(config.ClockTopMargin) || 0) * fontUnit
-        id: clock
+    readonly property real profilePictureTopMargin: (Number(config.ProfilePictureTopMargin) || 0) * fontUnit
-        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+    readonly property real loginInputTopMargin: (Number(config.LoginInputTopMargin) || 0) * fontUnit
-        // important
+    readonly property real systemButtonsBottomMargin: (Number(config.SystemButtonsBottomMargin) || 0) * fontUnit
-        Layout.preferredHeight: root.height / 3
+    readonly property real sessionSelectBottomMargin: (Number(config.SessionSelectBottomMargin) || 0) * fontUnit
-        Layout.leftMargin: p != "0" ? a == "left" ? -p : a == "right" ? p : 0 : 0
+    readonly property real virtualKeyboardButtonBottomMargin: (Number(config.VirtualKeyboardButtonBottomMargin) || 0) * fontUnit
+
+    ColumnLayout {
+        id: topGroup
+        spacing: 0
+        anchors.top: parent.top
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        Rectangle {
+            id: clockBox
+            color: "transparent"
+            Layout.alignment: Qt.AlignHCenter
+            Layout.topMargin: clockTopMargin
+            Layout.preferredHeight: clock.implicitHeight + (fontUnit * 1.5)
+            implicitWidth: clock.implicitWidth + (fontUnit * 3)
+            radius: 20
+            Layout.preferredWidth: implicitWidth
+            Clock {
+                anchors.fill: parent
+                id: clock
+                Layout.alignment: Qt.AlignHCenter
+            }
+        }
+        Rectangle {
+            id: profilePictureBox
+            color: "transparent"
+            Layout.alignment: Qt.AlignHCenter
+            Layout.topMargin: profilePictureTopMargin
+            Layout.preferredHeight: profilePicture.height
+            implicitWidth: profilePicture.width + (fontUnit * 3)
+            Layout.preferredWidth: implicitWidth
+            ProfilePicture {
+                id: profilePicture
+                visible: config.ShowProfilePicture == "true" ? true : false
+                anchors.centerIn: parent
+                width: fontUnit * 11
+                height: fontUnit * 11
+            }
+        }
+        Rectangle {
+            id: inputBox
+            color: "transparent"
+            Layout.alignment: Qt.AlignHCenter
+            Layout.topMargin: loginInputTopMargin
+            Layout.preferredHeight: input.implicitHeight
+            implicitWidth: input.implicitWidth
+            Layout.preferredWidth: implicitWidth
+            Input {
+                id: input
+                anchors.centerIn: parent
+                width: fontUnit * 60
+            }
+        }
     }
 
-    ProfilePicture {
+    ColumnLayout {
-        id: profilePicture
+        id: bottomGroup
-        visible: false
+        spacing: 0
-        Layout.alignment: Qt.AlignHCenter
+        anchors.bottom: parent.bottom
-        Layout.preferredWidth: root.height / 7
+        anchors.horizontalCenter: parent.horizontalCenter
-        Layout.preferredHeight: root.height / 7
-        Layout.leftMargin: p != "0" ? a == "left" ? -p : a == "right" ? p : 0 : 0
-    }
 
-    Input {
+        Rectangle {
-        id: input
+            id: systemButtonsBox
-
+            color: "transparent"
-        Layout.alignment: Qt.AlignVCenter
+            Layout.alignment: Qt.AlignHCenter
-        Layout.preferredHeight: root.height / 10
+            Layout.bottomMargin: systemButtonsBottomMargin
-        Layout.leftMargin: p != "0" ? a == "left" ? -p : a == "right" ? p : 0 : 0
+            Layout.preferredHeight: systemButtons.implicitHeight
-        Layout.topMargin:  0
+            implicitWidth: systemButtons.implicitWidth
-    }
+            Layout.preferredWidth: implicitWidth
-
+            SystemButtons {
-    SystemButtons {
+                id: systemButtons
-        id: systemButtons
+                exposedSession: input.exposeSession
-
+                anchors.centerIn: parent
-        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+            }
-        Layout.preferredHeight: root.height / 5
+        }
-        Layout.maximumHeight: root.height / 5
+        Rectangle {
-        Layout.leftMargin: p != "0" ? a == "left" ? -p : a == "right" ? p : 0 : 0
+            id: sessionSelectBox
-
+            color: "transparent"
-        exposedSession: input.exposeSession
+            Layout.alignment: Qt.AlignHCenter
-    }
+            Layout.bottomMargin: sessionSelectBottomMargin
-
+            Layout.preferredHeight: sessionSelect.height
-    SessionButton {
+            implicitWidth: sessionSelect.width
-        id: sessionSelect
+            Layout.preferredWidth: implicitWidth
-
+            SessionButton {
-        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                id: sessionSelect
-        Layout.preferredHeight: root.height / 54
+                anchors.centerIn: parent
-        Layout.maximumHeight: root.height / 54
+                width: fontUnit * 30
-        Layout.leftMargin: p != "0" ? a == "left" ? -p : a == "right" ? p : 0 : 0
+            }
-    }
+        }
-
+        Rectangle {
-    VirtualKeyboardButton {
+            id: virtualKeyboardButtonBox
-        id: virtualKeyboardButton
+            color: "transparent"
-
+            Layout.alignment: Qt.AlignHCenter
-        Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+            Layout.bottomMargin: virtualKeyboardButtonBottomMargin
-        Layout.preferredHeight: root.height / 27
+            Layout.preferredHeight: virtualKeyboardButton.height
-        Layout.maximumHeight: root.height / 27
+            implicitWidth: virtualKeyboardButton.width
-        Layout.leftMargin: p != "0" ? a == "left" ? -p : a == "right" ? p : 0 : 0
+            Layout.preferredWidth: implicitWidth
+            VirtualKeyboardButton {
+                id: virtualKeyboardButton
+                anchors.centerIn: parent
+                width: fontUnit * 30
+            }
+        }
     }
 }

Components/ProfilePicture.qml

@@ -3,7 +3,7 @@ import QtQuick.Effects
 
 Item {
     id: profilePicture
-    // visible: false
+
     property url userIcon: input.currentUserIcon
     property bool hasCustomIcon: userIcon != ""
 

Components/SessionButton.qml

@@ -9,7 +9,7 @@ import QtQuick.Controls 2.15
 Item {
     id: sessionButton
 
-    height: root.font.pointSize
+    height: selectSession.height
     width: parent.width / 2
 
     property var selectedSession: selectSession.currentIndex
@@ -20,9 +20,7 @@ Item {
     ComboBox {
         id: selectSession
 
-        // important
+        height: root.font.pointSize
-        // change also in errorMessage
-        height: root.font.pointSize * 2
         anchors.horizontalCenter: parent.horizontalCenter
 
         hoverEnabled: true

Components/SystemButtons.qml

@@ -25,7 +25,6 @@ RowLayout {
 
         RoundButton {
             Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-            Layout.topMargin: root.font.pointSize * 6.5
 
             text: modelData[1]
             font.pointSize: root.font.pointSize * 0.8

Components/VirtualKeyboardButton.qml

@@ -6,9 +6,14 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 
 Item {
+    id: virtualKeyboardButtonRoot
+
+    height: virtualKeyboardButton.height
+    width: parent.width / 2
+
     Button {
         id: virtualKeyboardButton
-
+        height: root.font.pointSize
         anchors.horizontalCenter: parent.horizontalCenter
         z: 1
 
@@ -28,6 +33,9 @@ Item {
         contentItem: Text {
             id: virtualKeyboardButtonText
 
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignHCenter
+
             text: config.TranslateVirtualKeyboardButtonOff || "Virtual Keyboard (off)"
             font.pointSize: root.font.pointSize * 0.8
             font.family: root.font.family