diff --git a/gui/ui/app.slint b/gui/ui/app.slint
index c31b297..450b8a4 100644
--- a/gui/ui/app.slint
+++ b/gui/ui/app.slint
@@ -179,21 +179,22 @@ component GoodsListAdd {
 
 component GoodButtons inherits ScrollView {
     in property <[string]> favorites: ["Mjölk", "Ost", "Ägg", "Bullens", "Oboy", "Mjöl", "Havregryn", "KrosTom"];
-    in property <int> button-width: 100;
-    in property <int> button-height: 60;
-    in property <int> button-spacing: 10;
+    in property <length> button-min-width: 100pt;
+    in property <length> button-height: 60pt;
+    in property <length> button-spacing: 10pt;
 
-    property <int> count-x: floor(root.width / 1pt / (button-width + button-spacing));
+    property <int> count-x: floor(root.width / (button-min-width + button-spacing));
     property <int> count-y: ceil(favorites.length / count-x);
+    property <length> button-width: ((self.width + button-spacing ) / count-x) - button-spacing;
 
-    viewport-height: (count-y * (button-height + button-spacing)) * 1pt;
+    viewport-height: (count-y * (button-height + button-spacing));
     mouse-drag-pan-enabled: true;
 
     for item[idx] in favorites: Button {
-        x: floor(mod(idx, count-x)) * (root.button-width + root.button-spacing) * 1pt;
-        y: floor(idx / count-x) * (root.button-height + root.button-spacing) * 1pt;
-        width: root.button-width * 1pt;
-        height: root.button-height * 1pt;
+        x: floor(mod(idx, count-x)) * (root.button-width + root.button-spacing);
+        y: floor(idx / count-x) * (root.button-height + root.button-spacing);
+        width: root.button-width;
+        height: root.button-height;
         text: item;
         clicked => {
             State.add-to-list(item);