🐛 Fix radio buttons UI for boolean operations

frontend/src/app/main/ui/components/radio_buttons.scss

@@ -21,7 +21,6 @@
   flex-grow: 1;
   border-radius: $s-8;
   box-sizing: border-box;
-  border: $s-2 solid var(--radio-btn-border-color);
   input {
     display: none;
   }

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

@@ -85,13 +85,11 @@
                            :title (str (tr "exclude") " (" (sc/get-tooltip :bool-exclude) ")")
                            :id "bool-opt-exclude"}]]]
 
-       [:div {:class (stl/css :bool-group)}
+       [:button
-        [:button
+        {:title (tr "workspace.shape.menu.flatten")
-         {:title (tr "workspace.shape.menu.flatten")
+         :class (stl/css-case
-          :class (stl/css-case
+                 :flatten-button true
-                  :flatten-button true
+                 :disabled disabled-flatten)
-                  :disabled disabled-flatten)
+         :disabled disabled-flatten
-          :disabled disabled-flatten
+         :on-click flatten-objects}
-          :on-click flatten-objects}
+        flatten-icon]])))
-         flatten-icon]]])))
-

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

@@ -7,15 +7,16 @@
 @import "refactor/common-refactor.scss";
 
 .boolean-options {
-  display: flex;
+  display: grid;
-  gap: $s-4;
+  grid-template-columns: repeat(8, $s-28);
+  column-gap: $s-4;
   height: $s-32;
-  margin: 0 calc(-1 * $s-2);
 }
 
 .bool-group {
-  display: flex;
+  display: grid;
-  align-items: center;
+  grid-template-columns: subgrid;
+  grid-column: 1 / span 4;
 }
 
 .flatten-button {
@@ -23,6 +24,7 @@
   height: $s-32;
   width: $s-32;
   border-radius: $br-8;
+  grid-column: 5 / span 1;
   --flatten-icon-foreground-color: var(--icon-foreground);
 
   &.disabled {