Plugin and module logos are drawn wrongly: a module's icon sits in the corner of its tile #901

New issue

Closed

opened 2026-10-12 18:16:42 +00:00 by tiagoagueda · 1 comment

tiagoagueda commented

2026-10-12 18:16:42 +00:00

Owner

The tiles beside a plugin's or a module's name, on Settings → Plugins and Server settings → Plugins, do not draw correctly.

The cause found so far: a module's icon is not centred in its tile

8fb9459ce (#874) draws a module that declares Manifest.icon as its Lucide icon on a coloured tile. _tile (core/templatetags/postulo.py:315-322) puts the <svg> directly inside <span class="avatar …">, at size-[55%]. Basecoat's centring lives on the inner span only:

.avatar > span:not(.avatar-badge) { display:flex; width:100%; height:100%; align-items:center; justify-content:center; … }

.avatar itself is only inline-flex, with no align-items or justify-content. So the icon sits in the tile's top-left corner instead of in its middle, at 24 px on the settings page and at 32 px on the server page. The initials tiles and the image tiles are not affected, because they go through the inner span and .avatar > img.

tests/test_module_icons.py only checks the HTML text (data-icon="map" is present), so nothing caught it.

What to do

Draw the glyph inside the same inner <span> the initials use, so Basecoat centres it, or centre it on the tile. Keep the size as a share of the tile (55 %), so the 24 px and 32 px tiles both look right.
Go over the other two branches on both pages, in light and dark, and fix whatever else is off:
- a logo the plugin shipped (.avatar > img, object-fit: contain since #291), with a transparent SVG and a non-square PNG, and how the tile's ::after border, with mix-blend-mode darken or lighten, sits over it;
- the initials tile.
Check the same tiles wherever else a plugin is drawn (connections, the catalogue, the plugin's own settings), so all of them use plugin_logo.

Done when

On both plugin pages, in light and dark, every module icon is centred in its tile both horizontally and vertically, and a shipped logo fills the tile without distortion.
A browser test checks that the centre of a module's svg[data-icon] matches the centre of its .avatar tile, and takes a screenshot of a tile with a shipped logo.

Checked against main at 75f31208b.

The tiles beside a plugin's or a module's name, on *Settings → Plugins* and *Server settings → Plugins*, do not draw correctly. ## The cause found so far: a module's icon is not centred in its tile `8fb9459ce` (#874) draws a module that declares `Manifest.icon` as its Lucide icon on a coloured tile. `_tile` (`core/templatetags/postulo.py:315-322`) puts the `<svg>` **directly** inside `<span class="avatar …">`, at `size-[55%]`. Basecoat's centring lives on the inner span only: ```css .avatar > span:not(.avatar-badge) { display:flex; width:100%; height:100%; align-items:center; justify-content:center; … } ``` `.avatar` itself is only `inline-flex`, with no `align-items` or `justify-content`. So the icon sits in the tile's top-left corner instead of in its middle, at 24 px on the settings page and at 32 px on the server page. The initials tiles and the image tiles are not affected, because they go through the inner span and `.avatar > img`. `tests/test_module_icons.py` only checks the HTML text (`data-icon="map"` is present), so nothing caught it. ## What to do 1. Draw the glyph inside the same inner `<span>` the initials use, so Basecoat centres it, or centre it on the tile. Keep the size as a share of the tile (55 %), so the 24 px and 32 px tiles both look right. 2. Go over the other two branches on both pages, in light and dark, and fix whatever else is off: - a logo the plugin shipped (`.avatar > img`, `object-fit: contain` since #291), with a transparent SVG and a non-square PNG, and how the tile's `::after` border, with `mix-blend-mode` darken or lighten, sits over it; - the initials tile. 3. Check the same tiles wherever else a plugin is drawn (connections, the catalogue, the plugin's own settings), so all of them use `plugin_logo`. ## Done when - On both plugin pages, in light and dark, every module icon is centred in its tile both horizontally and vertically, and a shipped logo fills the tile without distortion. - A browser test checks that the centre of a module's `svg[data-icon]` matches the centre of its `.avatar` tile, and takes a screenshot of a tile with a shipped logo. Checked against `main` at `75f31208b`.

tiagoagueda added the

bug

interface

labels

2026-10-12 18:16:50 +00:00

tiagoagueda commented

2026-10-13 08:34:17 +00:00

Author

Owner