move field delete in a dropdown to prevent accidental clicks

ui/src/components/collections/FieldAccordion.svelte

@@ -5,6 +5,7 @@
     import CommonHelper from "@/utils/CommonHelper";
     import tooltip from "@/actions/tooltip";
     import { errors } from "@/stores/errors";
+    import Toggler from "@/components/base/Toggler.svelte";
     import Accordion from "@/components/base/Accordion.svelte";
     import Field from "@/components/base/Field.svelte";
     import FieldTypeSelect from "@/components/collections/schema/FieldTypeSelect.svelte";
@@ -272,13 +273,16 @@
             {#if !field.toDelete}
                 <div class="col-sm-4 txt-right">
                     <div class="flex-fill" />
-                    <div class="inline-flex flex-gap-base flex-nowrap">
-                        <button
-                            type="button"
-                            class="btn btn-sm btn-secondary fade"
-                            on:click|stopPropagation={handleDelete}
-                        >
-                            <span class="txt">Remove</span>
+                    <div class="inline-flex flex-gap-sm flex-nowrap">
+                        <button type="button" class="btn btn-circle btn-sm btn-secondary">
+                            <i class="ri-more-line" />
+                            <Toggler
+                                class="dropdown dropdown-sm dropdown-upside dropdown-right dropdown-nowrap no-min-width"
+                            >
+                                <button type="button" class="dropdown-item txt-right" on:click={handleDelete}>
+                                    <span class="txt">Remove</span>
+                                </button>
+                            </Toggler>
                         </button>
 
                         {#if interactive}

ui/src/scss/_base.scss

@@ -392,6 +392,9 @@ a,
         .p-#{$sideAlias}-#{$spacing} { padding-#{$side}: $spacing * 1px !important; }
     }
 }
+.no-min-width {
+    min-width: 0 !important;
+}
 
 .wrapper {
     position: relative;

ui/src/scss/_form.scss

@@ -226,6 +226,7 @@ button {
     &.btn-circle {
         border-radius: 50%;
         padding: 0;
+        gap: 0;
         i {
             $iconSize: 23px;
             font-size: 1.2857rem;