🐛 Fix presets menu alignment

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]]))

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"}]

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;