Material CSS for Select and MultiChoice differences

[cdeil]

ALL software version info

panel 1.3.1
bokeh 3.3.0
Chrome Version 118.0.5993.117 (Official Build) (arm64)
Firefox 119.0 (64-bit) MacOS

Description of expected behavior and the observed behavior

Similar to #5620, possibly a small regression.

I see in Chrome that the Select and MultiChoice widgets are rendered with some overlap to nearby components.

On Firefox it's rendered OK, although @philippjfr in https://github.com/holoviz/panel/issues/5620#issuecomment-1758496150 you mentioned that the intended look was to have the name label placed as Chrome does it.

Actually for me this is not very important, it's functional and looks OK in all browsers. Feel free to just close if you prefer to focus on more important stuff than CSS.

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

import panel as pn

select = pn.widgets.Select(name="Select widget", options=["Spam", "Ham", "Jam"])
multi_choice = pn.widgets.MultiChoice(name="MultiChoice widget", options=["spam", "ham"], value=["spam"])

template = pn.template.MaterialTemplate()
template.sidebar.extend([select, multi_choice])
template.servable()

Screenshots or screencasts of the bug in action

Chrome:

Firefox:

[cdeil]

With Panel 1.4.0rc4 and Bokeh 3.4.0 and latest browsers on MacOS I now see this:

Chrome looks good, only vertical offset between the widgets is too small:

Almost the same on FireFox:

Safari looks the worst like strike-through:

All browsers now show this warning, looks like a small incompatibility in latest Panel & Bokeh widgets?

Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message. bokeh-widgets.min.js:93:2627