fix: permission grid styling broken

Author: SychO9

extensions/tags/js/src/admin/addTagsPermissionScope.tsx

@@ -78,14 +78,14 @@ export default function () {
         'tag',
         <Dropdown
           className="Dropdown--restrictByTag"
-          buttonClassName="Button Button--text"
+          buttonClassName="Button Button--link"
           label={app.translator.trans('flarum-tags.admin.permissions.restrict_by_tag_heading')}
           icon="fas fa-plus"
           caretIcon={null}
         >
           {tags.map((tag) => (
-            <Button icon={true} onclick={() => tag.save({ isRestricted: true })}>
-              {[tagIcon(tag, { className: 'Button-icon' }), ' ', tag.name()]}
+            <Button icon={tagIcon(tag, { className: 'Button-icon' })} onclick={() => tag.save({ isRestricted: true })}>
+              {tag.name()}
             </Button>
           ))}
         </Dropdown>

framework/core/js/src/common/components/Button.tsx

@@ -11,8 +11,10 @@ export interface IButtonAttrs extends ComponentAttrs {
    * Class(es) of an optional icon to be rendered within the button.
    *
    * If provided, the button will gain a `has-icon` class.
+   *
+   * You may also provide a rendered icon element directly.
    */
-  icon?: string;
+  icon?: string | Mithril.Children;
   /**
    * Disables button from user input.
    *
@@ -80,6 +82,7 @@ export default class Button<CustomAttrs extends IButtonAttrs = IButtonAttrs> ext
       hasIcon: iconName,
       disabled: disabled || loading,
       loading: loading,
+      hasSubContent: !!this.getButtonSubContent(),
     });
 
     const buttonAttrs = {
@@ -110,10 +113,10 @@ export default class Button<CustomAttrs extends IButtonAttrs = IButtonAttrs> ext
    * Get the template for the button's content.
    */
   protected getButtonContent(children: Mithril.Children): Mithril.ChildArray {
-    const iconName = this.attrs.icon;
+    const icon = this.attrs.icon;
 
     return [
-      iconName && <Icon name={iconName} className="Button-icon" />,
+      icon ? typeof icon === 'string' ? <Icon name={icon} className="Button-icon" /> : icon : null,
       children && (
         <span className="Button-label">
           <span className="Button-labelText">{children}</span>

framework/core/less/admin/PermissionsPage.less

@@ -94,23 +94,19 @@
       }
     }
     .Dropdown {
-      display: block;
-
       .Dropdown-toggle {
         width: 100%;
-        display: block;
-        text-align: left;
-        float: none;
+        margin: -2px 0;
       }
       .Dropdown-menu {
-        margin: 0;
+        margin: 6px 0 0;
       }
     }
     .Button {
       text-decoration: none;
 
       .Badge {
-        margin: -3px 2px -3px 0;
+        margin: 0 2px 0 0;
       }
     }
     td:not(:hover) .Select-caret,
@@ -126,12 +122,8 @@
   margin: -1px 0;
 }
 .PermissionDropdown {
-  .Dropdown-toggle {
-    padding: 5px 0;
-    margin: -5px 0;
-  }
   .Badge {
-    margin: -3px 3px -3px 0;
+    margin: 0 3px 0 0;
     box-shadow: none;
   }
 }

framework/core/less/common/Dropdown.less

@@ -28,6 +28,7 @@
       padding: 8px 15px;
       display: flex;
       gap: 9px;
+      align-items: center;
       width: 100%;
       color: var(--text-color);
       border-radius: 0;
@@ -50,6 +51,10 @@
         flex-shrink: 0;
       }
 
+      &.hasSubContent {
+        align-items: flex-start;
+      }
+
       &.disabled {
         opacity: 0.4;
         background: none !important;