fix: moved dropdown option to tab

frontend/src/components/FieldLayoutEditor.vue

@@ -1,19 +1,18 @@
 <template>
   <div class="flex flex-col gap-5.5">
     <div
-      class="flex justify-between items-center gap-1 text-base bg-surface-gray-2 rounded py-2 px-2.5"
+      class="flex items-center gap-2 text-base bg-surface-gray-2 rounded py-2 px-2.5"
     >
-      <div class="flex items-center gap-1">
       <Draggable
         v-if="tabs.length && !tabs[tabIndex].no_tabs"
         :list="tabs"
         item-key="label"
-          class="flex items-center gap-1"
+        class="flex items-center gap-2"
         @end="(e) => (tabIndex = e.newIndex)"
       >
         <template #item="{ element: tab, index: i }">
           <div
-              class="cursor-pointer rounded"
+            class="flex items-center gap-2 cursor-pointer rounded"
             :class="[
               tabIndex == i
                 ? 'text-ink-gray-9 bg-surface-white shadow-sm'
@@ -41,6 +40,18 @@
                 />
               </div>
             </div>
+            <Dropdown
+              v-if="!tab.no_tabs && tabIndex == i"
+              :options="getTabOptions(tab)"
+              class="!h-4"
+              @click.stop
+            >
+              <template #default>
+                <Button variant="ghost" class="!p-1 !h-4">
+                  <FeatherIcon name="more-horizontal" class="h-4" />
+                </Button>
+              </template>
+            </Dropdown>
           </div>
         </template>
       </Draggable>
@@ -50,22 +61,11 @@
         @click="addTab"
         :label="__('Add Tab')"
       >
-          <template #prefix>
+        <template v-slot:[slotName]>
           <FeatherIcon name="plus" class="h-4" />
         </template>
       </Button>
     </div>
-      <Dropdown
-        v-if="tabs.length && !tabs[tabIndex].no_tabs"
-        :options="getTabOptions(tabs[tabIndex])"
-      >
-        <template #default>
-          <Button variant="ghost">
-            <FeatherIcon name="more-horizontal" class="h-4" />
-          </Button>
-        </template>
-      </Dropdown>
-    </div>
     <div v-show="tabIndex == i" v-for="(tab, i) in tabs" :key="tab.label">
       <Draggable
         :list="tab.sections"
@@ -207,6 +207,12 @@ const props = defineProps({
 })
 
 const tabIndex = ref(0)
+const slotName = computed(() => {
+  if (props.tabs.length == 1 && props.tabs[0].no_tabs) {
+    return 'prefix'
+  }
+  return 'default'
+})
 
 const restrictedFieldTypes = [
   'Geolocation',