align not working for PNG pane

[MarcSkovMadsen]

trafficstars

Panel master branch

Context

I'm trying to help a user get started with Panel here https://discourse.holoviz.org/t/is-there-a-difference-in-performance-ease-of-use-between-templates/4013. I would like to add the Matplotlib logo to an example app. The logo is a png file I would like to center horizontally.

I cannot get align working. In my experience I seldom can.

align=center

import panel as pn

pn.extension(template="fast")

pn.Row(
    pn.pane.PNG(
        "https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Matplotlib_icon.svg/180px-Matplotlib_icon.svg.png",
        align=("center", "center"),
        background="yellow",
    ),
    sizing_mode="stretch_width",
    background="blue",
).servable(target="sidebar")

and this does not work either

import panel as pn

pn.extension(template="fast")

pn.Row(
    pn.pane.PNG(
        "https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Matplotlib_icon.svg/180px-Matplotlib_icon.svg.png",
        align=("center", "center"),
        background="yellow",
    ),
    sizing_mode="fixed",
    width=320,
    background="blue",
).servable(target="sidebar")

I would expect the image to be aligned horizontally. But it is not.

Workaround: pn.layout.HSpacer

import panel as pn

pn.extension(template="fast")

pn.Row(
    pn.layout.HSpacer(),
    pn.pane.PNG(
        "https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Matplotlib_icon.svg/180px-Matplotlib_icon.svg.png",
        align=("center", "center"),
        background="yellow",
    ),
    pn.layout.HSpacer(),
    sizing_mode="stretch_width",
    background="blue",
).servable(target="sidebar")

pn.Spacer does not work.

I tried pn.Spacer before pn.layout.HSpacer. I would expect that to work. But it does not.

import panel as pn

pn.extension(template="fast")

pn.Row(
    pn.Spacer(),
    pn.pane.PNG(
        "https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Matplotlib_icon.svg/180px-Matplotlib_icon.svg.png",
        align=("center", "center"),
        background="yellow",
    ),
    pn.Spacer(),
    sizing_mode="stretch_width",
    background="blue",
).servable(target="sidebar")