Text custom panel icons are rendered as fixed 32×32 PNGs and can't fill non-square icon areas or be styled like SVG icons

[hodanli]

Steps to reproduce

• Open Firefox in a new profile
• Install Sidebery
• Open Sidebery settings → open any tabs/bookmarks panel config
• Set its Custom icon to "Text", e.g. opex::#111::bold 40px Arial
• Compare it in the navigation bar next to a panel using an uploaded SVG label icon

Actual behavior

The Text icon renders as a small, centered glyph inside a fixed 32×32 square with transparent padding around it. It does not fill the panel/icon area the way an uploaded SVG label does, and increasing the font-size in the syntax (e.g. 40px) does not widen it. The transparent padding can't be cropped or stretched via the Styles editor because the icon is a raster PNG.

Expected behavior, possible causes and additional notes

Expected: a Text icon should be able to fill the icon area (and scale crisply) like an uploaded SVG label icon, and ideally be matchable/restyle-able via custom CSS.

Likely cause — in src/page.setup/components/popup.panel-config.vue, drawTextIcon():

• canvas.width = 32; canvas.height = 32 → output is always a 32×32 square
• ctx.fillText(txt, 16, y, 32) → text is centered and clamped to 32px max width, so larger font-size values aren't honored
• canvas.toDataURL('image/png') → stored as a raster PNG (data:image/png), so it also can't be targeted by data:image/svg-based custom CSS

Possible solutions:

• Render text icons as SVG (data:image/svg+xml) with a element sized to the content, so they scale and fill like SVG label icons and can be styled via CSS, OR
• Auto-size the canvas to the measured text width instead of a hardcoded 32×32, and drop/relax the 32px maxWidth clamp in fillText.

Note: this may be better classified as an enhancement/feature request than a bug.

Environment: Sidebery 5.5.2, Firefox desktop.

System

Windows 11

Firefox version

152.0.3

Sidebery version

5.5.2

Logs