improve UI layout

Signed-off-by: Jared Van Bortel <jared@nomic.ai>

gpt4all-chat/qml/AddRemoteModelView.qml

@@ -39,25 +39,26 @@ ColumnLayout {
         ScrollBar.vertical.policy: ScrollBar.AsNeeded
         Layout.fillWidth: true
         Layout.fillHeight: true
+        contentWidth: availableWidth
         clip: true
-        GridLayout {
+        Flow {
-            rows: 2
+            anchors.left: parent.left
-            columns: 3
+            anchors.right: parent.right
-            rowSpacing: 20
+            spacing: 20
-            columnSpacing: 20
+            bottomPadding: 20
+            property int childWidth: 330 * theme.fontScale
+            property int childHeight: 400 + 166 * theme.fontScale
             RemoteModelCard {
-                Layout.preferredWidth: 600
+                width: parent.childWidth
-                Layout.minimumHeight: 700
+                height: parent.childHeight
-                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
                 providerBaseUrl: "https://api.groq.com/openai/v1/"
                 providerName: qsTr("Groq")
                 providerImage: "qrc:/gpt4all/icons/groq.svg"
                 providerDesc: qsTr('Groq offers a high-performance AI inference engine designed for low-latency and efficient processing. Optimized for real-time applications, Groq’s technology is ideal for users who need fast responses from open large language models and other AI workloads.<br><br>Get your API key: <a href="https://console.groq.com/keys">https://groq.com/</a>')
             }
             RemoteModelCard {
-                Layout.preferredWidth: 600
+                width: parent.childWidth
-                Layout.minimumHeight: 700
+                height: parent.childHeight
-                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
                 providerBaseUrl: "https://api.openai.com/v1/"
                 providerName: qsTr("OpenAI")
                 providerImage: "qrc:/gpt4all/icons/openai.svg"
@@ -73,18 +74,16 @@ ColumnLayout {
                 }
             }
             RemoteModelCard {
-                Layout.preferredWidth: 600
+                width: parent.childWidth
-                Layout.minimumHeight: 700
+                height: parent.childHeight
-                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
                 providerBaseUrl: "https://api.mistral.ai/v1/"
                 providerName: qsTr("Mistral")
                 providerImage: "qrc:/gpt4all/icons/mistral.svg"
                 providerDesc: qsTr('Mistral AI specializes in efficient, open-weight language models optimized for various natural language processing tasks. Their models are designed for flexibility and performance, making them a solid option for applications requiring scalable AI solutions.<br><br>Get your API key: <a href="https://mistral.ai/">https://mistral.ai/</a>')
             }
             RemoteModelCard {
-                Layout.preferredWidth: 600
+                width: parent.childWidth
-                Layout.minimumHeight: 700
+                height: parent.childHeight
-                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
                 providerIsCustom: true
                 providerName: qsTr("Custom")
                 providerImage: "qrc:/gpt4all/icons/antenna_3.svg"

gpt4all-chat/qml/RemoteModelCard.qml

@@ -20,7 +20,7 @@ import localdocs
 Rectangle {
     property alias providerName: providerNameLabel.text
     property alias providerImage: myimage.source
-    property alias providerDesc: providerDescLabel.helpText
+    property alias providerDesc: providerDescLabel.text
     property string providerBaseUrl: ""
     property bool providerIsCustom: false
     property var filterModels: function(names) {
@@ -31,7 +31,7 @@ Rectangle {
     radius: 10
     border.width: 1
     border.color: theme.controlBorder
-    implicitHeight: topColumn.height + bottomColumn.height + 60
+    implicitHeight: topColumn.height + bottomColumn.height + 33 * theme.fontScale
 
     ColumnLayout {
         id: topColumn
@@ -39,30 +39,22 @@ Rectangle {
         anchors.right: parent.right
         anchors.top: parent.top
         anchors.margins: 20
-        spacing: 30
+        spacing: 15 * theme.fontScale
         RowLayout {
             Layout.alignment: Qt.AlignTop
             spacing: 10
-            Rectangle {
+            Item {
-                id: rec
+                Layout.preferredWidth: 27 * theme.fontScale
-                color: "transparent"
+                Layout.preferredHeight: 27 * theme.fontScale
-                Layout.preferredWidth: 48
-                Layout.preferredHeight: 48
                 Layout.alignment: Qt.AlignLeft
+
                 Image {
                     id: myimage
                     anchors.centerIn: parent
-                    sourceSize.width: rec.width
+                    sourceSize.width: parent.width
-                    sourceSize.height: rec.height
+                    sourceSize.height: parent.height
                     mipmap: true
-                    visible: false
                     fillMode: Image.PreserveAspectFit
-
-                }
-
-                ColorOverlay {
-                    anchors.fill: myimage
-                    source: myimage
                 }
             }
 
@@ -73,9 +65,19 @@ Rectangle {
             }
         }
 
-        MySettingsLabel {
+        Label {
             id: providerDescLabel
-            onLinkActivated: function(link) { Qt.openUrlExternally(link) }
+            Layout.fillWidth: true
+            wrapMode: Text.Wrap
+            color: theme.settingsTitleTextColor
+            font.pixelSize: theme.fontSizeLarge
+            onLinkActivated: function(link) { Qt.openUrlExternally(link); }
+
+            MouseArea {
+                anchors.fill: parent
+                acceptedButtons: Qt.NoButton // pass clicks to parent
+                cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
+            }
         }
     }
 
@@ -98,6 +100,7 @@ Rectangle {
             MyTextField {
                 id: apiKeyField
                 Layout.fillWidth: true
+                font.pixelSize: theme.fontSizeLarge
                 wrapMode: Text.WrapAnywhere
                 function showError() {
                     messageToast.show(qsTr("ERROR: $API_KEY is empty."));
@@ -128,6 +131,7 @@ Rectangle {
             MyTextField {
                 id: baseUrlField
                 Layout.fillWidth: true
+                font.pixelSize: theme.fontSizeLarge
                 wrapMode: Text.WrapAnywhere
                 function showError() {
                     messageToast.show(qsTr("ERROR: $BASE_URL is empty."));
@@ -152,6 +156,7 @@ Rectangle {
             MyTextField {
                 id: modelNameField
                 Layout.fillWidth: true
+                font.pixelSize: theme.fontSizeLarge
                 wrapMode: Text.WrapAnywhere
                 function showError() {
                     messageToast.show(qsTr("ERROR: $MODEL_NAME is empty."))