fix(less): fix FA Kit icon alignment and spurious icon regressions#4409
Merged
fix(less): fix FA Kit icon alignment and spurious icon regressions#4409
Conversation
FA Kit (SVG+JS mode) dynamically injects a stylesheet after Flarum's compiled CSS, setting `display: block` via `--fa-display` on injected SVG elements. This broke several layouts. Also fixes a regression from d2129e6 where converting `.Button--icon` to a LESS-only parametric mixin removed its class-level CSS output, causing the caret/label to show in icon-only buttons. Changes: Button.less: - Scope the FA Kit display fix to `.Button .Button-icon` and `.Button .Button-caret` (was a broad global rule with `!important`). Placed before `.Button--icon` so hiding rules that follow can override it by cascade order at equal specificity — no !important needed anywhere. - Restore `.Button--icon` as a real CSS class selector (calls the mixin) so DOM elements with `class="Button--icon"` correctly hide the label and caret. This was a regression from d2129e6. Dropdown.less: - `.Dropdown--split .Dropdown-toggle .Button-icon`: was `display: none` but the old broad `!important` on `.Button-icon` prevented it from working, showing the ellipsis icon alongside the caret in split dropdown toggles. Now handled cleanly by cascade specificity. - `.Dropdown-menu .Button-icon`: add `width: 16px !important` to prevent the FA Kit stylesheet from overriding the fixed column width with `width: 1.25em`. Input.less: - `.Input-prefix-icon`: add `width: 36px !important` to prevent the FA Kit stylesheet from overriding the positioning width, which was causing the search icon to shift left. UserCard.js: - Only pass `icon="fas fa-ellipsis-v"` to the controls Dropdown when `controlsButtonClassName` contains `Button--icon` (icon-only context). With 2.x's inline-flex Button layout, the icon was visibly rendered alongside the "Controls" label on the user profile page, which was not the intended design. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
| label={app.translator.trans('core.forum.user_controls.button')} | ||
| accessibleToggleLabel={app.translator.trans('core.forum.user_controls.toggle_dropdown_accessible_label')} | ||
| icon="fas fa-ellipsis-v" | ||
| icon={this.attrs.controlsButtonClassName?.includes('Button--icon') ? 'fas fa-ellipsis-v' : undefined} |
Member
There was a problem hiding this comment.
This seems to have caused the ellipsis to not show up at all for eg. user actions on mobile. Icon is no longer present on discuss (the caret one is, but hidden) and instead has a hidden "Controls" button label.
https://discuss.flarum.org/d/38800-flarum-200-beta7-released-rc-is-on-the-horizon/115
imorland
added a commit
that referenced
this pull request
Apr 13, 2026
Regression from bf6b907 (#4409), which conditionally removed the icon prop from the UserHero controls Dropdown to prevent it rendering alongside the label on desktop. However, UserPage.less already has a rule hiding .Button-icon inside the UserHero on desktop, and the @media @phone App-primaryControl rules override it with display: block !important on mobile. The icon must always be rendered for this CSS to work. Revert the condition and always pass icon="fas fa-ellipsis-v".
imorland
added a commit
that referenced
this pull request
Apr 13, 2026
Regression from bf6b907 (#4409), which conditionally removed the icon prop from the UserHero controls Dropdown to prevent it rendering alongside the label on desktop. However, UserPage.less already has a rule hiding .Button-icon inside the UserHero on desktop, and the @media @phone App-primaryControl rules override it with display: block !important on mobile. The icon must always be rendered for this CSS to work. Revert the condition and always pass icon="fas fa-ellipsis-v".
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes several icon layout issues introduced by FA Kit (SVG+JS mode) support and a regression from the
.Button--iconLESS mixin conversion.Root causes
FA Kit injects a stylesheet dynamically (after Flarum's compiled CSS) that sets
display: blockvia--fa-displayon injected SVG elements. The previous fix used a broaddisplay: inline-block !importanton.Button-icon/.Button-caretglobally, which then required counter-!importantrules inDropdown.lessto hide elements — creating a cascade of overrides.d2129e63converted.Button--iconto a LESS-only parametric mixin, removing its class-level CSS output. DOM elements withclass="Button--icon"no longer had the caret/label hidden, causing the caret to appear in icon-only buttons (e.g. post controls···dropdown).UserCard controls dropdown was passing
icon="fas fa-ellipsis-v"unconditionally. With 2.x'sinline-flexButton layout the icon rendered visibly alongside the "Controls" label on the user profile page.Fixes
.Button .Button-icon, .Button .Button-caret(no!important), placed before.Button--iconso hiding rules that follow override it by cascade order. Restore.Button--iconas a real CSS class selector.!importantfrom split-dropdown hide/show rules (now handled by specificity/cascade). Addwidth: 16px !importanton dropdown menu.Button-iconto prevent the Kit stylesheet overriding the fixed column width.width: 36px !importanton.Input-prefix-iconto prevent the Kit stylesheet shifting the search icon left.iconto the controls Dropdown whencontrolsButtonClassNameincludesButton--icon(icon-only context).Test plan
···post controls, no ellipsis in UserPage "Controls" button, split dropdown shows caret only🤖 Generated with Claude Code