diff --git a/resources/js/components/ui/Button/Group.vue b/resources/js/components/ui/Button/Group.vue
index 45679891c26..b541de4f276 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,22 @@
         &: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;
+            box-shadow: none;
 
-        /* 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;
             }
         }
     }