From 23d11e799f89debb5c8d5afb3eea9e134dd07c73 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 25 Feb 2026 11:29:09 +0000
Subject: [PATCH 01/16] Add overflowing tabs

---
 resources/js/components/blueprints/Tabs.vue | 87 +++++++++++++++++----
 1 file changed, 71 insertions(+), 16 deletions(-)

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 474e021aae1..6d3fbea31f8 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -3,20 +3,49 @@
         <div>
             <Tabs v-model="currentTab" :unmount-on-hide="false">
                 <div v-if="!singleTab && tabs.length > 0" class="flex items-center justify-between gap-x-2 mb-6">
-                    <TabList class="flex-1">
-                        <div ref="tabs" class="flex-1 flex items-center gap-x-2.5">
-                            <BlueprintTab
-                                ref="tab"
-                                v-for="tab in tabs"
-                                :key="tab._id"
-                                :tab="tab"
-                                :current-tab="currentTab"
-                                :show-instructions="showTabInstructionsField"
-                                :edit-text="editTabText"
-                                @removed="removeTab(tab._id)"
-                                @updated="updateTab(tab._id, $event)"
-                                @mouseenter="mouseEnteredTab(tab._id)"
-                            />
+                    <TabList class="flex-1 min-w-0">
+                        <div ref="tabs" class="flex-1 flex items-center gap-x-2.5 min-w-0">
+                            <div ref="tabWrapper" class="min-w-0 flex-1 flex overflow-hidden">
+                                <div ref="tabInner" class="flex items-center gap-x-2.5 shrink-0">
+                                    <BlueprintTab
+                                        ref="tab"
+                                        v-for="tab in tabs"
+                                        :key="tab._id"
+                                        :tab="tab"
+                                        :current-tab="currentTab"
+                                        :show-instructions="showTabInstructionsField"
+                                        :edit-text="editTabText"
+                                        @removed="removeTab(tab._id)"
+                                        @updated="updateTab(tab._id, $event)"
+                                        @mouseenter="mouseEnteredTab(tab._id)"
+                                    />
+                                </div>
+                            </div>
+                            <Dropdown
+                                v-if="hasOverflow"
+                                align="end"
+                                side="bottom"
+                                class="shrink-0"
+                            >
+                                <template #trigger>
+                                    <Button
+                                        icon="chevron-vertical"
+                                        variant="ghost"
+                                        size="sm"
+                                        :aria-label="__('More tabs')"
+                                    />
+                                </template>
+                                <DropdownMenu>
+                                    <DropdownItem
+                                        v-for="tab in tabs"
+                                        :key="tab._id"
+                                        :text="__(tab.display)"
+                                        :icon="tab.icon"
+                                        :class="{ 'bg-gray-100 dark:bg-gray-800': currentTab === tab._id }"
+                                        @click="selectTab(tab._id)"
+                                    />
+                                </DropdownMenu>
+                            </Dropdown>
                         </div>
                     </TabList>
 
@@ -54,10 +83,11 @@
 <script>
 import { Sortable, Plugins } from '@shopify/draggable';
 import { nanoid as uniqid } from 'nanoid';
+import throttle from '@/util/throttle.js';
 import BlueprintTab from './Tab.vue';
 import BlueprintTabContent from './TabContent.vue';
 import CanDefineLocalizable from '../fields/CanDefineLocalizable';
-import { Tabs, TabList, Button, Description } from '@/components/ui';
+import { Tabs, TabList, Button, Description, Dropdown, DropdownMenu, DropdownItem } from '@/components/ui';
 
 export default {
     mixins: [CanDefineLocalizable],
@@ -69,6 +99,9 @@ export default {
         TabList,
         Button,
         Description,
+        Dropdown,
+        DropdownMenu,
+        DropdownItem,
     },
 
     props: {
@@ -138,6 +171,7 @@ export default {
             sortableTabs: null,
             sortableSections: null,
             sortableFields: null,
+            hasOverflow: false,
         };
     },
 
@@ -147,6 +181,7 @@ export default {
 			handler(tabs) {
 				this.$emit('updated', tabs);
 				this.makeSortable();
+				this.$nextTick(this.checkOverflow);
 			},
 		},
     },
