From 7a33d2c2253ef8409b8b0229647265ff94f0606a Mon Sep 17 00:00:00 2001
From: ivan <ivanminutillo@outlook.it>
Date: Mon, 18 Nov 2024 13:22:14 +0100
Subject: [PATCH] boundary ux

---
 lib/web/boundaries_live_handler.ex            |   2 +-
 lib/web/components/acls/acl_live.ex           |   3 +-
 lib/web/components/acls/acl_live.sface        | 183 +++++++++---------
 .../display/yes_maybe_false_live.ex           |   3 +-
 .../display/yes_maybe_false_live.sface        |  77 ++++----
 .../roles/roles_dropdown_live.sface           |   8 +-
 .../roles/tabled_roles/tabled_roles_live.ex   | 107 +++++-----
 .../tabled_roles/tabled_roles_live.sface      |  24 ++-
 .../set/boundaries_general_access_live.sface  |   2 +-
 .../components/set/boundary_items_live.sface  |   2 +-
 .../set/set_boundaries_button_live.sface      |   6 +-
 .../components/set/set_boundaries_live.sface  |   2 +-
 12 files changed, 224 insertions(+), 195 deletions(-)

diff --git a/lib/web/boundaries_live_handler.ex b/lib/web/boundaries_live_handler.ex
index 60827de..fec1892 100644
--- a/lib/web/boundaries_live_handler.ex
+++ b/lib/web/boundaries_live_handler.ex
@@ -753,7 +753,7 @@ defmodule Bonfire.Boundaries.LiveHandler do
       (circles || [])
       |> Enum.map(fn
         {circle, roles} ->
-          Enum.map(roles, &{e(known_circles, id(circle), nil) || circle, &1})
+          Enum.map(roles, &{ed(known_circles, id(circle), nil) || circle, &1})
       end)
       |> List.flatten()
       |> debug("computed")
diff --git a/lib/web/components/acls/acl_live.ex b/lib/web/components/acls/acl_live.ex
index 87f55ce..300a889 100644
--- a/lib/web/components/acls/acl_live.ex
+++ b/lib/web/components/acls/acl_live.ex
@@ -218,8 +218,7 @@ defmodule Bonfire.UI.Boundaries.Web.AclLive do
     end
   end
 
-  def handle_event("edit_grant_role", %{"to_circles" => subjects} = _attrs, socket) do
-    # debug(attrs)
+  def handle_event("edit_grant_role", %{"to_circles" => subjects} = attrs, socket) do
     current_user = current_user_required!(socket)
     acl = e(assigns(socket), :acl, nil)
     scope = e(assigns(socket), :scope, nil)
