From 4097dec5a4cdb46f542150d4b899fd5c4558ffa7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Tue, 20 Feb 2024 13:00:54 +0100
Subject: [PATCH] :bug: Fix radio buttons UI for boolean operations

---
 .../app/main/ui/components/radio_buttons.scss  |  1 -
 .../workspace/sidebar/options/menus/bool.cljs  | 18 ++++++++----------
 .../workspace/sidebar/options/menus/bool.scss  | 12 +++++++-----
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/main/ui/components/radio_buttons.scss b/frontend/src/app/main/ui/components/radio_buttons.scss
index 62e5c612f6..e5ffacc6e9 100644
--- a/frontend/src/app/main/ui/components/radio_buttons.scss
+++ b/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;
   }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs
index c2baaf769a..882cd276d1 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs
+++ b/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
-         {:title (tr "workspace.shape.menu.flatten")
-          :class (stl/css-case
-                  :flatten-button true
-                  :disabled disabled-flatten)
-          :disabled disabled-flatten
-          :on-click flatten-objects}
-         flatten-icon]]])))
-
+       [:button
+        {:title (tr "workspace.shape.menu.flatten")
+         :class (stl/css-case
+                 :flatten-button true
+                 :disabled disabled-flatten)
+         :disabled disabled-flatten
+         :on-click flatten-objects}
+        flatten-icon]])))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
index bc26d5b8be..a325143a92 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
@@ -7,15 +7,16 @@
 @import "refactor/common-refactor.scss";
 
 .boolean-options {
-  display: flex;
-  gap: $s-4;
+  display: grid;
+  grid-template-columns: repeat(8, $s-28);
+  column-gap: $s-4;
   height: $s-32;
-  margin: 0 calc(-1 * $s-2);
 }
 
 .bool-group {
-  display: flex;
-  align-items: center;
+  display: grid;
+  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 {