style(ui): add icon-only button sizing and fix action column alignment

src/features/admin/pages/RolesPage.client.js

@@ -80,7 +80,7 @@ const RolesPageClient = () => {
             noWrap: true,
             align: 'right',
             render: (role) => (
-                <div className="flex items-center gap-2">
+                <div className="flex items-center justify-end gap-2">
                     <Button
                         variant="secondary"
                         size="sm"
@@ -96,7 +96,6 @@ const RolesPageClient = () => {
                             onClick={() => handleDelete(role)}
                             icon={<Cancel01Icon className="w-4 h-4" />}
                         >
-                            Supprimer
                         </Button>
                     )}
                 </div>

src/shared/components/Button.js

@@ -32,6 +32,14 @@ const Button = ({
         lg: 'px-6 py-3 text-base gap-2.5'
     };
 
+    const iconOnlySizes = {
+        sm: 'p-[6px] text-[12px]',
+        md: 'p-[7px] text-[13px]',
+        lg: 'p-3 text-base'
+    };
+
+    const isIconOnly = icon && !children;
+    
     const iconSizes = {
         sm: 'w-3.5 h-3.5',
         md: 'w-4 h-4',
@@ -53,7 +61,7 @@ const Button = ({
             type={type}
             onClick={handleClick}
             disabled={disabled || loading}
-            className={`${baseClassName} ${variants[variant]} ${sizes[size]} ${className}`}
+            className={`${baseClassName} ${variants[variant]} ${isIconOnly ? iconOnlySizes[size] : sizes[size]} ${className}`}
             {...props}
         >
             {loading ? (