Widget based plots don't look good on a smartphone

[Azaya89]

ALL software version info

Software Version Info

hvplot = 0.11.3.dev11+gbb3be85.d20250203
holoviews = 1.20.1a0
bokeh = 3.6.2

Description of expected and observed behavior

Expected Behavior
When I set responsive=True on a widget-based plot, I expect both the plot and its widgets to dynamically scale for smaller screens (e.g., smartphone displays).

Observed Behavior
While the plot resizes correctly, the widgets remain at their original size, causing them to overlap and obscure the plot.

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

import pandas as pd
import hvplot.pandas

data = 'https://datasets.holoviz.org/penguins/v1/penguins.csv'
df_penguins = pd.read_csv(data)


df_penguins.hvplot.scatter(x='bill_length_mm', y='bill_depth_mm',
                           groupby=['island', 'sex'], height=300, responsive=True)

Stack traceback and/or browser JavaScript console output

None

Screenshots or screencasts of the bug in action

iPhone 14 Pro-max

Samsung galaxy S20 Ultra

Google Pixel 7

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

[maximlt]

Can this be reproduced with pure HoloViews code?

[Azaya89]

Can this be reproduced with pure HoloViews code?

Yeah, sure:

import pandas as pd
import holoviews as hv

hv.extension('bokeh')

df = pd.read_csv('https://datasets.holoviz.org/penguins/v1/penguins.csv')


grouped_scatter = hv.Scatter(df, ('bill_length_mm'), vdims=['bill_depth_mm', 'island', 'sex']).groupby(['island', 'sex'])
grouped_scatter.opts(height=300, responsive=True)

[maximlt]

Then that's more likely to be a HoloViews issue. I wonder if part of it is not a Bokeh issue too, the widgets overlapping the plot should not happen I think.

[hoxbro]

I don't think there is a lot we can do in HoloViews. Changes are likely needed in Panel or Bokeh.

[maximlt]

In Panel, you mean to the HoloViews pane? I haven't checked who's responsible for passing down responsive=True. What would be great would be to dynamically move the widgets above or below the plot when the whole width gets too narrow. By the way, @Azaya89 this makes me think this is the workaround we usually employ to make this look OK on smaller screens.

[ahuang11]

Random thought, I wonder if https://github.com/panel-extensions/panel-material-ui addresses this