diff --git a/kdeplasma-addons/applets/colorpicker/package/contents/ui/main.qml b/kdeplasma-addons/applets/colorpicker/package/contents/ui/main.qml
index 98b58960f..1ffbb424b 100644
--- a/kdeplasma-addons/applets/colorpicker/package/contents/ui/main.qml
+++ b/kdeplasma-addons/applets/colorpicker/package/contents/ui/main.qml
@@ -108,7 +108,7 @@ Item {
     }
 
     Plasmoid.compactRepresentation: Grid {
-        readonly property int buttonSize: root.isVertical ? width : height
+        readonly property int buttonSize: root.isVertical ? Math.min(width, (height * 2) + spacer.height) : Math.min(height, (width - spacer.width) / 2)
 
         columns: root.isVertical ? 1 : 3
         rows: root.isVertical ? 3 : 1
@@ -135,10 +135,10 @@ Item {
         Item { // spacer
             id: spacer
 
-            readonly property int thickness: Math.ceil(Math.min(parent.width, parent.height) / units.iconSizes.small)
+            readonly property int thickness: Math.ceil(buttonSize / units.iconSizes.small)
 
-            width: root.isVertical ? parent.width : thickness
-            height: root.isVertical ? thickness : parent.height
+            width: root.isVertical ? buttonSize : thickness
+            height: root.isVertical ? thickness : buttonSize
 
             Rectangle {
                 anchors.centerIn: parent