From a5c8063b2c73e61272dc7c8b69f22e3f1a3e8884 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Wed, 21 May 2025 16:50:01 +0200
Subject: [PATCH] :bug: Fix presets menu alignment

---
 .../src/app/main/ui/components/radio_buttons.cljs     |  4 ++--
 .../ui/workspace/sidebar/options/menus/measures.cljs  |  4 +++-
 .../ui/workspace/sidebar/options/menus/measures.scss  | 11 ++++++++---
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/main/ui/components/radio_buttons.cljs b/frontend/src/app/main/ui/components/radio_buttons.cljs
index c51aa6ab4..fea5507b1 100644
--- a/frontend/src/app/main/ui/components/radio_buttons.cljs
+++ b/frontend/src/app/main/ui/components/radio_buttons.cljs
@@ -64,7 +64,7 @@
         nitems    (if (array? children)
                     (alength children)
                     1)
-
+        ;; FIXME: we should handle this with CSS
         width     (mf/with-memo [nitems]
                     (if (= wide true)
                       "unset"
@@ -100,6 +100,6 @@
 
     [:& (mf/provider context) {:value context-value}
      [:div {:class (dm/str class " " (stl/css :radio-btn-wrapper))
-            :style {:width width}
+            :style {:width  width}
             :key (dm/str name "-" selected)}
       children]]))
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 870b0b29c..4b034954c 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
@@ -326,7 +326,9 @@
 
         [:& radio-buttons {:selected (or (d/name orientation) "")
                            :on-change on-orientation-change
-                           :name "frame-otientation"}
+                           :name "frame-orientation"
+                           :wide true
+                           :class (stl/css :radio-buttons)}
          [:& radio-button {:icon i/size-vertical
                            :value "vert"
                            :id "size-vertical"}]
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 5356adb37..888f51bec 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
@@ -12,21 +12,22 @@
   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);
+  --input-width: calc(var(--sp-xxxl) * 3.5 - 2 * var(--sp-xs));
   grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
   column-gap: var(--sp-xs);
 }
 
 .presets {
   display: grid;
-  grid-template-columns: 1fr auto 38px;
-  align-items: flex-start;
+  grid-column: 1 / -1;
+  grid-template-columns: repeat(8, var(--sp-xxxl));
   gap: $s-4;
 }
 
 .presets-wrapper {
   @extend .asset-element;
   position: relative;
+  grid-column: span 4;
   display: flex;
   height: $s-32;
   padding: $s-8;
@@ -49,6 +50,10 @@
   }
 }
 
+.radio-buttons {
+  grid-column: span 2;
+}
+
 .select-name {
   @include bodySmallTypography;
   display: flex;