Flexible card width (#469)

* Allow for some flexibility in card width and smaller window size

* Tooltip on hovering for truncated labels

* Adjusted some margins and strings to better work with smaller window size

* Holding some string changes due to merge issues

qml/CredentialCard.qml

@@ -9,7 +9,8 @@ Pane {
 
     id: credentialCard
 
-    implicitWidth: 360
+    implicitWidth: app.width <= 360 ? app.width : 360
+
     implicitHeight: 80
 
     Material.elevation: 0
@@ -360,12 +361,19 @@ Pane {
             Label {
                 id: nameLbl
                 text: formattedName()
-                Layout.maximumWidth: 260
+                Layout.maximumWidth: app.width <= 360 ? app.width - 95 : 265
                 font.pixelSize: 14
                 elide: Text.ElideRight
                 color: credentialCardIssuer
             }
-
+            ToolTip {
+                text: qsTr(nameLbl.text)
+                delay: 1000
+                parent: nameLbl
+                visible: nameLbl.truncated && credentialCard.hovered
+                Material.foreground: toolTipForeground
+                Material.background: toolTipBackground
+            }
         }
 
         Accessible.role: Accessible.ListItem

qml/CredentialsView.qml

@@ -98,7 +98,7 @@ ScrollView {
         enabled: visible
         keyNavigationWraps: false
         model: filteredCredentials()
-        cellWidth: 362
+        cellWidth: app.width <= 360 ? app.width + 2 : 362
         cellHeight: 82
         Accessible.role: Accessible.MenuItem
         Accessible.focusable: true

qml/NewCredentialView.qml

@@ -156,7 +156,7 @@ ScrollView {
                     initialStep: !manualEntry ? 2 : 1
 
                     StyledStepperPanel {
-                        label: qsTr("Make sure QR code is fully visible on screen")
+                        label: qsTr("Make sure QR code is fully visible")
                         description: qsTr("Press the button to scan when ready.")
                         id: retryPane
                         Layout.fillWidth: true

qml/NoCredentialsSection.qml

@@ -7,7 +7,7 @@ import QtGraphicalEffects 1.0
 ColumnLayout {
 
     readonly property int dynamicWidth: 380
-    readonly property int dynamicMargin: 64
+    readonly property int dynamicMargin: 32
 
     anchors.horizontalCenter: parent.horizontalCenter
     anchors.verticalCenter: parent.verticalCenter
@@ -37,7 +37,7 @@ ColumnLayout {
         Label {
             text: qsTr("Add accounts to this YubiKey in order to be able to generate security codes from it.")
             horizontalAlignment: Qt.AlignHCenter
-            Layout.minimumWidth: 320
+            Layout.minimumWidth: 300
             Layout.maximumWidth: app.width - dynamicMargin
                                  < dynamicWidth ? app.width - dynamicMargin : dynamicWidth
             Layout.rowSpan: 1

qml/NoResultsSection.qml

@@ -7,7 +7,7 @@ import QtGraphicalEffects 1.0
 ColumnLayout {
 
     readonly property int dynamicWidth: 380
-    readonly property int dynamicMargin: 64
+    readonly property int dynamicMargin: 32
 
     anchors.horizontalCenter: parent.horizontalCenter
     anchors.verticalCenter: parent.verticalCenter
@@ -36,7 +36,7 @@ ColumnLayout {
         Label {
             text: qsTr("No accounts matching your search criteria. Check your spelling and try again.")
             horizontalAlignment: Qt.AlignHCenter
-            Layout.minimumWidth: 320
+            Layout.minimumWidth: 300
             Layout.maximumWidth: app.width - dynamicMargin
                                  < dynamicWidth ? app.width - dynamicMargin : dynamicWidth
             Layout.rowSpan: 1

qml/NoYubiKeySection.qml

@@ -7,7 +7,7 @@ import QtGraphicalEffects 1.0
 ColumnLayout {
 
     readonly property int dynamicWidth: 600
-    readonly property int dynamicMargin: 64
+    readonly property int dynamicMargin: 32
 
     anchors.horizontalCenter: parent.horizontalCenter
     anchors.verticalCenter: parent.verticalCenter
@@ -51,7 +51,7 @@ ColumnLayout {
                 }
             }
             visible: (yubiKey.availableDevices.length > 0 && !yubiKey.availableDevices.some(dev => dev.selectable))
-            Layout.minimumWidth: 320
+            Layout.minimumWidth: 300
             Layout.maximumWidth: app.width - dynamicMargin
                                  < dynamicWidth ? app.width - dynamicMargin : dynamicWidth
             horizontalAlignment: Qt.AlignHCenter
@@ -76,7 +76,7 @@ ColumnLayout {
         Label {
             text: settings.useCustomReader ? qsTr("Interface: CCID - Custom reader") : qsTr("Interface: OTP")
             visible: settings.useCustomReader || settings.otpMode
-            Layout.minimumWidth: 320
+            Layout.minimumWidth: 300
             Layout.maximumWidth: app.width - dynamicMargin
                                  < dynamicWidth ? app.width - dynamicMargin : dynamicWidth
             horizontalAlignment: Qt.AlignHCenter
@@ -93,7 +93,7 @@ ColumnLayout {
                 return t
             }
             visible: settings.useCustomReader
-            Layout.minimumWidth: 320
+            Layout.minimumWidth: 300
             Layout.maximumWidth: app.width - dynamicMargin
                                  < dynamicWidth ? app.width - dynamicMargin : dynamicWidth
             horizontalAlignment: Qt.AlignHCenter

qml/main.qml

@@ -11,9 +11,9 @@ ApplicationWindow {
 
     id: app
 
-    width: 360
+    width: 300
     height: 620
-    minimumWidth: 360
+    minimumWidth: 300
     minimumHeight: 208
     visible: false