Fix visual issues in new project wizard

* Make Project name text field have the same font size as the rest
* Use Titillium Web as the font family for the title
* Reduce the top padding of the dialog box
* Renounce the section "Advanced" from Details - we still have the items
  in the section, just not the section itself.
* Add scrollbar for the details pane - to allow smaller size dialog
* Move the tab bar (Presets) out of the GridView component - so that
scrolling the view would not also scroll the header.
* The Project view now shrinks if the dialog box is shrinked too much,
also reduced the minimum sizes of the dialog
* Resize dialog on screens smaller than 1920 x 1080
* Increase the space between Presets, Details, Styles text and their
top margin
* Lower the project item width from 144 to 90, so that project items in
the view are not so distanced from each other.
* Align the Cancel button with the left margin of the Style pane

Task-number: QDS-5500
Change-Id: I340967941c5c56c89b8741079cb64e355a283e3b
Reviewed-by: Qt CI Bot <qt_ci_bot@qt-project.org>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

8 files changed, 512 insertions, 411 deletions

diff --git a/share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml b/share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml
index 86234bf5ba..eb0cb21adf 100644
--- a/share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml
+++ b/share/qtcreator/qmldesigner/newprojectdialog/NewProjectDialog.qml
@@ -34,6 +34,7 @@ import StudioControls as SC
 import NewProjectDialog
 
 Item {
+    id: rootDialog
     width: DialogValues.dialogWidth
     height: DialogValues.dialogHeight
 
@@ -47,38 +48,53 @@ Item {
             Layout.alignment: Qt.AlignHCenter
             spacing: 0
 
+            Item { width: parent.width; height: 20 } // spacer
+
             Item { // Header Item
                 Layout.fillWidth: true
-                implicitHeight: 218
+                implicitHeight: 164
 
-                Column {
+                ColumnLayout {
                     anchors.fill: parent
 
-                    Item { width: parent.width; height: 74 } // spacer
-
-                    Text {
-                        text: qsTr("Welcome to Qt Design Studio. Let's Create Something Wonderful!")
-                        font.pixelSize: 32
+                    Item { width: parent.width; implicitHeight: 20 } // spacer
+                    Row {
                         width: parent.width
-                        height: 47
-                        lineHeight: 49
-                        lineHeightMode: Text.FixedHeight
-                        color: DialogValues.textColor
-                        horizontalAlignment: Text.AlignHCenter
-                    }
+                        height: DialogValues.dialogTitleTextHeight
+                        Layout.alignment: Qt.AlignHCenter
+                        Text {
+                            text: qsTr("Welcome to ")
+                            font.pixelSize: DialogValues.dialogTitlePixelSize
+                            font.family: "Titillium Web"
+                            height: DialogValues.dialogTitleTextHeight
+                            lineHeight: DialogValues.dialogTitleLineHeight
+                            lineHeightMode: Text.FixedHeight
+                            color: DialogValues.textColor
+                        }
 
-                    Item { width: parent.width; height: 11 } // spacer
+                        Text {
+                            text: qsTr("Qt Design Studio")
+                            font.pixelSize: DialogValues.dialogTitlePixelSize
+                            font.family: "Titillium Web"
+                            height: DialogValues.dialogTitleTextHeight
+                            lineHeight: DialogValues.dialogTitleLineHeight
+                            lineHeightMode: Text.FixedHeight
+                            color: DialogValues.textColorInteraction
+                        }
+                    }
 
                     Text {
                         width: parent.width
-                        text: qsTr("Get started by selecting from Presets or start from empty screen. You may also include your design file.")
+                        text: qsTr("Create new project by selecting a suitable Preset and then adjust details.")
                         color: DialogValues.textColor
                         font.pixelSize: DialogValues.paneTitlePixelSize
                         lineHeight: DialogValues.paneTitleLineHeight
                         lineHeightMode: Text.FixedHeight
-                        horizontalAlignment: Text.AlignHCenter
+                        Layout.alignment: Qt.AlignHCenter
                     }
-                }
+
+                    Item { width: parent.width; Layout.fillHeight: true} // spacer
+                } // ColumnLayout
             } // Header Item
 
             Item { // Content Item
@@ -96,7 +112,7 @@ Item {
                         Layout.fillWidth: true
                         Layout.fillHeight: true
                         Layout.minimumWidth: 379 // figured out this number visually
-                        Layout.minimumHeight: 326 // figured out this number visually
+                        Layout.minimumHeight: 261 // figured out this number visually
 
                         Column {
                             x: DialogValues.defaultPadding                          // left padding
@@ -106,19 +122,86 @@ Item {
                             Text {
                                 text: qsTr("Presets")
                                 width: parent.width
+                                height: 47
                                 font.weight: Font.DemiBold
                                 font.pixelSize: DialogValues.paneTitlePixelSize
                                 lineHeight: DialogValues.paneTitleLineHeight
                                 lineHeightMode: Text.FixedHeight
                                 color: DialogValues.textColor
+                                verticalAlignment: Qt.AlignVCenter
                             }
 
+                            Rectangle { // TabBar
+                                readonly property int animDur: 500
+                                id: samTabRect
+                                x: 10                       // left padding
+                                width: parent.width - 64    // right padding
+                                height: DialogValues.projectViewHeaderHeight
+                                color: DialogValues.lightPaneColor
+
+                                Row {
+                                    id: tabBarRow
+                                    spacing: 20
+                                    property int currIndex: 0
+
+                                    Repeater {
+                                        model: categoryModel
+                                        Text {
+                                            text: name
+                                            font.weight: Font.DemiBold
+                                            font.pixelSize: DialogValues.viewHeaderPixelSize
+                                            verticalAlignment: Text.AlignVCenter
+                                            color: tabBarRow.currIndex === index ? DialogValues.textColorInteraction
+                                                                                 : DialogValues.textColor
+                                            Behavior on color { ColorAnimation { duration: samTabRect.animDur } }
+
+                                            MouseArea {
+                                                anchors.fill: parent
+                                                onClicked: {
+                                                    tabBarRow.currIndex = index
+                                                    projectModel.setPage(index)
+                                                    projectViewId.currentIndex = 0
+                                                    projectViewId.currentIndexChanged()
+
+                                                    strip.x = parent.x
+                                                    strip.width = parent.width
+                                                }
+                                            }
+
+                                        } // Text
+                                    } // Repeater
+                                } // tabBarRow
+
+                                Rectangle {
+                                    id: strip
+                                    width: tabBarRow.children[0].width
+                                    height: 5
+                                    radius: 2
+                                    color: DialogValues.textColorInteraction
+                                    anchors.bottom: parent.bottom
+
+                                    Behavior on x { SmoothedAnimation { duration: samTabRect.animDur } }
+                                    Behavior on width { SmoothedAnimation { duration: strip.width === 0 ? 0 : samTabRect.animDur } } // do not animate initial width
+                                }
+                            } // Rectangle
+
                             NewProjectView {
                                 id: projectViewId
                                 x: 10                       // left padding
                                 width: parent.width - 64    // right padding
                                 height: DialogValues.projectViewHeight
                                 loader: projectDetailsLoader
+
+                                Connections {
+                                    target: rootDialog
+                                    function onHeightChanged() {
+                                        if (rootDialog.height < 700) { // 700 = minimum height big dialog
+                                            projectViewId.height = DialogValues.projectViewHeight / 2
+                                        } else {
+                                            projectViewId.height = DialogValues.projectViewHeight
+                                        }
+                                    }
+                                }
                             }
 
                             Item { height: 5; width: parent.width }
@@ -158,32 +241,46 @@ Item {
 
                     Item { Layout.fillWidth: true }
 
-                    SC.AbstractButton {
-                        implicitWidth: DialogValues.dialogButtonWidth
-                        width: DialogValues.dialogButtonWidth
-                        visible: true
-                        buttonIcon: qsTr("Cancel")
-                        iconSize: DialogValues.defaultPixelSize
-                        iconFont: StudioTheme.Constants.font
+                    Item { // Dialog Button Box
+                        width: DialogValues.stylesPaneWidth
+                        height: parent.height
 
-                        onClicked: {
-                            dialogBox.reject();
-                        }
-                    }
+                        RowLayout {
+                            width: DialogValues.stylesPaneWidth
+                            implicitWidth: DialogValues.stylesPaneWidth
+                            implicitHeight: parent.height
+
+                            SC.AbstractButton {
+                                implicitWidth: DialogValues.dialogButtonWidth
+                                width: DialogValues.dialogButtonWidth
+                                visible: true
+                                buttonIcon: qsTr("Cancel")
+                                iconSize: DialogValues.defaultPixelSize
+                                iconFont: StudioTheme.Constants.font
+
+                                onClicked: {
+                                    dialogBox.reject();
+                                }
+                            }
+
+                            Item { Layout.fillWidth: true }
+
+                            SC.AbstractButton {
+                                implicitWidth: DialogValues.dialogButtonWidth
+                                width: DialogValues.dialogButtonWidth
+                                visible: true
+                                buttonIcon: qsTr("Create")
+                                iconSize: DialogValues.defaultPixelSize
+                                enabled: dialogBox.fieldsValid
+                                iconFont: StudioTheme.Constants.font
+
+                                onClicked: {
+                                    dialogBox.accept();
+                                }
+                            }
+                        } // RowLayout
+                    } // Dialog Button Box
 
-                    SC.AbstractButton {
-                        implicitWidth: DialogValues.dialogButtonWidth
-                        width: DialogValues.dialogButtonWidth
-                        visible: true
-                        buttonIcon: qsTr("Create")
-                        iconSize: DialogValues.defaultPixelSize
-                        enabled: dialogBox.fieldsValid
-                        iconFont: StudioTheme.Constants.font
-
-                        onClicked: {
-                            dialogBox.accept();
-                        }
-                    }
                     Item { implicitWidth: 35 - DialogValues.defaultPadding }
                 } // RowLayout
             } // Footer
diff --git a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml
index 9c4f259648..d622253a68 100644
--- a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml
+++ b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml
@@ -49,358 +49,385 @@ Item {
         Item {
             x: DialogValues.detailsPanePadding                               // left padding
             width: parent.width - DialogValues.detailsPanePadding * 2        // right padding
+            height: parent.height
 
             Column {
                 anchors.fill: parent
                 spacing: DialogValues.defaultPadding
 
                 Text {
+                    id: detailsHeading
                     text: qsTr("Details")
+                    height: DialogValues.dialogTitleTextHeight
                     width: parent.width;
                     font.weight: Font.DemiBold
                     font.pixelSize: DialogValues.paneTitlePixelSize
                     lineHeight: DialogValues.paneTitleLineHeight
                     lineHeightMode: Text.FixedHeight
                     color: DialogValues.textColor
+                    verticalAlignment: Qt.AlignVCenter
                 }
 
-                SC.TextField {
-                    id: projectNameTextField
-                    actionIndicatorVisible: false
-                    translationIndicatorVisible: false
-                    text: dialogBox.projectName
+                Flickable {
                     width: parent.width
-                    color: DialogValues.textColor
-                    selectByMouse: true
+                    height: parent.height - detailsHeading.height - DialogValues.defaultPadding
 
-                    onEditingFinished: {
-                        text = text.charAt(0).toUpperCase() + text.slice(1)
-                    }
+                    contentWidth: parent.width
+                    contentHeight: scrollContent.height
+                    boundsBehavior: Flickable.StopAtBounds
+                    clip: true
 
-                    font.pixelSize: DialogValues.paneTitlePixelSize
-                }
+                    ScrollBar.vertical:  ScrollBar {
+                        implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                                                implicitContentWidth + leftPadding + rightPadding)
+                        implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                                                 implicitContentHeight + topPadding + bottomPadding)
 
-                Binding {
-                    target: dialogBox
-                    property: "projectName"
-                    value: projectNameTextField.text
-                }
+                        property bool scrollBarVisible: parent.childrenRect.height > parent.height
 
-                Item { width: parent.width; height: DialogValues.narrowSpacing(11) }
+                        minimumSize: orientation == Qt.Horizontal ? height / width : width / height
 
-                RowLayout { // Project location
-                    width: parent.width
+                        orientation: Qt.Vertical
+                        policy: scrollBarVisible ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
+                        x: parent.width - width
+                        y: 0
+                        height: parent.availableHeight
+                                - (parent.bothVisible ? parent.horizontalThickness : 0)
+                        padding: 0
 
-                    SC.TextField {
-                        Layout.fillWidth: true
-                        id: projectLocationTextField
-                        actionIndicatorVisible: false
-                        translationIndicatorVisible: false
-                        text: dialogBox.projectLocation
-                        color: DialogValues.textColor
-                        selectByMouse: true
-                        font.pixelSize: DialogValues.defaultPixelSize
-                    }
-
-                    Binding {
-                        target: dialogBox
-                        property: "projectLocation"
-                        value: projectLocationTextField.text
-                    }
-
-                    SC.AbstractButton {
-                        implicitWidth: 30
-                        iconSize: 20
-                        visible: true
-                        buttonIcon: "…"
-                        iconFont: StudioTheme.Constants.font
-
-                        onClicked: {
-                            var newLocation = dialogBox.chooseProjectLocation()
-                            if (newLocation)
-                                projectLocationTextField.text = newLocation
+                        background: Rectangle {
+                            color: StudioTheme.Values.themeScrollBarTrack
                         }
-                    } // SC.AbstractButton
-                } // Project location RowLayout
 
-                Item { width: parent.width; height: DialogValues.narrowSpacing(7) }
+                        contentItem: Rectangle {
+                            implicitWidth: StudioTheme.Values.scrollBarThickness
+                            color: StudioTheme.Values.themeScrollBarHandle
+                        }
+                    } // ScrollBar
 
-                RowLayout { // StatusMessage
-                    width: parent.width
-                    spacing: 0
-
-                    Image {
-                        id: statusIcon
-                        Layout.alignment: Qt.AlignTop
-                        asynchronous: false
-                    }
-
-                    Text {
-                        id: statusMessage
-                        text: dialogBox.statusMessage
-                        font.pixelSize: DialogValues.defaultPixelSize
-                        lineHeight: DialogValues.defaultLineHeight
-                        lineHeightMode: Text.FixedHeight
-                        color: DialogValues.textColor
-                        wrapMode: Text.Wrap
-                        elide: Text.ElideRight
-                        maximumLineCount: 3
-                        Layout.fillWidth: true
-
-                        states: [
-                            State {
-                                name: "warning"
-                                when: dialogBox.statusType === "warning"
-                                PropertyChanges {
-                                    target: statusMessage
-                                    color: DialogValues.textWarning
-                                }
-                                PropertyChanges {
-                                    target: statusIcon
-                                    source: "image://newprojectdialog_library/status-warning"
-                                }
-                            },
-
-                            State {
-                                name: "error"
-                                when: dialogBox.statusType === "error"
-                                PropertyChanges {
-                                    target: statusMessage
-                                    color: DialogValues.textError
-                                }
-                                PropertyChanges {
-                                    target: statusIcon
-                                    source: "image://newprojectdialog_library/status-error"
-                                }
+                    Column {
+                        id: scrollContent
+                        width: parent.width - DialogValues.detailsPanePadding
+                        height: DialogValues.detailsScrollableContentHeight
+                        spacing: DialogValues.defaultPadding
+
+                        SC.TextField {
+                            id: projectNameTextField
+                            actionIndicatorVisible: false
+                            translationIndicatorVisible: false
+                            text: dialogBox.projectName
+                            width: parent.width
+                            color: DialogValues.textColor
+                            selectByMouse: true
+
+                            onEditingFinished: {
+                                text = text.charAt(0).toUpperCase() + text.slice(1)
                             }
-                        ]
-                    } // Text
-                } // RowLayout
-
-                SC.CheckBox {
-                    id: defaultLocationCheckbox
-                    actionIndicatorVisible: false
-                    text: qsTr("Use as default project location")
-                    checked: false
-                    font.pixelSize: DialogValues.defaultPixelSize
-                }
 
-                Binding {
-                    target: dialogBox
-                    property: "saveAsDefaultLocation"
-                    value: defaultLocationCheckbox.checked
-                }
+                            font.pixelSize: DialogValues.defaultPixelSize
+                        }
 
-                Rectangle { width: parent.width; height: 1; color: DialogValues.dividerlineColor }
+                        Binding {
+                            target: dialogBox
+                            property: "projectName"
+                            value: projectNameTextField.text
+                        }
 
-                SC.ComboBox {   // Screen Size ComboBox
-                    id: screenSizeComboBox
-                    actionIndicatorVisible: false
-                    currentIndex: -1
-                    model: screenSizeModel
-                    textRole: "display"
-                    width: parent.width
-                    font.pixelSize: DialogValues.defaultPixelSize
+                        Item { width: parent.width; height: DialogValues.narrowSpacing(11) }
 
-                    onActivated: (index) => {
-                        dialogBox.setScreenSizeIndex(index);
+                        RowLayout { // Project location
+                            width: parent.width
 
-                        var size = screenSizeModel.screenSizes(index);
-                        widthField.realValue = size.width;
-                        heightField.realValue = size.height;
-                    }
+                            SC.TextField {
+                                Layout.fillWidth: true
+                                id: projectLocationTextField
+                                actionIndicatorVisible: false
+                                translationIndicatorVisible: false
+                                text: dialogBox.projectLocation
+                                color: DialogValues.textColor
+                                selectByMouse: true
+                                font.pixelSize: DialogValues.defaultPixelSize
+                            }
 
-                    Connections {
-                        target: screenSizeModel
-                        function onModelReset() {
-                            var newIndex = screenSizeComboBox.currentIndex > -1
-                                    ? screenSizeComboBox.currentIndex
-                                    : dialogBox.screenSizeIndex()
+                            Binding {
+                                target: dialogBox
+                                property: "projectLocation"
+                                value: projectLocationTextField.text
+                            }
 
-                            screenSizeComboBox.currentIndex = newIndex
-                            screenSizeComboBox.activated(newIndex)
-                        }
-                    }
-                } // Screen Size ComboBox
+                            SC.AbstractButton {
+                                implicitWidth: 30
+                                iconSize: 20
+                                visible: true
+                                buttonIcon: "…"
+                                iconFont: StudioTheme.Constants.font
+
+                                onClicked: {
+                                    var newLocation = dialogBox.chooseProjectLocation()
+                                    if (newLocation)
+                                        projectLocationTextField.text = newLocation
+                                }
+                            } // SC.AbstractButton
+                        } // Project location RowLayout
 
-                GridLayout { // orientation + width + height
-                    width: parent.width
-                    height: 85
-
-                    columns: 4
-                    rows: 2
-
-                    columnSpacing: 10
-                    rowSpacing: 10
-
-                    // header items
-                    Text {
-                        text: qsTr("Width")
-                        font.pixelSize: DialogValues.defaultPixelSize
-                        lineHeight: DialogValues.defaultLineHeight
-                        lineHeightMode: Text.FixedHeight
-                        color: DialogValues.textColor
-                    }
-
-                    Text {
-                        text: qsTr("Height")
-                        font.pixelSize: DialogValues.defaultPixelSize
-                        lineHeight: DialogValues.defaultLineHeight
-                        lineHeightMode: Text.FixedHeight
-                        color: DialogValues.textColor
-                    }
-
-                    Item { Layout.fillWidth: true }
-
-                    Text {
-                        text: qsTr("Orientation")
-                        font.pixelSize: DialogValues.defaultPixelSize
-                        lineHeight: DialogValues.defaultLineHeight
-                        lineHeightMode: Text.FixedHeight
-                        color: DialogValues.textColor
-                    }
-
-                    // content items
-                    SC.RealSpinBox {
-                        id: widthField
-                        actionIndicatorVisible: false
-                        implicitWidth: 70
-                        labelColor: DialogValues.textColor
-                        realFrom: 100
-                        realTo: 100000
-                        realValue: 100
-                        realStepSize: 10
-                        font.pixelSize: DialogValues.defaultPixelSize
-
-                        onRealValueChanged: {
-                            var height = heightField.realValue
-                            var width = realValue
-
-                            if (width >= height)
-                                orientationButton.setHorizontal()
-                            else
-                                orientationButton.setVertical()
+                        Item { width: parent.width; height: DialogValues.narrowSpacing(7) }
+
+                        RowLayout { // StatusMessage
+                            width: parent.width
+                            spacing: 0
+
+                            Image {
+                                id: statusIcon
+                                Layout.alignment: Qt.AlignTop
+                                asynchronous: false
+                            }
+
+                            Text {
+                                id: statusMessage
+                                text: dialogBox.statusMessage
+                                font.pixelSize: DialogValues.defaultPixelSize
+                                lineHeight: DialogValues.defaultLineHeight
+                                lineHeightMode: Text.FixedHeight
+                                color: DialogValues.textColor
+                                wrapMode: Text.Wrap
+                                elide: Text.ElideRight
+                                maximumLineCount: 3
+                                Layout.fillWidth: true
+
+                                states: [
+                                    State {
+                                        name: "warning"
+                                        when: dialogBox.statusType === "warning"
+                                        PropertyChanges {
+                                            target: statusMessage
+                                            color: DialogValues.textWarning
+                                        }
+                                        PropertyChanges {
+                                            target: statusIcon
+                                            source: "image://newprojectdialog_library/status-warning"
+                                        }
+                                    },
+
+                                    State {
+                                        name: "error"
+                                        when: dialogBox.statusType === "error"
+                                        PropertyChanges {
+                                            target: statusMessage
+                                            color: DialogValues.textError
+                                        }
+                                        PropertyChanges {
+                                            target: statusIcon
+                                            source: "image://newprojectdialog_library/status-error"
+                                        }
+                                    }
+                                ]
+                            } // Text
+                        } // RowLayout
+
+                        SC.CheckBox {
+                            id: defaultLocationCheckbox
+                            actionIndicatorVisible: false
+                            text: qsTr("Use as default project location")
+                            checked: false
+                            font.pixelSize: DialogValues.defaultPixelSize
                         }
-                    } // Width Text Field
-
-                    Binding {
-                        target: dialogBox
-                        property: "customWidth"
-                        value: widthField.realValue
-                    }
-
-                    SC.RealSpinBox {
-                        id: heightField
-                        actionIndicatorVisible: false
-                        implicitWidth: 70
-                        labelColor: DialogValues.textColor
-                        realFrom: 100
-                        realTo: 100000
-                        realValue: 100
-                        realStepSize: 10
-                        font.pixelSize: DialogValues.defaultPixelSize
-
-                        onRealValueChanged: {
-                            var height = realValue
-                            var width = widthField.realValue
-
-                            if (width >= height)
-                                orientationButton.setHorizontal()
-                            else
-                                orientationButton.setVertical()
+
+                        Binding {
+                            target: dialogBox
+                            property: "saveAsDefaultLocation"
+                            value: defaultLocationCheckbox.checked
                         }
-                    } // Height Text Field
 
-                    Binding {
-                        target: dialogBox
-                        property: "customHeight"
-                        value: heightField.realValue
-                    }
+                        Rectangle { width: parent.width; height: 1; color: DialogValues.dividerlineColor }
 
-                    Item { Layout.fillWidth: true }
+                        SC.ComboBox {   // Screen Size ComboBox
+                            id: screenSizeComboBox
+                            actionIndicatorVisible: false
+                            currentIndex: -1
+                            model: screenSizeModel
+                            textRole: "display"
+                            width: parent.width
+                            font.pixelSize: DialogValues.defaultPixelSize
 
-                    Button {
-                        id: orientationButton
-                        implicitWidth: 100
-                        implicitHeight: 50
+                            onActivated: (index) => {
+                                dialogBox.setScreenSizeIndex(index);
 
-                        checked: false
-                        hoverEnabled: false
-                        background: Rectangle {
-                            width: parent.width
-                            height: parent.height
-                            color: "transparent"
-
-                            Row {
-                                Item {
-                                    width: orientationButton.width / 2
-                                    height: orientationButton.height
-                                    Rectangle {
-                                        id: horizontalBar
-                                        color: "white"
-                                        width: parent.width
-                                        height: orientationButton.height / 2
-                                        anchors.verticalCenter: parent.verticalCenter
-                                    }
-                                }
+                                var size = screenSizeModel.screenSizes(index);
+                                widthField.realValue = size.width;
+                                heightField.realValue = size.height;
+                            }
 
-                                Item {
-                                    width: orientationButton.width / 4
-                                    height: orientationButton.height
-                                }
+                            Connections {
+                                target: screenSizeModel
+                                function onModelReset() {
+                                    var newIndex = screenSizeComboBox.currentIndex > -1
+                                            ? screenSizeComboBox.currentIndex
+                                            : dialogBox.screenSizeIndex()
 
-                                Rectangle {
-                                    id: verticalBar
-                                    width: orientationButton.width / 4
-                                    height: orientationButton.height
-                                    color: "white"
+                                    screenSizeComboBox.currentIndex = newIndex
+                                    screenSizeComboBox.activated(newIndex)
                                 }
                             }
-                        }
+                        } // Screen Size ComboBox
+
+                        GridLayout { // orientation + width + height
+                            width: parent.width
+                            height: 85
+
+                            columns: 4
+                            rows: 2
 
-                        onClicked: {
-                            if (widthField.realValue && heightField.realValue) {
-                                [widthField.realValue, heightField.realValue] = [heightField.realValue, widthField.realValue];
-                                checked = !checked
+                            columnSpacing: 10
+                            rowSpacing: 10
+
+                            // header items
+                            Text {
+                                text: qsTr("Width")
+                                font.pixelSize: DialogValues.defaultPixelSize
+                                lineHeight: DialogValues.defaultLineHeight
+                                lineHeightMode: Text.FixedHeight
+                                color: DialogValues.textColor
                             }
-                        }
 
-                        function setHorizontal() {
-                            checked = false
-                            horizontalBar.color = DialogValues.textColorInteraction
-                            verticalBar.color = "white"
-                        }
+                            Text {
+                                text: qsTr("Height")
+                                font.pixelSize: DialogValues.defaultPixelSize
+                                lineHeight: DialogValues.defaultLineHeight
+                                lineHeightMode: Text.FixedHeight
+                                color: DialogValues.textColor
+                            }
 
-                        function setVertical() {
-                            checked = true
-                            horizontalBar.color = "white"
-                            verticalBar.color = DialogValues.textColorInteraction
-                        }
-                    } // Orientation button
+                            Item { Layout.fillWidth: true }
 
-                } // GridLayout: orientation + width + height
+                            Text {
+                                text: qsTr("Orientation")
+                                font.pixelSize: DialogValues.defaultPixelSize
+                                lineHeight: DialogValues.defaultLineHeight
+                                lineHeightMode: Text.FixedHeight
+                                color: DialogValues.textColor
+                            }
 
-                Rectangle { width: parent.width; height: 1; color: DialogValues.dividerlineColor }
+                            // content items
+                            SC.RealSpinBox {
+                                id: widthField
+                                actionIndicatorVisible: false
+                                implicitWidth: 70
+                                labelColor: DialogValues.textColor
+                                realFrom: 100
+                                realTo: 100000
+                                realValue: 100
+                                realStepSize: 10
+                                font.pixelSize: DialogValues.defaultPixelSize
 
-                SC.Section {
-                    width: parent.width
-                    caption: qsTr("Advanced")
-                    captionPixelSize: DialogValues.defaultPixelSize
-                    captionColor: DialogValues.darkPaneColor
-                    captionTextColor: DialogValues.textColor
-                    leftPadding: 0
-                    expanded: true
-                    visible: dialogBox.haveVirtualKeyboard || dialogBox.haveTargetQtVersion
+                                onRealValueChanged: {
+                                    var height = heightField.realValue
+                                    var width = realValue
 
-                    Column {
-                        spacing: DialogValues.defaultPadding
-                        width: parent.width
+                                    if (width >= height)
+                                        orientationButton.setHorizontal()
+                                    else
+                                        orientationButton.setVertical()
+                                }
+                            } // Width Text Field
+
+                            Binding {
+                                target: dialogBox
+                                property: "customWidth"
+                                value: widthField.realValue
+                            }
 
-                        /* We need a spacer of -10 in order to have actual 18px spacing between
-                         * section bottom and the checkbox. Otherwise, with Column spacing set to
-                         * 18, without a spacer, the default space to the first item would be 10,
-                         * for some reason. */
-                        Item { width: parent.width; height: -10 }
+                            SC.RealSpinBox {
+                                id: heightField
+                                actionIndicatorVisible: false
+                                implicitWidth: 70
+                                labelColor: DialogValues.textColor
+                                realFrom: 100
+                                realTo: 100000
+                                realValue: 100
+                                realStepSize: 10
+                                font.pixelSize: DialogValues.defaultPixelSize
+
+                                onRealValueChanged: {
+                                    var height = realValue
+                                    var width = widthField.realValue
+
+                                    if (width >= height)
+                                        orientationButton.setHorizontal()
+                                    else
+                                        orientationButton.setVertical()
+                                }
+                            } // Height Text Field
+
+                            Binding {
+                                target: dialogBox
+                                property: "customHeight"
+                                value: heightField.realValue
+                            }
+
+                            Item { Layout.fillWidth: true }
+
+                            Button {
+                                id: orientationButton
+                                implicitWidth: 100
+                                implicitHeight: 50
+
+                                checked: false
+                                hoverEnabled: false
+                                background: Rectangle {
+                                    width: parent.width
+                                    height: parent.height
+                                    color: "transparent"
+
+                                    Row {
+                                        Item {
+                                            width: orientationButton.width / 2
+                                            height: orientationButton.height
+                                            Rectangle {
+                                                id: horizontalBar
+                                                color: "white"
+                                                width: parent.width
+                                                height: orientationButton.height / 2
+                                                anchors.verticalCenter: parent.verticalCenter
+                                            }
+                                        }
+
+                                        Item {
+                                            width: orientationButton.width / 4
+                                            height: orientationButton.height
+                                        }
+
+                                        Rectangle {
+                                            id: verticalBar
+                                            width: orientationButton.width / 4
+                                            height: orientationButton.height
+                                            color: "white"
+                                        }
+                                    }
+                                }
+
+                                onClicked: {
+                                    if (widthField.realValue && heightField.realValue) {
+                                        [widthField.realValue, heightField.realValue] = [heightField.realValue, widthField.realValue];
+                                        checked = !checked
+                                    }
+                                }
+
+                                function setHorizontal() {
+                                    checked = false
+                                    horizontalBar.color = DialogValues.textColorInteraction
+                                    verticalBar.color = "white"
+                                }
+
+                                function setVertical() {
+                                    checked = true
+                                    horizontalBar.color = "white"
+                                    verticalBar.color = DialogValues.textColorInteraction
+                                }
+                            } // Orientation button
+
+                        } // GridLayout: orientation + width + height
+
+                        Rectangle { width: parent.width; height: 1; color: DialogValues.dividerlineColor }
 
                         SC.CheckBox {
                             id: useQtVirtualKeyboard
@@ -440,22 +467,19 @@ Item {
                                     }
                                 }
 
-                                width: parent.width
-
                                 onActivated: (index) => {
                                     dialogBox.setTargetQtVersion(index)
                                 }
                             } // Target Qt Version ComboBox
-
                         } // RowLayout
-                    } // Column
-                } // SC.Section
 
-                Binding {
-                    target: dialogBox
-                    property: "useVirtualKeyboard"
-                    value: useQtVirtualKeyboard.checked
-                }
+                        Binding {
+                            target: dialogBox
+                            property: "useVirtualKeyboard"
+                            value: useQtVirtualKeyboard.checked
+                        }
+                    } // ScrollContent Column
+                } // ScrollView
 
             } // Column
         } // Item
diff --git a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/DialogValues.qml b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/DialogValues.qml
index 4fedf87921..0dafb43e44 100644
--- a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/DialogValues.qml
+++ b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/DialogValues.qml
@@ -30,12 +30,16 @@ import StudioTheme as StudioTheme
 
 QtObject {
     readonly property int dialogWidth: 1522
-    readonly property int dialogHeight: 994
+    readonly property int dialogHeight: 940
     readonly property int projectViewMinimumWidth: 600
     readonly property int projectViewMinimumHeight: projectViewHeight
     readonly property int dialogContentHeight: projectViewHeight + 300  // i.e. dialog without header and footer
     readonly property int loadedPanesWidth: detailsPaneWidth + stylesPaneWidth
-    readonly property int detailsPaneWidth: 330 + detailsPanePadding * 2
+    readonly property int detailsPaneWidth: 330 + detailsPanePadding * 2// + 10 // 50
+    readonly property int dialogTitleTextHeight: 47
+    /* detailsScrollableContentHeight - the full height that may need to be scrolled to be fully
+       visible, if the dialog box is too small. */
+    readonly property int detailsScrollableContentHeight: 428
     readonly property int stylesPaneWidth: styleImageWidth + stylesPanePadding * 2 + styleImageBorderWidth * 2 // i.e. 240px
     readonly property int detailsPanePadding: 18
     readonly property int stylesPanePadding: 18
@@ -44,9 +48,9 @@ QtObject {
     readonly property int styleImageWidth: 200
     readonly property int styleImageBorderWidth: 2
     readonly property int footerHeight: 73
-    readonly property int projectItemWidth: 144
+    readonly property int projectItemWidth: 90
     readonly property int projectItemHeight: 144
-    readonly property int projectViewHeight: projectItemHeight * 2 + projectViewHeaderHeight
+    readonly property int projectViewHeight: projectItemHeight * 2
     readonly property int projectViewHeaderHeight: 38
 
     readonly property int dialogButtonWidth: 100
@@ -69,6 +73,8 @@ QtObject {
     readonly property real viewHeaderLineHeight: 24
     readonly property real paneTitlePixelSize: 18
     readonly property real paneTitleLineHeight: 27
+    readonly property int dialogTitlePixelSize: 32
+    readonly property int dialogTitleLineHeight: 49
 
     // for a spacer item
     function narrowSpacing(value, layoutSpacing = DialogValues.defaultPadding) {
diff --git a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/NewProjectView.qml b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/NewProjectView.qml
index 32a22cb1fc..4270c0946a 100644
--- a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/NewProjectView.qml
+++ b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/NewProjectView.qml
@@ -35,61 +35,9 @@ GridView {
 
     required property Item loader
 
-    readonly property int animDur: 500
-
-    header: Rectangle {
-        width: parent.width
-        height: DialogValues.projectViewHeaderHeight
-        color: DialogValues.lightPaneColor
-
-        Row {
-            id: row
-            spacing: 20
-            property int currIndex: 0
-
-            Repeater {
-                model: categoryModel
-                Text {
-                    text: name
-                    font.weight: Font.DemiBold
-                    font.pixelSize: DialogValues.viewHeaderPixelSize
-                    verticalAlignment: Text.AlignVCenter
-                    color: row.currIndex === index ? DialogValues.textColorInteraction
-                                                   : DialogValues.textColor
-                    Behavior on color { ColorAnimation { duration: animDur } }
-
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: {
-                            row.currIndex = index
-                            projectModel.setPage(index)
-                            projectView.currentIndex = 0
-                            projectView.currentIndexChanged()
-
-                            strip.x = parent.x
-                            strip.width = parent.width
-                        }
-                    }
-
-                } // Text
-            } // Repeater
-        } // Row
-
-        Rectangle {
-            id: strip
-            width: row.children[0].width
-            height: 5
-            radius: 2
-            color: DialogValues.textColorInteraction
-            anchors.bottom: parent.bottom
-
-            Behavior on x { SmoothedAnimation { duration: animDur } }
-            Behavior on width { SmoothedAnimation { duration: strip.width === 0 ? 0 : animDur } } // do not animate initial width
-        }
-    } // Rectangle
-
     cellWidth: DialogValues.projectItemWidth
     cellHeight: DialogValues.projectItemHeight
+    clip: true
 
     boundsBehavior: Flickable.StopAtBounds
 
diff --git a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml
index a1ef6696f3..09350f5601 100644
--- a/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml
+++ b/share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml
@@ -65,12 +65,13 @@ Item {
                 Text {
                     id: styleTitleText
                     text: qsTr("Style")
-                    width: parent.width;
+                    Layout.minimumHeight: DialogValues.dialogTitleTextHeight
                     font.weight: Font.DemiBold
                     font.pixelSize: DialogValues.paneTitlePixelSize
                     lineHeight: DialogValues.paneTitleLineHeight
                     lineHeightMode: Text.FixedHeight
                     color: DialogValues.textColor
+                    verticalAlignment: Qt.AlignVCenter
 
                     function refresh() {
                         text = qsTr("Style") + " (" + styleModel.rowCount() + ")"
diff --git a/src/plugins/studiowelcome/newprojectdialogimageprovider.cpp b/src/plugins/studiowelcome/newprojectdialogimageprovider.cpp
index bdb3e4af8b..0e50292504 100644
--- a/src/plugins/studiowelcome/newprojectdialogimageprovider.cpp
+++ b/src/plugins/studiowelcome/newprojectdialogimageprovider.cpp
@@ -84,6 +84,26 @@ QPixmap NewProjectDialogImageProvider::requestStylePixmap(const QString &id, QSi
     return pixmap;
 }
 
+QPixmap NewProjectDialogImageProvider::requestDefaultPixmap(const QString &id, QSize *size, const QSize &requestedSize)
+{
+    QString realPath = Core::ICore::resourcePath("qmldesigner/newprojectdialog/image/" + id).toString();
+
+    QPixmap pixmap{realPath};
+
+    if (size) {
+        size->setWidth(pixmap.width());
+        size->setHeight(pixmap.height());
+    }
+
+    if (pixmap.isNull())
+        return QPixmap{};
+
+    if (requestedSize.isValid())
+        return pixmap.scaled(requestedSize);
+
+    return pixmap;
+}
+
 QPixmap NewProjectDialogImageProvider::requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
 {
     if (id.startsWith("style-"))
@@ -92,7 +112,7 @@ QPixmap NewProjectDialogImageProvider::requestPixmap(const QString &id, QSize *s
     if (id.startsWith("status-"))
         return requestStatusPixmap(id, size, requestedSize);
 
-    return QPixmap{};
+    return requestDefaultPixmap(id, size, requestedSize);
 }
 
 } // namespace Internal
diff --git a/src/plugins/studiowelcome/newprojectdialogimageprovider.h b/src/plugins/studiowelcome/newprojectdialogimageprovider.h
index f149d082c2..0064070259 100644
--- a/src/plugins/studiowelcome/newprojectdialogimageprovider.h
+++ b/src/plugins/studiowelcome/newprojectdialogimageprovider.h
@@ -41,6 +41,7 @@ public:
 private:
     QPixmap requestStatusPixmap(const QString &id, QSize *size, const QSize &requestedSize);
     QPixmap requestStylePixmap(const QString &id, QSize *size, const QSize &requestedSize);
+    QPixmap requestDefaultPixmap(const QString &id, QSize *size, const QSize &requestedSize);
 
     static QPixmap invalidStyleIcon();
 };
diff --git a/src/plugins/studiowelcome/qdsnewdialog.cpp b/src/plugins/studiowelcome/qdsnewdialog.cpp
index 7ab0d9f8c1..6492bb8579 100644
--- a/src/plugins/studiowelcome/qdsnewdialog.cpp
+++ b/src/plugins/studiowelcome/qdsnewdialog.cpp
@@ -93,7 +93,11 @@ QdsNewDialog::QdsNewDialog(QWidget *parent)
     m_dialog->setWindowModality(Qt::ApplicationModal);
     m_dialog->setWindowFlags(Qt::Dialog);
     m_dialog->setAttribute(Qt::WA_DeleteOnClose);
-    m_dialog->setMinimumSize(1155, 804);
+    m_dialog->setMinimumSize(1110, 554);
+
+    QSize screenSize = m_dialog->screen()->geometry().size();
+    if (screenSize.height() < 1080)
+        m_dialog->resize(parent->size());
 
     QObject::connect(&m_wizard, &WizardHandler::deletingWizard, this, &QdsNewDialog::onDeletingWizard);
     QObject::connect(&m_wizard, &WizardHandler::wizardCreated, this, &QdsNewDialog::onWizardCreated);