Reduce spacing between field grid icons (localisable, duplicate, delete) on "Edit Blueprint" views

Author: jaygeorge

resources/css/components/publish.css

@@ -73,6 +73,11 @@ code.parent-url {
     > * {
         grid-column: span var(--col-span, var(--grid-columns));
     }
+    /* Target the group of icon buttons e.g. localisation, duplicate, delete */
+    [data-ui-card] :has(> button):has(svg) button {
+        /* Decrease the width of this sm button slightly, which is usually calc(var(--spacing) * 8) */
+        width: calc(var(--spacing) * 6.75);
+    }
 }
 
 

resources/js/components/ui/Button/Button.vue

@@ -60,7 +60,7 @@ const buttonClasses = computed(() => {
         },
         compoundVariants: [
             { iconOnly: true, size: 'base', class: 'w-10 [&_svg]:size-4.5' },
-            { iconOnly: true, size: 'sm', class: 'w-7 [&_svg]:size-3.5' },
+            { iconOnly: true, size: 'sm', class: 'w-8 [&_svg]:size-3.5' },
             { iconOnly: true, size: 'xs', class: 'w-6.5 [&_svg]:size-3' },
             { iconOnly: false, iconAppend: true, class: '[&_svg]:-me-1' },
             { iconOnly: false, iconPrepend: true, class: '[&_svg]:-ms-0.5' },