Skip to content

fix(icon): pin RuiIcon at --rui-icon-size in flex containers#526

Merged
kelsos merged 1 commit intorotki:mainfrom
kelsos:fix/rui-icon-shrink-0
Apr 28, 2026
Merged

fix(icon): pin RuiIcon at --rui-icon-size in flex containers#526
kelsos merged 1 commit intorotki:mainfrom
kelsos:fix/rui-icon-shrink-0

Conversation

@kelsos
Copy link
Copy Markdown
Member

@kelsos kelsos commented Apr 28, 2026

Summary

A flex item's default flex-shrink: 1 lets it compress below its declared width when a sibling exerts main-axis pressure — an explicit width doesn't prevent that. In RuiButton variant="list" the label is w-full text-nowrap, so a long label inside a width-bounded menu squeezes the RuiIcon SVG along the main axis while the height stays at the var-driven box, producing a sliver glyph (e.g. ~6×18 instead of 18×18).

RuiIcon's box is always intentionally driven by --rui-icon-size, so flex shrinking is never the desired behavior. Adding shrink-0 to the base classes pins every icon at its declared size for every consumer (list buttons, chips, toolbars) without per-call-site overrides.

Repro before the fix

<RuiMenu menu-class="max-w-[15rem]">
  <RuiButton variant="list">
    <template #prepend><RuiIcon name="lu-eye" /></template>
    Exclude events from Accounting
  </RuiButton>
</RuiMenu>

The eye icon renders at ~6 × 18px because the long label is w-full and pushes the SVG below its declared width.

Change

  • RuiIcon.vue: prepend shrink-0 to the base iconStyles slot.
  • RuiIcon.spec.ts: regression guard asserting shrink-0 is present so a future refactor can't silently drop it.

Test plan

  • pnpm test -- --run RuiIcon — 1082 / 1082 pass
  • Visual smoke in a long-label variant="list" menu (e.g. rotki's history-event action menu) — icon renders at 18×18 instead of being squeezed

A flex item's default `flex-shrink: 1` lets it compress below its
declared width when a sibling exerts main-axis pressure — an explicit
`width` doesn't stop it. In `RuiButton variant="list"` the label is
`w-full text-nowrap`, so a long label inside a width-bounded menu
squeezes the SVG sibling along the main axis while the height stays at
the var-driven box, producing a sliver glyph (e.g. ~6×18 instead of
18×18).

`RuiIcon`'s box is always intentionally driven by `--rui-icon-size`, so
flex shrinking is never the desired behavior. `shrink-0` on the base
classes pins every icon at its declared size for every consumer (list
buttons, chips, toolbars) without per-call-site overrides.
@kelsos kelsos requested a review from a team as a code owner April 28, 2026 16:54
@codecov-commenter
Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 84.80%. Comparing base (61b6d4c) to head (cfde3d0).

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #526   +/-   ##
=======================================
  Coverage   84.80%   84.80%           
=======================================
  Files         145      145           
  Lines        5260     5260           
  Branches     1571     1571           
=======================================
  Hits         4461     4461           
  Misses        799      799           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@kelsos kelsos merged commit cfde3d0 into rotki:main Apr 28, 2026
5 checks passed
@kelsos kelsos deleted the fix/rui-icon-shrink-0 branch April 28, 2026 17:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants