diff options
| author | tanaka takashi <isazaka@gmail.com> | 2026-09-01 21:03:56 +0900 |
|---|---|---|
| committer | tanaka takashi <isazaka@gmail.com> | 2026-09-01 21:03:56 +0900 |
| commit | 64cf73643ca86841493c8165696c3199a4fa71e7 (patch) | |
| tree | a9eab8adb4955d946dbb9327c1a57b06e0182a29 /.gitignore | |
| parent | 5ba53d7b64b181134b9c594fd9881ec626eae791 (diff) | |
fix: action icon rendered as a thin bar in Firefox
The selection action icon appeared as a thin vertical bar on real
Firefox although the same markup rendered correctly in Chromium-based
test environments. The previous implementation wrapped the SVG in a
<button> with display:flex + align-items/justify-content center and
sized the SVG only through CSS (.btn svg { width/height }). Firefox
collapses this combination inside a shadow root, leaving just the
button border visible as a bar.
Hardened implementation:
- the SVG itself is now the clickable element (role=button, tabindex=0)
with explicit width="28" height="28" ATTRIBUTES, not CSS-only sizing
- explicit viewBox + white circle background (with border stroke) drawn
as SVG primitives so the glyph reads on dark pages and no button
styling quirks can collapse it
- :host gets display:block and .wrap gets explicit 28x28 dimensions
- removed the <button> wrapper and flex centering entirely
Visual verification: rendered the new icon in a live page and confirmed
a 32x32 circular icon with the translate glyph. Results: 73 passed,
0 failed. dist rebuilt.
Diffstat (limited to '.gitignore')
0 files changed, 0 insertions, 0 deletions
