Make widgets fill their container when a stretch sizing_mode is set

[ghostiee-11]

Overview

MaterialWidget defaults to a fixed width=300, so setting sizing_mode="stretch_width" (without also passing width=None) leaves the fixed width in place and the widget does not fill its container. This drops the default width/height when a stretch/scale sizing_mode is requested and no explicit size was passed, so widgets are responsive by intent. Standalone widgets keep their 300px default and explicit sizes are still respected.

Vertical sliders swap width and height at render, so a small _responsive_axes hook remaps the axis for them.

Demo

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.21%. Comparing base (3ddf938) to head (57a7602).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #689      +/-   ##
==========================================
+ Coverage   83.07%   83.21%   +0.13%     
==========================================
  Files          33       33              
  Lines        3805     3824      +19     
==========================================
+ Hits         3161     3182      +21     
+ Misses        644      642       -2     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[ahuang11]

I might be missing something here. Without this PR, I was able to stretch the slider.

import panel as pn
import panel_material_ui as pmui

pn.extension()

col = pmui.Column(
    pmui.IntSlider(value=5, start=0, end=10, sizing_mode="stretch_width"), width=600,
    # add an outline to the column
    sx={"border": "2px solid black", "padding": "10px", "border-radius": "5px"}
)
col.servable()

And without stretch_width:

import panel as pn
import panel_material_ui as pmui

pn.extension()

col = pmui.Column(
    pmui.IntSlider(value=5, start=0, end=10), width=600,
    # add an outline to the column
    sx={"border": "2px solid black", "padding": "10px", "border-radius": "5px"}
)
col.servable()

Can you explain what the issue is or how to reproduce?

On main (latest branch):

Location: /Users/ahuang/miniconda3/envs/lumen/lib/python3.12/site-packages
Editable project location: /Users/ahuang/repos/panel-material-ui

[ghostiee-11]

I am closing this, Thanks Andrew for reviewing!!