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