🐛 Fix measures inputs' alignment

frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs

@@ -1,6 +1,7 @@
 (ns app.main.ui.workspace.sidebar.options.menus.border-radius
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.data.macros :as dm]
    [app.common.types.shape.radius :as ctsr]
    [app.main.data.workspace.shapes :as dwsh]
    [app.main.store :as st]
@@ -17,10 +18,10 @@
   [shape]
   (= (:r1 shape) (:r2 shape) (:r3 shape) (:r4 shape)))
 
-(mf/defc border-radius-menu
-  {::mf/wrap-props false
+(mf/defc border-radius-menu*
+  {::mf/props :obj
    ::mf/wrap [mf/memo]}
-  [{:keys [ids ids-with-children values]}]
+  [{:keys [class ids ids-with-children values]}]
   (let [all-equal?       (all-equal? values)
         radius-expanded* (mf/use-state false)
         radius-expanded  (deref radius-expanded*)
@@ -75,7 +76,7 @@
     (mf/with-effect [ids]
       (reset! radius-expanded* false))
 
-    [:div {:class (stl/css :radius)}
+    [:div {:class (dm/str class " " (stl/css :radius))}
      (if (not radius-expanded)
        [:div {:class (stl/css :radius-1)
               :title (tr "workspace.options.radius")}

frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.scss

@@ -7,30 +7,25 @@
 @import "refactor/common-refactor.scss";
 
 .radius {
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: $s-4;
+  display: grid;
+  grid-template-columns: subgrid;
+  gap: var(--sp-xs);
 }
 
 .radius-1 {
   @extend .input-element;
   @include bodySmallTypography;
-  width: $s-108;
-  position: relative;
 }
 
 .radius-4 {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: $s-4;
+  gap: var(--sp-xs);
 }
 
 .small-input {
   @extend .input-element;
   @include bodySmallTypography;
-  width: $s-52;
-  margin-block-end: 0;
 }
 
 .selected {

frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs

@@ -26,7 +26,7 @@
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [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]]
+   [app.main.ui.workspace.sidebar.options.menus.border-radius :refer  [border-radius-menu*]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [clojure.set :as set]
@@ -68,8 +68,6 @@
 
 (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)))
-(def ^:private locked-icon (i/icon-xref :detach (stl/css :lock-ratio-icon)))
-(def ^:private unlocked-icon (i/icon-xref :detached (stl/css :lock-ratio-icon)))
 
 (defn select-measure-keys
   "Consider some shapes can be drawn from bottom to top or from left to right"
@@ -365,14 +363,13 @@
                              :disabled disabled-height-sizing?
                              :class (stl/css :numeric-input)
                              :value (:height values)}]]
-        [:button {:class (stl/css-case
-                          :lock-size-btn true
-                          :selected (true? proportion-lock)
-                          :disabled (= proportion-lock :multiple))
-                  :on-click on-proportion-lock-change}
-         (if proportion-lock
-           locked-icon
-           unlocked-icon)]])
+
+        [:> icon-button* {:variant "ghost"
+                          :icon (if proportion-lock "lock" "unlock")
+                          :class (stl/css-case :selected (true? proportion-lock))
+                          :disabled (= proportion-lock :multiple)
+                          :aria-label (if proportion-lock (tr "workspace.options.size.unlock") (tr "workspace.options.size.lock"))
+                          :on-click on-proportion-lock-change}]])
      (when (options :position)
        [:div {:class (stl/css :position)}
         [:div {:class (stl/css-case :x-position true
@@ -412,7 +409,7 @@
              :class (stl/css :numeric-input)
              :value (:rotation values)}]])
         (when (options :radius)
-          [:& border-radius-menu {:ids ids :ids-with-children ids-with-children :values values :shape shape}])])
+          [:> border-radius-menu* {:class (stl/css :border-radius) :ids ids :ids-with-children ids-with-children :values values :shape shape}])])
      (when (or (options :clip-content) (options :show-in-viewer))
        [:div {:class (stl/css :clip-show)}
         (when (options :clip-content)

frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss

@@ -7,8 +7,14 @@
 @import "refactor/common-refactor.scss";
 
 .element-set {
-  @include flexColumn;
-  margin-bottom: $s-8;
+  display: grid;
+  row-gap: var(--sp-xs);
+  margin-bottom: var(--sp-s);
+  // NOTE: this does not follow the 8-column grid and the size is not normalized,
+  // so we need to hardcode this width :(
+  --input-width: calc(var(--sp-xxxl) * 3.5);
+  grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
+  column-gap: var(--sp-xs);
 }
 
 .presets {
@@ -108,16 +114,21 @@
   }
 }
 
-.size {
-  @include flexRow;
-  position: relative;
+.size,
+.position,
+.rotation-radius {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1/-1;
 }
 
 .height,
-.width {
+.width,
+.x-position,
+.y-position,
+.rotation {
   @extend .input-element;
   @include bodySmallTypography;
-  width: $s-108;
   .icon-text {
     padding-top: $s-1;
   }
@@ -126,6 +137,10 @@
   }
 }
 
+.border-radius {
+  grid-column: 2/-1;
+}
+
 .lock-size-btn {
   @extend .button-tertiary;
   border-radius: $br-8;
@@ -141,39 +156,6 @@
   stroke: var(--icon-foreground);
 }
 
-.position {
-  @include flexRow;
-}
-
-.x-position,
-.y-position {
-  @extend .input-element;
-  @include bodySmallTypography;
-  width: $s-108;
-  .icon-text {
-    padding-top: $s-1;
-  }
-  &.disabled {
-    @extend .disabled-input;
-  }
-}
-
-.rotation-radius {
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: $s-4;
-}
-
-.rotation {
-  @extend .input-element;
-  @include bodySmallTypography;
-  width: $s-108;
-  .icon-text {
-    padding-top: $s-1;
-  }
-}
-
 .clip-show {
   display: flex;
   align-items: flex-start;