Using sliders and modals with React template results in widget overlaps

[doughagey]

Software Version Info

```plaintext Panel 1.4.2. Python 3.10.14. Chrome browser, React template ```

Description of expected behavior and the observed behavior

When using a React template, if the dashboard sidebar contains pn.widgets.IntRangeSlider elements and a pop-up modal activates, the pn.widgets.IntRangeSlider widgets will overlap the modal data when the user would expect the modal to sit on top of any widgets being displayed. In the attached example the rightmost pane is the modal and the leftmost is the sidebar with its accompanying widgets

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

self.league_strength_selector = pn.widgets.RangeSlider(
    name="League Strength",
    start=0,
    end=100,
    value=(0, 100),
    step=1,
)

self.multi_league_comparison_team_strength_selector = pn.widgets.RangeSlider(
    name="Team Strength",
    start=0,
    end=100,
    value=(0, 100),
    step=1,
    margin=(5, 10, 5, 10),
)

self.min_minutes_selector = pn.widgets.IntSlider(
    name="Minimum Minutes",
    start=0,
    end=900,
    step=90,
    value=450,
    margin=(5, 10, 5, 10),
)

self.gui = pn.template.ReactTemplate(
    title="Test",
    cols={"lg": 12, "md": 10, "sm": 6, "xs": 4, "xxs": 2},
    header_background="#0c0c54",
    sidebar_width=350,
    prevent_collision=True,
)
self.gui.modal.append(pn.Column())  # Blank holder for modal
self.figure_placeholder = pn.Column(self.logo)  # Blank holder for plot
self.gui.main[0:5, 0:10] = self.figure_placeholder
self.main_sidebar_layout = pn.Column()

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