Plotly Maps: Copyright Notice Field overlaps with other Panel Elements

[michaelweinold]

ALL software version info

Software Version Info

panel==1.5.2
plotly==5.24.1

Description of expected behavior and the observed behavior

When rendering a Plotly geographic map (such as the scatter_map), the copyright notice for the map tile data is rendered below the map - and overlaps with other Panel elements (shown for example here is a markdown header Some Caption):

The same map, when rendered outside of a Panel application is neatly shown inside the map:

The relevant element of a Plotly map is named the maplibregl-ctrl-attrib-button. While the function that draws the text and box is defined here, I could not find why the position is different if the map is rendered via Panel.

Complete, minimal, self-contained example code that reproduces the issue

import panel as pn
import pandas as pd
import plotly.express as px

pn.extension("plotly")
# 
fig = px.scatter_map(
    lat=[],
    lon=[],
    zoom=0,
    height=300
)
fig.update_layout(map_style="open-street-map")
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})

plotly_pane = pn.Column(
     pn.pane.Plotly(fig),
    '# Some Caption',
)
plotly_pane.servable()

Stack traceback and/or browser JavaScript console output

Screenshots or screencasts of the bug in action

• I may be interested in making a pull request to address this