diff --git a/lib/web/components/acls/acl_live.sface b/lib/web/components/acls/acl_live.sface
index d6b2f67..9bdf77a 100644
--- a/lib/web/components/acls/acl_live.sface
+++ b/lib/web/components/acls/acl_live.sface
@@ -21,7 +21,10 @@
       </section>
     {#match nil}
       <div>
-        <div :if={!@setting_boundaries} class="p-4 border-b border-base-content/10">
+        <div
+          :if={!@setting_boundaries && e(@acl, :extra_info, :summary, nil)}
+          class="p-4 border-b border-base-content/10"
+        >
           <span class="text-base-content/70">
             {e(@acl, :extra_info, :summary, "No description provided for this boundary preset.")}
           </span>
@@ -76,87 +79,102 @@
                   <form id="edit_grants" :on-change="edit_grant_role">
                     <ul class="flex flex-col divide-y divide-base-content/10">
                       <li
+                        x-data="{open: false}"
                         :for={{{subject_id, %{subject: subject, grants: grants} = _subject_verb_grants}, _i} <-
                           Enum.with_index(@feed_by_subject || [])}
-                        class="flex items-center justify-between p-4"
+                        class="flex flex-col"
                       >
-                        {#if e(subject, :profile, :id, nil)}
-                          <StatelessComponent
-                            module={maybe_component(Bonfire.UI.Me.ProfileItemLive)}
-                            profile={e(subject, :profile, nil)}
-                            avatar_class="w-10 h-10 rounded-full"
-                            character={e(subject, :character, nil)}
-                            show_controls={[]}
-                            with_summary
-                          />
-                        {#else}
-                          <div class="flex items-center gap-3">
-                            <span class="flex items-center w-10 h-10 rounded-full place-content-center bg-info/10">
-                              <#Icon iconify="pajamas:group" class="inline-block w-5 h-5 text-base-content" />
-                            </span>
-                            <div class="flex flex-col">
-                              <div class="text-base truncate max-w-[160px] font-semibold text-base-content">{LiveHandler.subject_name(subject)}</div>
-                              <!-- <div class="text-sm truncate max-w-[160px] text-base-content/70">{LiveHandler.subject_summary(subject)}</div> -->
-                            </div>
-                          </div>
-                        {/if}
-
-                        <div class="flex items-center gap-2">
-                          {#if !@read_only}
-                            <Bonfire.UI.Boundaries.Web.RolesDropdownLive
-                              circle_id={subject_id}
-                              scope={@scope}
-                              usage={@usage}
-                              setting_boundaries={@setting_boundaries}
-                              role={Bonfire.Boundaries.Roles.role_from_grants(Map.values(grants || %{}),
-                                scope: @scope,
-                                current_user: current_user(@__context__)
-                              )
-                              |> debug("the role")}
-                              extra_roles={[{:custom, l("Custom")}]}
-                              no_actions
+                        <div class="flex items-center justify-between p-4">
+                          {#if e(subject, :profile, :id, nil)}
+                            <StatelessComponent
+                              module={maybe_component(Bonfire.UI.Me.ProfileItemLive)}
+                              profile={e(subject, :profile, nil)}
+                              avatar_class="w-10 h-10 rounded-full"
+                              character={e(subject, :character, nil)}
+                              show_controls={[]}
+                              with_summary
                             />
-
-                            <Bonfire.UI.Common.OpenModalLive
-                              id={"remove_from_acl_#{uid(subject)}"}
-                              title_text={l("Remove from boundary preset")}
-                              no_actions
-                              open_btn_wrapper_class="flex flex-1 w-full"
-                            >
-                              <div class="prose prose-sm mt-2">
-                                {l("Are you sure to remove %{subject_name} from '%{boundary_name}' boundary preset?",
-                                  subject_name: LiveHandler.subject_name(subject),
-                                  boundary_name: e(@acl, :named, :name, nil) || e(@acl, :stereotyped, :named, :name, nil)
-                                )}
-                              </div>
-                              <button
-                                data-role="remove_from_boundary_btn"
-                                phx-click={JS.push("remove_from_acl",
-                                  value: %{
-                                    subject_id: subject_id
-                                  },
-                                  target: @myself
-                                )}
-                                class="w-full mt-3 normal-case btn btn-error"
-                                type="button"
-                              >
-                                {l("Remove")}
-                              </button>
-                              <:open_btn>
-                                <button type="button" data-role="remove_from_boundary_modal" class="btn-outline btn btn-circle">
-                                  <#Icon iconify="ic:baseline-minus" class="w-4 h-4" />
-                                </button>
-                              </:open_btn>
-                            </Bonfire.UI.Common.OpenModalLive>
                           {#else}
-                            <button type="disabled" disabled class="btn btn-disabled btn-sm">
-                              {Bonfire.Boundaries.Roles.role_from_grants(Map.values(grants || %{}),
-                                scope: @scope,
-                                current_user: current_user(@__context__),
-                                fallback_to_list: true
+                            <div class="flex items-center gap-3">
+                              <span class="flex items-center w-10 h-10 rounded-full place-content-center bg-info/10">
+                                <#Icon iconify="pajamas:group" class="inline-block w-5 h-5 text-base-content" />
+                              </span>
+                              <div class="flex flex-col">
+                                <div class="text-base truncate max-w-[160px] font-semibold text-base-content">{LiveHandler.subject_name(subject)}</div>
+                                <!-- <div class="text-sm truncate max-w-[160px] text-base-content/70">{LiveHandler.subject_summary(subject)}</div> -->
+                              </div>
+                            </div>
+                          {/if}
+
+                          <div class="flex items-center gap-2">
+                            <button x-on:click="open = !open" type="button" x-cloak class="btn btn-neutral btn-sm">
+                              {Recase.to_title(
+                                to_string(
+                                  Bonfire.Boundaries.Roles.role_from_grants(Map.values(grants || %{}),
+                                    scope: @scope,
+                                    current_user: current_user(@__context__)
+                                  )
+                                )
                               )}
                             </button>
-                          {/if}
+                            {#if !@read_only}
+                              <span>
+                                <Bonfire.UI.Common.OpenModalLive
+                                  id={"remove_from_acl_#{uid(subject)}"}
+                                  title_text={l("Remove from boundary preset")}
+                                  no_actions
+                                  open_btn_wrapper_class="flex flex-1 w-full"
+                                >
+                                  <div class="prose prose-sm mt-2">
+                                    {l("Are you sure to remove %{subject_name} from '%{boundary_name}' boundary preset?",
+                                      subject_name: LiveHandler.subject_name(subject),
+                                      boundary_name: e(@acl, :named, :name, nil) || e(@acl, :stereotyped, :named, :name, nil)
+                                    )}
+                                  </div>
+                                  <button
+                                    data-role="remove_from_boundary_btn"
+                                    phx-click={JS.push("remove_from_acl",
+                                      value: %{
+                                        subject_id: subject_id
+                                      },
+                                      target: @myself
+                                    )}
+                                    class="w-full mt-3 normal-case btn btn-error"
+                                    type="button"
+                                  >
+                                    {l("Remove")}
+                                  </button>
+                                  <:open_btn>
+                                    <button
+                                      type="button"
+                                      data-role="remove_from_boundary_modal"
+                                      class="btn-outline btn-xs btn btn-circle"
+                                    >
+                                      <#Icon iconify="ic:baseline-minus" class="w-4 h-4" />
+                                    </button>
+                                  </:open_btn>
+                                </Bonfire.UI.Common.OpenModalLive>
+                              </span>
+                            {/if}
+                          </div>
+                        </div>
+                        <div x-show="open" x-cloak x-collapse class="mt-0 m-3 p-3 rounded-lg shadow bg-base-content/5">
+                          <div class="font-semibold text-sm text-base-content/70 py-2 pb-4">{l("Assign a role to %{subject_name}", subject_name: LiveHandler.subject_name(subject))}</div>
+                          <Bonfire.UI.Boundaries.Web.TabledRolesLive
+                            id={LiveHandler.subject_name(subject)}
+                            scope={@scope}
+                            read_only
+                            selectable
+                            circle_id={subject_id}
+                            event_target={@myself}
+                            role={Bonfire.Boundaries.Roles.role_from_grants(Map.values(grants || %{}),
+                              scope: @scope,
+                              current_user: current_user(@__context__)
+                            )
+                            |> debug("the role")}
+                            roles={Bonfire.Boundaries.Roles.roles_for_dropdown(@usage, scope: @scope, context: @__context__)}
+                          />
+                          <!-- roles={Bonfire.Boundaries.Roles.roles_for_dropdown(@usage, scope: @scope, context: @__context__)} -->
                         </div>
                       </li>
                     </ul>
@@ -164,21 +182,6 @@
                 {/if}
               </div>
             </div>
-            <style>
-              .boundaries-switches label div.btn {
-              color: oklch(var(--bc));
-              }
-              .boundaries-switches label input:checked ~ div.btn-yes {
-              background: oklch(var(--su) / 0.90);
-              }
-              .boundaries-switches label input:checked ~ div.btn-no {
-              background: oklch(var(--er) / 0.90);
-              }
-              .boundaries-switches label input:checked ~ div.btn-maybe {
-              background: white;
-              color: black;
-              }
-            </style>
           {/if}
         </div>
       </div>
diff --git a/lib/web/components/display/yes_maybe_false_live.ex b/lib/web/components/display/yes_maybe_false_live.ex
index dbf87f1..9b94981 100644
--- a/lib/web/components/display/yes_maybe_false_live.ex
+++ b/lib/web/components/display/yes_maybe_false_live.ex
@@ -3,7 +3,8 @@ defmodule Bonfire.UI.Boundaries.Web.YesMaybeFalseLive do
 
   prop id, :any, default: nil
   prop field_name, :any, default: nil
-
+  prop role, :any, default: nil
+  prop verb, :any, default: nil
   prop value, :any, default: nil
   prop read_only, :boolean, default: false
   prop event_target, :any, default: nil
diff --git a/lib/web/components/display/yes_maybe_false_live.sface b/lib/web/components/display/yes_maybe_false_live.sface
index 2f1c823..157d130 100644
--- a/lib/web/components/display/yes_maybe_false_live.sface
+++ b/lib/web/components/display/yes_maybe_false_live.sface
@@ -14,55 +14,54 @@
       <#Icon solid="Minus" class="w-4 h-4 text-gray-400" />
   {/case}
 {#else}
-  <div class="flex items-center gap-3 boundaries-switches">
-    <form
-      data-id={@id}
-      :on-change="edit_verb_value"
-      phx-target={@event_target}
-      class="flex items-center gap-3"
-    >
-      {!-- <input
-        :if={@value != nil}
-        value={if @value == true, do: "1", else: "0"}
-        type="checkbox"
-        name={@field_name}
+  <div class="flex items-center boundaries-switches">
+    <div class="border p-1 flex items-center gap-1 border-base-content/10 rounded-xl">
+      <button
         class={
-          "toggle toggle-md",
-          "!toggle-success": @value == true,
-          "!border-error !bg-error !text-error": @value == false
+          "text-base-content/70 p-1 rounded-lg hover:bg-base-content/10 transition-colors duration-100",
+          "bg-success hover:bg-success text-success-content": @value == :can
         }
-        checked={@value}
-      />
-      <label :if={@value != nil && !@read_only}>
-        <input
-          class="absolute opacity-0"
-          name={@field_name}
-          type="radio"
-          value=""
-          checked={is_nil(@value)}
-        />
-        <div class="btn btn-circle btn-xs">
-          <#Icon solid="X" class="w-4 h-4" />
-        </div>
-      </label>
+        phx-click="edit_verb_value"
+        phx-value-role={@role}
+        phx-value-verb={@verb}
+        phx-value-status={1}
+        phx-target={@event_target}
+      >
+        <#Icon solid="Check" class="w-4 h-4" />
+      </button>
       <button
-        :if={@value == nil && !@read_only}
         class={
-          "normal-case rounded btn btn-xs",
-          "btn-disabled": @read_only
+          "text-base-content/70 p-1 rounded-lg hover:bg-base-content/10 transition-colors duration-100",
+          "bg-neutral hover:bg-neutral text-neutral-content": @value == nil
         }
+        phx-click="edit_verb_value"
+        phx-value-role={@role}
+        phx-value-verb={@verb}
+        phx-value-status=""
+        phx-target={@event_target}
       >
-        {l("Edit")}
+        <#Icon solid="Minus" class="w-4 h-4" />
       </button>
       <button
-        :if={@value == nil && @read_only}
         class={
-          "normal-case rounded btn btn-xs",
-          "btn-disabled": @read_only
+          "text-base-content/70 p-1 rounded-lg hover:bg-base-content/10 transition-colors duration-100",
+          "bg-error hover:bg-error text-error-content": @value == :cannot
         }
+        phx-click="edit_verb_value"
+        phx-value-role={@role}
+        phx-value-verb={@verb}
+        phx-value-status={0}
+        phx-target={@event_target}
       >
-        {l("Not specified")}
-      </button> --}
+        <#Icon solid="X" class="w-4 h-4" />
+      </button>
+    </div>
+    <!-- <form
+      data-id={@id}
+      :on-change="edit_verb_value"
+      phx-target={@event_target}
+      class="flex items-center gap-3"
+    >
       <label class="tooltip tooltip-top" data-tip={if @value == true, do: l("Can")}>
         <input
           class="absolute opacity-0"
@@ -111,6 +110,6 @@
           <#Icon solid="X" class="w-4 h-4" />
         </div>
       </label>
-    </form>
+    </form> -->
   </div>
 {/if}
\ No newline at end of file
diff --git a/lib/web/components/roles/roles_dropdown_live.sface b/lib/web/components/roles/roles_dropdown_live.sface
index 6a8eb27..1426b89 100644
--- a/lib/web/components/roles/roles_dropdown_live.sface
+++ b/lib/web/components/roles/roles_dropdown_live.sface
@@ -1,4 +1,8 @@
-<select name={"#{@field}[#{@circle_id}][]"} class="select select-bordered" disabled={@read_only}>
+<select
+  name={"#{@field}[#{@circle_id}][]"}
+  class="select select-xs select-bordered"
+  disabled={@read_only}
+>
   <option value="">{l("Select role")}</option>
   <option
     :for={{id, name} <-
@@ -7,5 +11,5 @@
           (@extra_roles || [])}
     value={id}
     selected={if to_string(@role) == to_string(id), do: true}
-  >{name}</option>
+  >{Recase.to_title(to_string(id))}</option>
 </select>
diff --git a/lib/web/components/roles/tabled_roles/tabled_roles_live.ex b/lib/web/components/roles/tabled_roles/tabled_roles_live.ex
index 04606e0..4413067 100644
--- a/lib/web/components/roles/tabled_roles/tabled_roles_live.ex
+++ b/lib/web/components/roles/tabled_roles/tabled_roles_live.ex
@@ -4,6 +4,12 @@ defmodule Bonfire.UI.Boundaries.Web.TabledRolesLive do
 
   prop scope, :any, default: nil
   prop read_only, :boolean, default: false
+  prop selectable, :boolean, default: false
+  prop role, :any, default: nil
+  prop field, :atom, default: :to_circles
+  prop circle_id, :string, default: nil
+  prop roles, :map, default: nil
+  prop event_target, :any, default: nil
 
   #  FIXME: this should be in config where the verbs are defined
   @verb_order [
@@ -40,14 +46,26 @@ defmodule Bonfire.UI.Boundaries.Web.TabledRolesLive do
       (e(assigns, :scope, nil) || e(assigns(socket), :scope, nil))
       |> debug("role_scope")
 
+    roles_with_verbs =
+      e(
+        assigns,
+        :roles,
+        Bonfire.Boundaries.Roles.role_verbs(:all,
+          one_scope_only: true,
+          scope: scope,
+          current_user: current_user(socket)
+        )
+      )
+      |> get_roles_with_verbs(scope)
+      |> debug("roles_with_verbs")
+
     {:ok,
      socket
      |> assign(assigns)
      |> assign(
        scope: scope,
        verb_order: verb_order(),
-       roles_with_verbs:
-         get_roles_with_verbs(scope, current_user(socket)) |> debug("roles_with_verbs")
+       roles_with_verbs: roles_with_verbs
      )}
   end
 
@@ -79,14 +97,8 @@ defmodule Bonfire.UI.Boundaries.Web.TabledRolesLive do
   sorted according to @verb_order.
   Returns a list of tuples: [{role, verbs_with_statuses}].
   """
-  def get_roles_with_verbs(scope, current_user) do
-    Bonfire.Boundaries.Roles.role_verbs(:all,
-      one_scope_only: true,
-      scope: scope,
-      current_user: current_user
-    )
-    |> debug("got")
-    # |> List.wrap()
+  def get_roles_with_verbs(roles, scope) do
+    roles
     |> Enum.map(fn
       {role_name, role_data} when is_map(role_data) ->
         can_verbs = Map.get(role_data, :can_verbs, [])
@@ -102,50 +114,45 @@ defmodule Bonfire.UI.Boundaries.Web.TabledRolesLive do
     end)
   end
 
-  def handle_event("edit_verb_value", %{"role" => roles} = attrs, socket) do
+  def handle_event(
+        "edit_verb_value",
+        %{"role" => role, "verb" => verb, "status" => value} = attrs,
+        socket
+      ) do
     debug(attrs)
 
     current_user = current_user_required!(socket)
     scope = e(assigns(socket), :scope, nil)
-    # verb_value = List.first(Map.values(roles))
-
-    with [ok: edited] <-
-           Enum.flat_map(roles, fn {role_name, verb_value} ->
-             Enum.flat_map(verb_value, fn {verb, value} ->
-               case Types.maybe_to_atom!(verb) do
-                 nil ->
-                   [{:error, "Invalid verb"}]
-
-                 verb ->
-                   debug(scope, "edit #{role_name} -- #{verb} = #{value} - scope:")
-
-                   [
-                     Roles.edit_verb_permission(role_name, verb, value,
-                       scope: scope,
-                       current_user: current_user
-                     )
-                   ]
-               end
-             end)
-           end) do
-      {
-        :noreply,
-        socket
-        |> assign_flash(:info, l("Permission edited!"))
-        |> maybe_assign_settings(edited)
-        |> assign(
-          :role_verbs,
-          Bonfire.Boundaries.Roles.role_verbs(:all,
-            one_scope_only: assigns(socket)[:scope_type] not in [:smart_input],
-            scope: scope,
-            current_user: current_user(edited)
+
+    role = Bonfire.Common.Types.maybe_to_atom(role)
+    verb = Bonfire.Common.Types.maybe_to_atom(verb)
+    debug(scope, "edit #{role} -- #{verb} = #{value} - scope:")
+
+    case Roles.edit_verb_permission(role, verb, value,
+           scope: scope,
+           current_user: current_user
+         ) do
+      {:ok, edited} ->
+        debug(edited, "edited")
+
+        {
+          :noreply,
+          socket
+          |> assign_flash(:info, l("Permission edited!"))
+          |> maybe_assign_settings(edited)
+          |> assign(
+            :roles_with_verbs,
+            Bonfire.Boundaries.Roles.role_verbs(:all,
+              one_scope_only: assigns(socket)[:scope_type] not in [:smart_input],
+              scope: scope,
+              current_user: current_user(edited)
+            )
+            |> get_roles_with_verbs(scope)
           )
-        )
-      }
-    else
-      other ->
-        error(other)
+        }
 
+      error ->
+        error(error)
         {:noreply, assign_error(socket, l("Could not edit permission"))}
     end
   end
@@ -160,11 +167,11 @@ defmodule Bonfire.UI.Boundaries.Web.TabledRolesLive do
 
   #   socket
   #   |> assign_global(instance_settings: settings)
-  # end
+  #  end
 
   defp maybe_assign_settings(socket, %{id: _, data: data} = _scope) do
     socket
-    |> assign(role_verbs: data[:bonfire][:role_verbs])
+    |> assign(roles: data[:bonfire][:role_verbs])
   end
 
   defp maybe_assign_settings(socket, ret) do
diff --git a/lib/web/components/roles/tabled_roles/tabled_roles_live.sface b/lib/web/components/roles/tabled_roles/tabled_roles_live.sface
index 868a972..76de067 100644
--- a/lib/web/components/roles/tabled_roles/tabled_roles_live.sface
+++ b/lib/web/components/roles/tabled_roles/tabled_roles_live.sface
@@ -4,24 +4,40 @@
       <thead class="text-xs uppercase sticky top-0 z-10 bg-base-100">
         <tr>
           <th class="sticky left-0 z-20 bg-base-100/70 backdrop-blur-sm">Role</th>
-          <th class="font-medium" :for={verb <- @verb_order}>{verb}</th>
+          <th class="text-center font-medium" :for={verb <- @verb_order}>{verb}</th>
           <th class="sticky right-0 z-20 bg-base-100/70 backdrop-blur-sm" />
         </tr>
       </thead>
       <tbody>
         <tr :for={{role, verbs} <- @roles_with_verbs}>
-          <td class="sticky left-0 z-10 bg-base-100/70 backdrop-blur-sm min-w-[160px] max-w-[180px] truncate ellipsis">
+          <td class="sticky left-0 z-10 bg-base-100/70 backdrop-blur-sm min-w-[180px] flex items-center gap-2 max-w-[180px] truncate ellipsis">
+            <input
+              :if={@selectable}
+              class="radio radio-xs"
+              type="radio"
+              checked={@role == role}
+              value={to_string(role)}
+              name={"#{@field}[#{@circle_id}]"}
+              phx-target={@event_target}
+            />
             {Recase.to_title(to_string(role))}
           </td>
           {#if e(assigns, :read_only, nil) != true}
             <td :for={{verb, status} <- verbs || default_sorted_verbs()}>
-              <form :on-change="edit_verb_value" phx-target={@myself}>
+              <Bonfire.UI.Boundaries.Web.YesMaybeFalseLive
+                value={status}
+                read_only={@read_only}
+                event_target={@myself}
+                role={role}
+                verb={verb}
+              />
+              <!-- <form :on-change="edit_verb_value" phx-target={@myself}>
                 <select class="select select-bordered select-xs" name={"role[#{role}][#{verb}]"}>
                   <option selected={status == :can} value="1">Can</option>
                   <option selected={status == :cannot} value="0">Cannot</option>
                   <option selected={status == nil} value="">Undefined</option>
                 </select>
-              </form>
+              </form> -->
             </td>
           {#else}
             <td :for={{verb, status} <- verbs}>
diff --git a/lib/web/components/set/boundaries_general_access_live.sface b/lib/web/components/set/boundaries_general_access_live.sface
index 7450a98..d7ce7f7 100644
--- a/lib/web/components/set/boundaries_general_access_live.sface
+++ b/lib/web/components/set/boundaries_general_access_live.sface
@@ -25,7 +25,7 @@
             hide_custom={@hide_custom}
           />
           <:open_btn>
-            <button type="button" class="btn btn-ghost btn-xs">
+            <button type="button" class="btn btn-neutral btn-xs">
               {l("Advanced")}
               <#Icon iconify="codicon:settings" class="w-4 h-4" />
             </button>
diff --git a/lib/web/components/set/boundary_items_live.sface b/lib/web/components/set/boundary_items_live.sface
index 25e14c3..5547cb7 100644
--- a/lib/web/components/set/boundary_items_live.sface
+++ b/lib/web/components/set/boundary_items_live.sface
@@ -81,7 +81,7 @@
           },
           target: "#smart_input"
         )}
-        class="btn btn-sm btn-circle btn-ghost"
+        class="btn btn-xs btn-circle btn-ghost"
       >
         <#Icon iconify="ic:baseline-minus" class="w-4 h-4" />
       </div>
diff --git a/lib/web/components/set/set_boundaries_button_live.sface b/lib/web/components/set/set_boundaries_button_live.sface
index 2d50c2d..48a3822 100644
--- a/lib/web/components/set/set_boundaries_button_live.sface
+++ b/lib/web/components/set/set_boundaries_button_live.sface
@@ -51,11 +51,11 @@
       </div>
     </div>
   {#match boundary_name}
-    <div class="btn-active items-center rounded flex btn-ghost btn-sm !justify-start max-w-[120px] truncate cursor-default">
+    <div class="btn-active btn btn-ghost btn-sm max-w-[120px] cursor-default btn-wide">
       <span>{boundary_name}</span>
     </div>
 {/case}
-
+<!-- 
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     const dialog = document.getElementById('my_modal_5');
@@ -72,4 +72,4 @@
       }
     });
   });
-</script>
\ No newline at end of file
+</script> -->
\ No newline at end of file
diff --git a/lib/web/components/set/set_boundaries_live.sface b/lib/web/components/set/set_boundaries_live.sface
index 5a72688..995a9b8 100644
--- a/lib/web/components/set/set_boundaries_live.sface
+++ b/lib/web/components/set/set_boundaries_live.sface
@@ -66,7 +66,7 @@
         />
       </form>
       {#if e(assigns, :exclude_circles, []) && e(assigns, :exclude_circles, []) != []}
-        <form phx-change="Bonfire.Boundaries:select" phx-target="#smart_input_live">
+        <form phx-change="Bonfire.Boundaries:select" class="mt-2" phx-target="#smart_input_live">
           <Bonfire.UI.Boundaries.Web.BoundaryItemsLive
             read_only={e(assigns, :read_only, false)}
             to_boundaries={[]}