From 2b21401368566cbd54c8f9d683e474d6a530559e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Wed, 21 May 2025 16:57:32 +0200
Subject: [PATCH] :bug: Fix clip buttons size

---
 CHANGES.md                                             |  2 ++
 .../ui/workspace/sidebar/options/menus/measures.cljs   | 10 ++++------
 .../ui/workspace/sidebar/options/menus/measures.scss   |  4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index a861d1e51a..8ba413fe12 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -82,6 +82,8 @@ A non exhaustive list of changes:
 
 ### :bug: Bugs fixed
 
+- Fix spacing / sizes of different elements in the measurements section of the design tab [Taiga #11076](https://tree.taiga.io/project/penpot/issue/11076)
+
 
 ## 2.7.0 (Unreleased)
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index 4b034954cb..78a2b3481e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -24,6 +24,7 @@
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.foundations.assets.icon :as ds-i]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.menus.border-radius :refer  [border-radius-menu*]]
@@ -66,9 +67,6 @@
     :svg-raw generic-options
     :text    generic-options))
 
-(def ^:private clip-content-icon (i/icon-xref :clip-content (stl/css :checkbox-button)))
-(def ^:private play-icon (i/icon-xref :play (stl/css :checkbox-button)))
-
 (defn select-measure-keys
   "Consider some shapes can be drawn from bottom to top or from left to right"
   [shape]
@@ -427,7 +425,8 @@
                     :title (tr "workspace.options.clip-content")
                     :class (stl/css-case  :clip-content-label true
                                           :selected (not (:show-content values)))}
-            clip-content-icon]])
+
+            [:> ds-i/icon* {:icon-id ds-i/clip-content}]]])
         (when (options :show-in-viewer)
           [:div {:class (stl/css :show-in-viewer)}
            [:input {:type "checkbox"
@@ -441,5 +440,4 @@
                     :title (tr "workspace.options.show-in-viewer")
                     :class (stl/css-case  :clip-content-label true
                                           :selected (not (:hide-in-viewer values)))}
-            [:span {:class (stl/css :icon)}
-             play-icon]]])])]))
+            [:> ds-i/icon* {:icon-id ds-i/play}]]])])]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
index 888f51bec1..20e51d1097 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
@@ -177,8 +177,8 @@
 
 .clip-content-label {
   @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
+  height: var(--sp-xxxl);
+  width: var(--sp-xxxl);
   border-radius: $br-8;
 }