@@ -154,15 +189,32 @@ export default {
     mounted() {
         this.ensureTab();
         this.makeSortable();
+        this.throttledCheckOverflow = throttle(() => this.$nextTick(this.checkOverflow), 100);
+        this.resizeObserver = new ResizeObserver(this.throttledCheckOverflow);
+        const wrapper = this.$refs.tabWrapper;
+        if (wrapper) this.resizeObserver.observe(wrapper);
+        this.$nextTick(this.checkOverflow);
     },
 
     unmounted() {
         if (this.sortableTabs) this.sortableTabs.destroy();
         if (this.sortableSections) this.sortableSections.destroy();
         if (this.sortableFields) this.sortableFields.destroy();
+        if (this.resizeObserver) this.resizeObserver.disconnect();
+        if (this.throttledCheckOverflow?.cancel) this.throttledCheckOverflow.cancel();
     },
 
     methods: {
+        checkOverflow() {
+            const wrapper = this.$refs.tabWrapper;
+            const inner = this.$refs.tabInner;
+            if (!wrapper || !inner || !this.tabs.length) {
+                this.hasOverflow = false;
+                return;
+            }
+            this.hasOverflow = inner.scrollWidth > wrapper.clientWidth;
+        },
+
         ensureTab() {
             if (this.requireSection && this.tabs.length === 0) {
                 this.addTab();
@@ -180,7 +232,10 @@ export default {
         makeTabsSortable() {
             if (this.sortableTabs) this.sortableTabs.destroy();
 
-            this.sortableTabs = new Sortable(this.$refs.tabs, {
+            const container = this.$refs.tabInner || this.$refs.tabs;
+            if (!container) return;
+
+            this.sortableTabs = new Sortable(container, {
                 draggable: '.blueprint-tab',
                 mirror: { constrainDimensions: true },
                 swapAnimation: { horizontal: true },

From f79a976a79cc571737240f451d2ce697dd5518a5 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 25 Feb 2026 11:30:19 +0000
Subject: [PATCH 02/16] Correct icon

---
 resources/js/components/blueprints/Tabs.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 6d3fbea31f8..ae52aa65418 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -29,10 +29,10 @@
                             >
                                 <template #trigger>
                                     <Button
-                                        icon="chevron-vertical"
+                                        icon="dots"
                                         variant="ghost"
                                         size="sm"
-                                        :aria-label="__('More tabs')"
+                                        :aria-label="__('Open dropdown menu')"
                                     />
                                 </template>
                                 <DropdownMenu>

From 889cb003f3b05b463d056ba663434dbb1d2e5514 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 25 Feb 2026 11:34:35 +0000
Subject: [PATCH 03/16] =?UTF-8?q?Long=20tab=20names=20(e.g.=20lorem=20ipsu?=
 =?UTF-8?q?m)=20in=20the=20overflow=20dropdown=20will=20now=20truncate=20w?=
 =?UTF-8?q?ith=20=E2=80=9C...=E2=80=9D=20at=20that=20max=20width.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/components/blueprints/Tabs.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index ae52aa65418..00536700a23 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -39,11 +39,14 @@
                                     <DropdownItem
                                         v-for="tab in tabs"
                                         :key="tab._id"
-                                        :text="__(tab.display)"
                                         :icon="tab.icon"
                                         :class="{ 'bg-gray-100 dark:bg-gray-800': currentTab === tab._id }"
                                         @click="selectTab(tab._id)"
-                                    />
+                                    >
+                                        <span class="block max-w-48 overflow-hidden text-ellipsis whitespace-nowrap">
+                                            {{ __(tab.display) }}
+                                        </span>
+                                    </DropdownItem>
                                 </DropdownMenu>
                             </Dropdown>
                         </div>

From 94e7f19d35f7cf8bf4a5fce3fe08e2fed7731b5e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 25 Feb 2026 11:37:33 +0000
Subject: [PATCH 04/16] =?UTF-8?q?Long=20tab=20names=20(e.g.=20lorem=20ipsu?=
 =?UTF-8?q?m)=20in=20the=20menu=20will=20now=20truncate=20with=20=E2=80=9C?=
 =?UTF-8?q?...=E2=80=9D=20at=20that=20max=20width.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/components/blueprints/Tab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index 3db6bd4d858..4731b86279f 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -7,7 +7,7 @@
             class="h-4 w-4 me-1"
         />
 
-        {{ __(tab.display) }}
+        <span class="block max-w-48 overflow-hidden text-ellipsis whitespace-nowrap">{{ __(tab.display) }}</span>
 
         <Dropdown v-if="isActive" placement="left-start" class="me-3">
             <template #trigger>

From 7725880781099246d9c04b3b62cc77a728a2d7a2 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 25 Feb 2026 11:39:12 +0000
Subject: [PATCH 05/16] Use overflow-clip instead, just because it's the modern
 equivalent of overflow-hidden

---
 resources/js/components/blueprints/Tab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index 4731b86279f..eecda5c706e 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -7,7 +7,7 @@
             class="h-4 w-4 me-1"
         />
 
-        <span class="block max-w-48 overflow-hidden text-ellipsis whitespace-nowrap">{{ __(tab.display) }}</span>
+        <span class="block max-w-48 overflow-clip text-ellipsis whitespace-nowrap">{{ __(tab.display) }}</span>
 
         <Dropdown v-if="isActive" placement="left-start" class="me-3">
             <template #trigger>

From d81345447cc55b82dbc0c6ed0b1c5bd4b078c1bc Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 25 Feb 2026 11:46:55 +0000
Subject: [PATCH 06/16] Solve tab overflow with clipping for small mobile-like
 viewports

---
 resources/js/components/blueprints/Tabs.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 00536700a23..39467e9691c 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -3,9 +3,9 @@
         <div>
             <Tabs v-model="currentTab" :unmount-on-hide="false">
                 <div v-if="!singleTab && tabs.length > 0" class="flex items-center justify-between gap-x-2 mb-6">
-                    <TabList class="flex-1 min-w-0">
+                    <TabList class="flex-1 min-w-0 overflow-x-clip overflow-y-visible">
                         <div ref="tabs" class="flex-1 flex items-center gap-x-2.5 min-w-0">
-                            <div ref="tabWrapper" class="min-w-0 flex-1 flex overflow-hidden">
+                            <div ref="tabWrapper" class="min-w-0 flex-1 flex overflow-clip">
                                 <div ref="tabInner" class="flex items-center gap-x-2.5 shrink-0">
                                     <BlueprintTab
                                         ref="tab"

From 2c54ffe310bf3029fa0e8d44e0fde48eb24be9ef Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 25 Feb 2026 11:50:21 +0000
Subject: [PATCH 07/16] Add a incy wincy tiny bit of padding to solve clip
 margin. This means you can tab to the overflow menu and the focus outline
 won't be clipped. overflow-clip-margin: 1px; won't work here for some reason
 but 1px of end padding is not visually noticeable.

---
 resources/js/components/blueprints/Tabs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 39467e9691c..aaf7b133bb9 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -3,7 +3,7 @@
         <div>
             <Tabs v-model="currentTab" :unmount-on-hide="false">
                 <div v-if="!singleTab && tabs.length > 0" class="flex items-center justify-between gap-x-2 mb-6">
-                    <TabList class="flex-1 min-w-0 overflow-x-clip overflow-y-visible">
+                    <TabList class="flex-1 min-w-0 overflow-x-clip overflow-y-visible pe-0.25">
                         <div ref="tabs" class="flex-1 flex items-center gap-x-2.5 min-w-0">
                             <div ref="tabWrapper" class="min-w-0 flex-1 flex overflow-clip">
                                 <div ref="tabInner" class="flex items-center gap-x-2.5 shrink-0">

From 080126836f11db1bea004746b779dec9b58b7665 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 25 Feb 2026 12:39:25 +0000
Subject: [PATCH 08/16] Apply the same treatment to tabs on the entry form

---
 resources/js/components/ui/Publish/Tabs.vue | 93 ++++++++++++++++++---
 1 file changed, 83 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/ui/Publish/Tabs.vue b/resources/js/components/ui/Publish/Tabs.vue
index 18a0f330e7a..5087344d5f9 100644
--- a/resources/js/components/ui/Publish/Tabs.vue
+++ b/resources/js/components/ui/Publish/Tabs.vue
@@ -4,13 +4,18 @@ import {
     TabList,
     TabTrigger,
     TabProvider,
+    Button,
+    Dropdown,
+    DropdownMenu,
+    DropdownItem,
 } from '@ui';
 import TabContent from './TabContent.vue';
 import { injectContainerContext } from './Container.vue';
 import Sections from './Sections.vue';
-import { ref, computed, useSlots, onMounted, watch } from 'vue';
+import { ref, computed, useSlots, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import ElementContainer from '@/components/ElementContainer.vue';
 import ShowField from '@/components/field-conditions/ShowField.js';
+import throttle from '@/util/throttle.js';
 
 const slots = useSlots();
 const { blueprint, visibleValues, extraValues, revealerValues, errors, hiddenFields, setHiddenField, container, rememberTab } = injectContainerContext();
@@ -103,21 +108,89 @@ const tabsWithErrors = computed(() => {
 function tabHasError(tab) {
     return tabsWithErrors.value.includes(tab.handle);
 }
+
+const tabWrapper = ref(null);
+const tabInner = ref(null);
+const hasOverflow = ref(false);
+
+function checkOverflow() {
+    if (!tabWrapper.value || !tabInner.value) {
+        hasOverflow.value = false;
+        return;
+    }
+    hasOverflow.value = tabInner.value.scrollWidth > tabWrapper.value.clientWidth;
+}
+
+const throttledCheckOverflow = throttle(() => nextTick(checkOverflow), 100);
+let resizeObserver = null;
+
+watch(tabWrapper, (el, oldEl) => {
+    if (resizeObserver) {
+        resizeObserver.disconnect();
+        resizeObserver = null;
+    }
+    if (el) {
+        resizeObserver = new ResizeObserver(throttledCheckOverflow);
+        resizeObserver.observe(el);
+        nextTick(checkOverflow);
+    }
+});
+
+onUnmounted(() => {
+    if (resizeObserver) resizeObserver.disconnect();
+    if (throttledCheckOverflow?.cancel) throttledCheckOverflow.cancel();
+});
 </script>
 
 <template>
     <ElementContainer @resized="width = $event.width">
         <div>
             <Tabs v-if="width" v-model:modelValue="activeTab">
-                <TabList v-if="hasMultipleVisibleMainTabs" class="-mt-2 mb-6">
-                    <TabTrigger
-                        v-for="tab in visibleMainTabs"
-                        :key="tab.handle"
-                        :name="tab.handle"
-                        :text="__(tab.display)"
-                        :class="{ '!text-red-600': tabHasError(tab) }"
-                    />
-                </TabList>
+                <div v-if="hasMultipleVisibleMainTabs" class="flex items-center gap-x-2 -mt-2 mb-6">
+                    <TabList class="flex-1 min-w-0 overflow-x-clip overflow-y-visible pe-0.25">
+                        <div class="flex-1 flex items-center gap-x-2.5 min-w-0">
+                            <div ref="tabWrapper" class="min-w-0 flex-1 flex overflow-clip">
+                                <div ref="tabInner" class="flex items-center gap-x-2.5 shrink-0">
+                                    <TabTrigger
+                                        v-for="tab in visibleMainTabs"
+                                        :key="tab.handle"
+                                        :name="tab.handle"
+                                        :class="{ '!text-red-600': tabHasError(tab) }"
+                                    >
+                                        <span class="block max-w-48 overflow-clip text-ellipsis whitespace-nowrap">{{ __(tab.display) }}</span>
+                                    </TabTrigger>
+                                </div>
+                            </div>
+                            <Dropdown
+                                v-if="hasOverflow"
+                                align="end"
+                                side="bottom"
+                                class="shrink-0"
+                            >
+                                <template #trigger>
+                                    <Button
+                                        icon="dots"
+                                        variant="ghost"
+                                        size="sm"
+                                        :aria-label="__('Open dropdown menu')"
+                                    />
+                                </template>
+                                <DropdownMenu>
+                                    <DropdownItem
+                                        v-for="tab in visibleMainTabs"
+                                        :key="tab.handle"
+                                        :class="{ 'bg-gray-100 dark:bg-gray-800': activeTab === tab.handle }"
+                                        @click="setActive(tab.handle)"
+                                    >
+                                        <span class="block max-w-48 overflow-hidden text-ellipsis whitespace-nowrap">
+                                            {{ __(tab.display) }}
+                                        </span>
+                                    </DropdownItem>
+                                </DropdownMenu>
+                            </Dropdown>
+                        </div>
+                    </TabList>
+                </div>
 
                 <div :class="{ 'grid grid-cols-[1fr_320px] gap-8': shouldShowSidebar }">
                     <component

From aebe0e2831de33e99179c4964a95f35a54ed5abf Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 25 Feb 2026 12:42:17 +0000
Subject: [PATCH 09/16] Tidy

---
 resources/js/components/ui/Publish/Tabs.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Publish/Tabs.vue b/resources/js/components/ui/Publish/Tabs.vue
index 5087344d5f9..6ec2a01b723 100644
--- a/resources/js/components/ui/Publish/Tabs.vue
+++ b/resources/js/components/ui/Publish/Tabs.vue
@@ -124,7 +124,7 @@ function checkOverflow() {
 const throttledCheckOverflow = throttle(() => nextTick(checkOverflow), 100);
 let resizeObserver = null;
 
-watch(tabWrapper, (el, oldEl) => {
+watch(tabWrapper, (el) => {
     if (resizeObserver) {
         resizeObserver.disconnect();
         resizeObserver = null;
@@ -179,6 +179,7 @@ onUnmounted(() => {
                                     <DropdownItem
                                         v-for="tab in visibleMainTabs"
                                         :key="tab.handle"
+                                        :icon="tab.icon"
                                         :class="{ 'bg-gray-100 dark:bg-gray-800': activeTab === tab.handle }"
                                         @click="setActive(tab.handle)"
                                     >

From d7a1a8b26befb81690fe07cdff90a0004eca40bf Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 25 Feb 2026 12:55:35 +0000
Subject: [PATCH 10/16] Fix some focus clipping e.g. if you tab to "Main" the
 focus outline would be clipped on the left

---
 resources/js/components/blueprints/Tabs.vue | 2 +-
 resources/js/components/ui/Publish/Tabs.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index aaf7b133bb9..361384aeb0f 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -5,7 +5,7 @@
                 <div v-if="!singleTab && tabs.length > 0" class="flex items-center justify-between gap-x-2 mb-6">
                     <TabList class="flex-1 min-w-0 overflow-x-clip overflow-y-visible pe-0.25">
                         <div ref="tabs" class="flex-1 flex items-center gap-x-2.5 min-w-0">
-                            <div ref="tabWrapper" class="min-w-0 flex-1 flex overflow-clip">
+                            <div ref="tabWrapper" class="min-w-0 flex-1 flex overflow-clip px-0.25">
                                 <div ref="tabInner" class="flex items-center gap-x-2.5 shrink-0">
                                     <BlueprintTab
                                         ref="tab"
diff --git a/resources/js/components/ui/Publish/Tabs.vue b/resources/js/components/ui/Publish/Tabs.vue
index 6ec2a01b723..700141301c5 100644
--- a/resources/js/components/ui/Publish/Tabs.vue
+++ b/resources/js/components/ui/Publish/Tabs.vue
@@ -149,7 +149,7 @@ onUnmounted(() => {
                 <div v-if="hasMultipleVisibleMainTabs" class="flex items-center gap-x-2 -mt-2 mb-6">
                     <TabList class="flex-1 min-w-0 overflow-x-clip overflow-y-visible pe-0.25">
                         <div class="flex-1 flex items-center gap-x-2.5 min-w-0">
-                            <div ref="tabWrapper" class="min-w-0 flex-1 flex overflow-clip">
+                            <div ref="tabWrapper" class="min-w-0 flex-1 flex overflow-clip px-0.25">
                                 <div ref="tabInner" class="flex items-center gap-x-2.5 shrink-0">
                                     <TabTrigger
                                         v-for="tab in visibleMainTabs"

From 1e43b3c58db4a837f42a4b7512c875ffe7e4c4d5 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 25 Feb 2026 14:36:51 +0000
Subject: [PATCH 11/16] Add a tooltip to show the full text if the tab name is
 excessively long

---
 resources/js/components/blueprints/Tab.vue  | 2 +-
 resources/js/components/ui/Publish/Tabs.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index eecda5c706e..0224caf3842 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -7,7 +7,7 @@
             class="h-4 w-4 me-1"
         />
 
-        <span class="block max-w-48 overflow-clip text-ellipsis whitespace-nowrap">{{ __(tab.display) }}</span>
+        <span class="block max-w-48 overflow-clip text-ellipsis whitespace-nowrap" v-tooltip="__(tab.display).length > 24 ? __(tab.display) : null">{{ __(tab.display) }}</span>
 
         <Dropdown v-if="isActive" placement="left-start" class="me-3">
             <template #trigger>
diff --git a/resources/js/components/ui/Publish/Tabs.vue b/resources/js/components/ui/Publish/Tabs.vue
index 700141301c5..74d69e3bf60 100644
--- a/resources/js/components/ui/Publish/Tabs.vue
+++ b/resources/js/components/ui/Publish/Tabs.vue
@@ -157,7 +157,7 @@ onUnmounted(() => {
                                         :name="tab.handle"
                                         :class="{ '!text-red-600': tabHasError(tab) }"
                                     >
-                                        <span class="block max-w-48 overflow-clip text-ellipsis whitespace-nowrap">{{ __(tab.display) }}</span>
+                                        <span class="block max-w-48 overflow-clip text-ellipsis whitespace-nowrap" v-tooltip="__(tab.display).length > 24 ? __(tab.display) : null">{{ __(tab.display) }}</span>
                                     </TabTrigger>
                                 </div>
                             </div>

From 84c2a705334dfa089d41b9ffa17d7a206bb7fa86 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 25 Feb 2026 15:00:20 +0000
Subject: [PATCH 12/16] Onl list overflowedTabs instead of all tabs.

---
 resources/js/components/blueprints/Tabs.vue | 18 +++++++++++++++--
 resources/js/components/ui/Publish/Tabs.vue | 22 ++++++++++++++++++---
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 361384aeb0f..faeb4dab51e 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -22,7 +22,7 @@
                                 </div>
                             </div>
                             <Dropdown
-                                v-if="hasOverflow"
+                                v-if="overflowedTabs.length"
                                 align="end"
                                 side="bottom"
                                 class="shrink-0"
@@ -37,7 +37,7 @@
                                 </template>
                                 <DropdownMenu>
                                     <DropdownItem
-                                        v-for="tab in tabs"
+                                        v-for="tab in overflowedTabs"
                                         :key="tab._id"
                                         :icon="tab.icon"
                                         :class="{ 'bg-gray-100 dark:bg-gray-800': currentTab === tab._id }"
@@ -175,6 +175,7 @@ export default {
             sortableSections: null,
             sortableFields: null,
             hasOverflow: false,
+            overflowedTabs: [],
         };
     },
 
@@ -213,9 +214,22 @@ export default {
             const inner = this.$refs.tabInner;
             if (!wrapper || !inner || !this.tabs.length) {
                 this.hasOverflow = false;
+                this.overflowedTabs = [];
                 return;
             }
             this.hasOverflow = inner.scrollWidth > wrapper.clientWidth;
+            if (!this.hasOverflow) {
+                this.overflowedTabs = [];
+                return;
+            }
+            const wrapperRect = wrapper.getBoundingClientRect();
+            const buttons = inner.querySelectorAll('[role="tab"]');
+            this.overflowedTabs = this.tabs.filter((tab, i) => {
+                const el = buttons[i];
+                if (!el) return false;
+                const rect = el.getBoundingClientRect();
+                return rect.right > wrapperRect.right || rect.left < wrapperRect.left;
+            });
         },
 
         ensureTab() {
diff --git a/resources/js/components/ui/Publish/Tabs.vue b/resources/js/components/ui/Publish/Tabs.vue
index 74d69e3bf60..ddc3c2b851a 100644
--- a/resources/js/components/ui/Publish/Tabs.vue
+++ b/resources/js/components/ui/Publish/Tabs.vue
@@ -112,13 +112,29 @@ function tabHasError(tab) {
 const tabWrapper = ref(null);
 const tabInner = ref(null);
 const hasOverflow = ref(false);
+const overflowedTabs = ref([]);
 
 function checkOverflow() {
     if (!tabWrapper.value || !tabInner.value) {
         hasOverflow.value = false;
+        overflowedTabs.value = [];
         return;
     }
-    hasOverflow.value = tabInner.value.scrollWidth > tabWrapper.value.clientWidth;
+    const wrapper = tabWrapper.value;
+    const inner = tabInner.value;
+    hasOverflow.value = inner.scrollWidth > wrapper.clientWidth;
+    if (!hasOverflow.value) {
+        overflowedTabs.value = [];
+        return;
+    }
+    const wrapperRect = wrapper.getBoundingClientRect();
+    const buttons = inner.querySelectorAll('[role="tab"]');
+    overflowedTabs.value = visibleMainTabs.value.filter((tab, i) => {
+        const el = buttons[i];
+        if (!el) return false;
+        const rect = el.getBoundingClientRect();
+        return rect.right > wrapperRect.right || rect.left < wrapperRect.left;
+    });
 }
 
 const throttledCheckOverflow = throttle(() => nextTick(checkOverflow), 100);
@@ -162,7 +178,7 @@ onUnmounted(() => {
                                 </div>
                             </div>
                             <Dropdown
-                                v-if="hasOverflow"
+                                v-if="overflowedTabs.length"
                                 align="end"
                                 side="bottom"
                                 class="shrink-0"
@@ -177,7 +193,7 @@ onUnmounted(() => {
                                 </template>
                                 <DropdownMenu>
                                     <DropdownItem
-                                        v-for="tab in visibleMainTabs"
+                                        v-for="tab in overflowedTabs"
                                         :key="tab.handle"
                                         :icon="tab.icon"
                                         :class="{ 'bg-gray-100 dark:bg-gray-800': activeTab === tab.handle }"

From 38979bee55655c11f844bce0eccd58ff8ed86f5f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 25 Feb 2026 15:19:06 +0000
Subject: [PATCH 13/16] Add a way to access tab controls when they overflow

---
 resources/js/components/blueprints/Tabs.vue | 31 ++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index faeb4dab51e..7ff6186fb29 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -47,6 +47,11 @@
                                             {{ __(tab.display) }}
                                         </span>
                                     </DropdownItem>
+                                    <template v-if="activeTabIsOverflowed">
+                                        <DropdownSeparator />
+                                        <DropdownItem :text="__('Edit')" icon="edit" @click="editActiveOverflowedTab" />
+                                        <DropdownItem :text="__('Delete')" icon="trash" variant="destructive" @click="removeActiveOverflowedTab" />
+                                    </template>
                                 </DropdownMenu>
                             </Dropdown>
                         </div>
@@ -90,7 +95,7 @@ import throttle from '@/util/throttle.js';
 import BlueprintTab from './Tab.vue';
 import BlueprintTabContent from './TabContent.vue';
 import CanDefineLocalizable from '../fields/CanDefineLocalizable';
-import { Tabs, TabList, Button, Description, Dropdown, DropdownMenu, DropdownItem } from '@/components/ui';
+import { Tabs, TabList, Button, Description, Dropdown, DropdownMenu, DropdownItem, DropdownSeparator, Icon } from '@/components/ui';
 
 export default {
     mixins: [CanDefineLocalizable],
@@ -105,6 +110,8 @@ export default {
         Dropdown,
         DropdownMenu,
         DropdownItem,
+        DropdownSeparator,
+        Icon,
     },
 
     props: {
@@ -179,6 +186,12 @@ export default {
         };
     },
 
+    computed: {
+        activeTabIsOverflowed() {
+            return this.overflowedTabs.some((t) => t._id === this.currentTab);
+        },
+    },
+
     watch: {
 		tabs: {
 			deep: true,
@@ -366,6 +379,22 @@ export default {
             this.currentTab = tabId;
         },
 
+        editOverflowedTab(tab) {
+            if (!tab) return;
+            const refs = this.$refs.tab;
+            const tabRef = Array.isArray(refs) ? refs.find((c) => c.tab?._id === tab._id) : refs;
+            tabRef?.edit();
+        },
+
+        editActiveOverflowedTab() {
+            const tab = this.overflowedTabs.find((t) => t._id === this.currentTab);
+            if (tab) this.editOverflowedTab(tab);
+        },
+
+        removeActiveOverflowedTab() {
+            this.removeTab(this.currentTab);
+        },
+
         mouseEnteredTab(tabId) {
             if (this.lastInteractedTab) this.selectTab(tabId);
         },

From 0f51f5b2a84937dcf82f81ed1d2d129c4c293123 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 25 Feb 2026 15:36:52 +0000
Subject: [PATCH 14/16] Add logic to span all columns of the dropdown menu if
 there's no icon

---
 resources/js/components/ui/Dropdown/Item.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Dropdown/Item.vue b/resources/js/components/ui/Dropdown/Item.vue
index 6b517d1f713..0e8db57ac17 100644
--- a/resources/js/components/ui/Dropdown/Item.vue
+++ b/resources/js/components/ui/Dropdown/Item.vue
@@ -61,7 +61,7 @@ const iconClasses = cva({
         <div v-if="icon" class="flex size-5 items-center justify-center p-1">
             <Icon :name="icon" :class="iconClasses" />
         </div>
-        <div class="col-start-2 px-2">
+        <div class="px-2" :class="icon ? 'col-start-2' : 'col-span-full'">
             <slot v-if="hasDefaultSlot" />
             <template v-else>{{ text }}</template>
         </div>

From 9b770236828c65dcb5672e09b3caace94c0518ee Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Thu, 26 Feb 2026 00:43:58 -0500
Subject: [PATCH 15/16] refactor tab overflow logic into a composable to DRY it
 up

---
 resources/js/components/blueprints/Tabs.vue | 44 +++++--------
 resources/js/components/ui/Publish/Tabs.vue | 49 +++++---------
 resources/js/util/tabs-overflow.js          | 72 +++++++++++++++++++++
 3 files changed, 105 insertions(+), 60 deletions(-)
 create mode 100644 resources/js/util/tabs-overflow.js

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 7ff6186fb29..f22b3069819 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -91,7 +91,7 @@
 <script>
 import { Sortable, Plugins } from '@shopify/draggable';
 import { nanoid as uniqid } from 'nanoid';
-import throttle from '@/util/throttle.js';
+import { createTabsOverflowTracker } from '@/util/tabs-overflow.js';
 import BlueprintTab from './Tab.vue';
 import BlueprintTabContent from './TabContent.vue';
 import CanDefineLocalizable from '../fields/CanDefineLocalizable';
@@ -206,43 +206,31 @@ export default {
     mounted() {
         this.ensureTab();
         this.makeSortable();
-        this.throttledCheckOverflow = throttle(() => this.$nextTick(this.checkOverflow), 100);
-        this.resizeObserver = new ResizeObserver(this.throttledCheckOverflow);
-        const wrapper = this.$refs.tabWrapper;
-        if (wrapper) this.resizeObserver.observe(wrapper);
-        this.$nextTick(this.checkOverflow);
+        this.overflowTracker = createTabsOverflowTracker({
+            getWrapper: () => this.$refs.tabWrapper,
+            getInner: () => this.$refs.tabInner,
+            getItems: () => this.tabs,
+            onUpdate: ({ hasOverflow, overflowedItems }) => {
+                this.hasOverflow = hasOverflow;
+                this.overflowedTabs = overflowedItems;
+            },
+        });
+        this.$nextTick(() => {
+            this.overflowTracker.observe();
+            this.overflowTracker.checkOverflow();
+        });
     },
 
     unmounted() {
         if (this.sortableTabs) this.sortableTabs.destroy();
         if (this.sortableSections) this.sortableSections.destroy();
         if (this.sortableFields) this.sortableFields.destroy();
-        if (this.resizeObserver) this.resizeObserver.disconnect();
-        if (this.throttledCheckOverflow?.cancel) this.throttledCheckOverflow.cancel();
+        this.overflowTracker?.disconnect();
     },
 
     methods: {
         checkOverflow() {
-            const wrapper = this.$refs.tabWrapper;
-            const inner = this.$refs.tabInner;
-            if (!wrapper || !inner || !this.tabs.length) {
-                this.hasOverflow = false;
-                this.overflowedTabs = [];
-                return;
-            }
-            this.hasOverflow = inner.scrollWidth > wrapper.clientWidth;
-            if (!this.hasOverflow) {
-                this.overflowedTabs = [];
-                return;
-            }
-            const wrapperRect = wrapper.getBoundingClientRect();
-            const buttons = inner.querySelectorAll('[role="tab"]');
-            this.overflowedTabs = this.tabs.filter((tab, i) => {
-                const el = buttons[i];
-                if (!el) return false;
-                const rect = el.getBoundingClientRect();
-                return rect.right > wrapperRect.right || rect.left < wrapperRect.left;
-            });
+            this.overflowTracker?.checkOverflow();
         },
 
         ensureTab() {
diff --git a/resources/js/components/ui/Publish/Tabs.vue b/resources/js/components/ui/Publish/Tabs.vue
index ddc3c2b851a..e96c751a784 100644
--- a/resources/js/components/ui/Publish/Tabs.vue
+++ b/resources/js/components/ui/Publish/Tabs.vue
@@ -15,7 +15,7 @@ import Sections from './Sections.vue';
 import { ref, computed, useSlots, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import ElementContainer from '@/components/ElementContainer.vue';
 import ShowField from '@/components/field-conditions/ShowField.js';
-import throttle from '@/util/throttle.js';
+import { createTabsOverflowTracker } from '@/util/tabs-overflow.js';
 
 const slots = useSlots();
 const { blueprint, visibleValues, extraValues, revealerValues, errors, hiddenFields, setHiddenField, container, rememberTab } = injectContainerContext();
@@ -113,48 +113,33 @@ const tabWrapper = ref(null);
 const tabInner = ref(null);
 const hasOverflow = ref(false);
 const overflowedTabs = ref([]);
+const overflowTracker = createTabsOverflowTracker({
+    getWrapper: () => tabWrapper.value,
+    getInner: () => tabInner.value,
+    getItems: () => visibleMainTabs.value,
+    onUpdate: ({ hasOverflow: nextHasOverflow, overflowedItems }) => {
+        hasOverflow.value = nextHasOverflow;
+        overflowedTabs.value = overflowedItems;
+    },
+});
 
 function checkOverflow() {
-    if (!tabWrapper.value || !tabInner.value) {
-        hasOverflow.value = false;
-        overflowedTabs.value = [];
-        return;
-    }
-    const wrapper = tabWrapper.value;
-    const inner = tabInner.value;
-    hasOverflow.value = inner.scrollWidth > wrapper.clientWidth;
-    if (!hasOverflow.value) {
-        overflowedTabs.value = [];
-        return;
-    }
-    const wrapperRect = wrapper.getBoundingClientRect();
-    const buttons = inner.querySelectorAll('[role="tab"]');
-    overflowedTabs.value = visibleMainTabs.value.filter((tab, i) => {
-        const el = buttons[i];
-        if (!el) return false;
-        const rect = el.getBoundingClientRect();
-        return rect.right > wrapperRect.right || rect.left < wrapperRect.left;
-    });
+    overflowTracker.checkOverflow();
 }
 
-const throttledCheckOverflow = throttle(() => nextTick(checkOverflow), 100);
-let resizeObserver = null;
-
 watch(tabWrapper, (el) => {
-    if (resizeObserver) {
-        resizeObserver.disconnect();
-        resizeObserver = null;
-    }
     if (el) {
-        resizeObserver = new ResizeObserver(throttledCheckOverflow);
-        resizeObserver.observe(el);
+        overflowTracker.observe();
         nextTick(checkOverflow);
     }
 });
 
+watch(visibleMainTabs, () => {
+    nextTick(checkOverflow);
+}, { deep: true });
+
 onUnmounted(() => {
-    if (resizeObserver) resizeObserver.disconnect();
-    if (throttledCheckOverflow?.cancel) throttledCheckOverflow.cancel();
+    overflowTracker.disconnect();
 });
 </script>
 
diff --git a/resources/js/util/tabs-overflow.js b/resources/js/util/tabs-overflow.js
new file mode 100644
index 00000000000..07cee0aa541
--- /dev/null
+++ b/resources/js/util/tabs-overflow.js
@@ -0,0 +1,72 @@
+import throttle from '@/util/throttle.js';
+
+export function createTabsOverflowTracker({
+    getWrapper,
+    getInner,
+    getItems,
+    onUpdate,
+    wait = 100,
+}) {
+    let observer = null;
+    const throttledCheck = throttle(() => checkOverflow(), wait);
+
+    function checkOverflow() {
+        const wrapper = getWrapper();
+        const inner = getInner();
+        const items = getItems();
+
+        if (!wrapper || !inner || !items.length) {
+            onUpdate({ hasOverflow: false, overflowedItems: [] });
+            return;
+        }
+
+        const hasOverflow = inner.scrollWidth > wrapper.clientWidth;
+
+        if (!hasOverflow) {
+            onUpdate({ hasOverflow: false, overflowedItems: [] });
+            return;
+        }
+
+        const wrapperRect = wrapper.getBoundingClientRect();
+        const tabNodes = inner.querySelectorAll('[role="tab"]');
+        const overflowedItems = items.filter((item, index) => {
+            const node = tabNodes[index];
+
+            if (!node) {
+                return false;
+            }
+
+            const rect = node.getBoundingClientRect();
+
+            return rect.right > wrapperRect.right || rect.left < wrapperRect.left;
+        });
+
+        onUpdate({ hasOverflow: true, overflowedItems });
+    }
+
+    function observe() {
+        observer?.disconnect();
+        observer = null;
+
+        const wrapper = getWrapper();
+
+        if (!wrapper) {
+            return;
+        }
+
+        observer = new ResizeObserver(throttledCheck);
+        observer.observe(wrapper);
+    }
+
+    function disconnect() {
+        observer?.disconnect();
+        observer = null;
+        throttledCheck.cancel();
+    }
+
+    return {
+        checkOverflow,
+        observe,
+        disconnect,
+    };
+}

From c82f47833a6468c7ccca1b795bfc5c80acb6b45a Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Thu, 26 Feb 2026 00:54:12 -0500
Subject: [PATCH 16/16] recompute overflow after tab switches (just in case)
 and remove unused import and var

---
 resources/js/components/blueprints/Tabs.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index f22b3069819..7d58aa4f4d9 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -95,7 +95,7 @@ import { createTabsOverflowTracker } from '@/util/tabs-overflow.js';
 import BlueprintTab from './Tab.vue';
 import BlueprintTabContent from './TabContent.vue';
 import CanDefineLocalizable from '../fields/CanDefineLocalizable';
-import { Tabs, TabList, Button, Description, Dropdown, DropdownMenu, DropdownItem, DropdownSeparator, Icon } from '@/components/ui';
+import { Tabs, TabList, Button, Description, Dropdown, DropdownMenu, DropdownItem, DropdownSeparator } from '@/components/ui';
 
 export default {
     mixins: [CanDefineLocalizable],
@@ -111,7 +111,6 @@ export default {
         DropdownMenu,
         DropdownItem,
         DropdownSeparator,
-        Icon,
     },
 
     props: {
@@ -181,7 +180,6 @@ export default {
             sortableTabs: null,
             sortableSections: null,
             sortableFields: null,
-            hasOverflow: false,
             overflowedTabs: [],
         };
     },
@@ -193,6 +191,9 @@ export default {
     },
 
     watch: {
+        currentTab() {
+            this.$nextTick(this.checkOverflow);
+        },
 		tabs: {
 			deep: true,
 			handler(tabs) {
@@ -210,8 +211,7 @@ export default {
             getWrapper: () => this.$refs.tabWrapper,
             getInner: () => this.$refs.tabInner,
             getItems: () => this.tabs,
-            onUpdate: ({ hasOverflow, overflowedItems }) => {
-                this.hasOverflow = hasOverflow;
+            onUpdate: ({ overflowedItems }) => {
                 this.overflowedTabs = overflowedItems;
             },
         });