lock: adjustments for smaller screens

modules/lock/WeatherInfo.qml

@@ -59,8 +59,13 @@ ColumnLayout {
             }
         }
 
-        ColumnLayout {
+        Loader {
             Layout.rightMargin: Appearance.padding.smaller
+            asynchronous: true
+            active: root.width > 400
+            visible: active
+
+            sourceComponent: ColumnLayout {
                 spacing: Appearance.spacing.small
 
                 StyledText {
@@ -87,6 +92,7 @@ ColumnLayout {
                 }
             }
         }
+    }
 
     RowLayout {
         Layout.topMargin: Appearance.spacing.smaller
@@ -97,14 +103,14 @@ ColumnLayout {
         Repeater {
             model: {
                 const forecast = Weather.forecast;
+                let count = root.width < 320 ? 3 : root.width < 400 ? 4 : 5;
                 if (!forecast)
                     return Array.from({
-                        length: 5
+                        length: count
                     }, () => null);
 
                 const hours = [];
                 const hour = new Date().getHours();
-                let count = 5;
 
                 const today = forecast[0].hourly;
                 const arr = [...today, ...forecast[1].hourly];