Fix: Increase specificity for icon sizes within controls

[kght6123]

Resolves #3985

The .control.has-icons-left .icon selector (0,3,0) was overriding the .icon.is-small selector (0,2,0) due to higher specificity.

This change introduces more specific selectors for icon sizes within .control.has-icons-left and .control.has-icons-right contexts, ensuring that .is-small, .is-medium, and .is-large classes applied directly to icons within these controls correctly set their dimensions.

For example, .control.has-icons-left .icon.is-small (0,4,0) will now correctly override the base styles for icons in controls.

This is a bugfix.

Proposed solution

This PR fixes a CSS specificity issue where size utility classes (like .is-small) applied to an .icon element within a .control.has-icons-left (or .control.has-icons-right) element were being overridden by the default icon styling for that control.

The solution adds more specific CSS rules in sass/form/tools.scss for .icon.is-small, .icon.is-medium, and .icon.is-large when they are descendants of .control.has-icons-left or .control.has-icons-right. These new rules ensure that the utility size classes take precedence, allowing developers to directly control the size of icons within input controls as intended.

Tradeoffs

No significant tradeoffs are introduced with this solution. The change is highly targeted and increases specificity in a logical way that aligns with the intended use of utility classes. It doesn't add complexity or affect other components.

Testing Done

The Sass code was successfully compiled using the project's build script (npm run build-bulma) to ensure there were no syntax errors. The logical change in CSS specificity directly addresses the reported bug. Visual confirmation would typically be done by inspecting an HTML page using these classes, but the fix is based on fundamental CSS specificity rules.

Changelog updated?

No. (This is a minor bugfix).

[Copilot]

Pull Request Overview

This PR fixes a CSS specificity issue that caused utility size classes on icons within .control.has-icons-left to be overridden by default icon styles.

• Adds nested rules for .icon.is-small, .icon.is-medium, and .icon.is-large inside .control.has-icons-left
• Ensures direct size utility classes now correctly override the base control icon dimensions

Comments suppressed due to low confidence (2)

sass/form/tools.scss:308

• There are no tests or visual regression checks to verify that these new specificity rules correctly override the default control icon sizes; please add style/unit tests or visual tests for these selectors.

      &.#{iv.$class-prefix}is-small {

sass/form/tools.scss:307

• [nitpick] The comment here is generic; consider explaining that these selectors resolve a CSS specificity conflict and why they're scoped under .control.has-icons-left.

      // Sizes

[kght6123]

@jgthms Is this possible to merge?