From 36e5388202d73e5c0b0ffee8cc4624d0ccc695c6 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 9 Mar 2026 11:07:53 +0000
Subject: [PATCH 1/2] Use resize observer to detect changes in the floating
 toolbar rather than media queries. This is a similar implementation to the
 button group fieldtype

---
 resources/js/components/ui/Button/Group.vue | 58 +++++++++++++++++----
 1 file changed, 49 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/ui/Button/Group.vue b/resources/js/components/ui/Button/Group.vue
index 45679891c26..ba505989e9e 100644
--- a/resources/js/components/ui/Button/Group.vue
+++ b/resources/js/components/ui/Button/Group.vue
@@ -1,7 +1,40 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+const groupEl = ref(null);
+let resizeObserver = null;
+
+function checkWrapping() {
+    const el = groupEl.value;
+    if (!el) return;
+
+    el.removeAttribute('data-wrapped');
+
+    const firstChild = el.firstElementChild;
+    const lastChild = el.lastElementChild;
+
+    if (firstChild && lastChild && firstChild !== lastChild && lastChild.offsetTop > firstChild.offsetTop) {
+        el.setAttribute('data-wrapped', '');
+    }
+}
+
+onMounted(() => {
+    resizeObserver = new ResizeObserver(checkWrapping);
+    if (groupEl.value) {
+        resizeObserver.observe(groupEl.value);
+    }
+});
+
+onBeforeUnmount(() => {
+    resizeObserver?.disconnect();
+});
+</script>
+
 <template>
     <div
+        ref="groupEl"
         :class="[
-            'group/button inline-flex flex-wrap [[data-floating-toolbar]_&]:justify-center [[data-floating-toolbar]_&]:gap-1 [[data-floating-toolbar]_&]:lg:gap-x-0',
+            'group/button inline-flex flex-wrap [[data-floating-toolbar]_&]:justify-center',
             '[&>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
             '[&>[data-ui-group-target]:first-child:not(:last-child)]:rounded-e-none',
             '[&>[data-ui-group-target]:last-child:not(:first-child)]:rounded-s-none',
@@ -9,7 +42,6 @@
             '[&>*:first-child:not(:last-child)_[data-ui-group-target]]:rounded-e-none',
             '[&>*:last-child:not(:first-child)_[data-ui-group-target]]:rounded-s-none',
             'dark:[&_button]:ring-0',
-            'max-lg:[[data-floating-toolbar]_&_button]:rounded-md!',
             'shadow-ui-sm rounded-lg'
         ]"
         data-ui-button-group
@@ -19,7 +51,7 @@
 </template>
 
 <style>
-    /* GROUP FLOATING TOOLBAR / BUTTON GROUP BORDERS
+    /* GROUP BUTTON GROUP BORDERS
     =================================================== */
     [data-ui-button-group] [data-ui-group-target] {
         @apply shadow-none;
@@ -27,13 +59,21 @@
         &:not(:first-child):not([data-floating-toolbar] &) {
             border-inline-start: 0;
         }
+    }
+    /* GROUP BUTTON GROUP BORDERS / FLOATING TOOLBAR
+    =================================================== */
+    [data-floating-toolbar] [data-ui-button-group] {
+        /* Connected look when not wrapped */
+        &:not([data-wrapped]) [data-ui-group-target]:not(:first-child) {
+            border-inline-start: 0;
+        }
+
+        /* Split buttons apart when wrapped */
+        &[data-wrapped] {
+            gap: 0.25rem;
 
-        /* Account for button groups being split apart on small screens */
-        [data-floating-toolbar] & {
-            @media (width >= 1024px) {
-                &:not(:first-child) {
-                    border-inline-start: 0;
-                }
+            & button {
+                border-radius: 0.375rem !important;
             }
         }
     }

From d5278a3d6cb4f04c0f7efa1fbe1087d25dd56ac4 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 9 Mar 2026 11:10:54 +0000
Subject: [PATCH 2/2] Remove button group shadow when wrapped

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

diff --git a/resources/js/components/ui/Button/Group.vue b/resources/js/components/ui/Button/Group.vue
index ba505989e9e..b541de4f276 100644
--- a/resources/js/components/ui/Button/Group.vue
+++ b/resources/js/components/ui/Button/Group.vue
@@ -71,8 +71,9 @@ onBeforeUnmount(() => {
         /* Split buttons apart when wrapped */
         &[data-wrapped] {
             gap: 0.25rem;
+            box-shadow: none;
 
-            & button {
+            button {
                 border-radius: 0.375rem !important;
             }
         }