mailview relayout when we can't fit it all nicely

2 files changed, 20 insertions, 9 deletions

diff --git a/components/kube/contents/ui/Kube.qml b/components/kube/contents/ui/Kube.qml
index d94449ba..a11d6e2f 100644
--- a/components/kube/contents/ui/Kube.qml
+++ b/components/kube/contents/ui/Kube.qml
@@ -28,6 +28,7 @@ Controls2.ApplicationWindow {
     id: app
 
     property int sidebarWidth: Kube.Units.gridUnit + Kube.Units.largeSpacing
+    property bool small: app.width < Kube.Units.gridUnit * 50
 
     height: Screen.desktopAvailableHeight * 0.8
     width: Screen.desktopAvailableWidth * 0.8
diff --git a/components/kube/contents/ui/MailView.qml b/components/kube/contents/ui/MailView.qml
index 4bcb9b44..0c955fc6 100644
--- a/components/kube/contents/ui/MailView.qml
+++ b/components/kube/contents/ui/MailView.qml
@@ -26,11 +26,13 @@ import QtQuick.Layouts 1.1
 import org.kube.framework 1.0 as Kube
 
 FocusScope {
-    SplitView {
+    RowLayout {
         anchors.fill: parent
+        spacing: 1
         Rectangle {
             width: Kube.Units.gridUnit * 10
-            Layout.minimumWidth: Kube.Units.gridUnit * 5
+            Layout.fillHeight: parent.height
+            visible: !app.small
 
             color: Kube.Colors.textColor
 
@@ -95,18 +97,26 @@ FocusScope {
             }
         }
 
-        Kube.MailListView  {
-            id: mailListView
-            width: Kube.Units.gridUnit * 20
-            height: parent.height
-            activeFocusOnTab: true
-            Layout.minimumWidth: Kube.Units.gridUnit * 10
+        Rectangle {
+            Layout.preferredWidth: app.small ? Kube.Units.gridUnit * 12 :  Kube.Units.gridUnit * 20
+            Layout.fillHeight: parent.height
+
+            color: "transparent"
+            border.width: 1
+            border.color: Kube.Colors.buttonColor
+
+            Kube.MailListView  {
+                id: mailListView
+                anchors.fill: parent
+                activeFocusOnTab: true
+                Layout.minimumWidth: Kube.Units.gridUnit * 10
+            }
         }
 
         Kube.ConversationView {
             id: mailView
             Layout.fillWidth: true
-            Layout.minimumWidth: Kube.Units.gridUnit * 5
+            Layout.fillHeight: parent.height
             activeFocusOnTab: true
         }
     }