solara-ui 1.40.0__py2.py3-none-any.whl → 1.42.0__py2.py3-none-any.whl

solara/util.py

@@ -31,6 +31,28 @@ except RuntimeError:
     has_threads = False
 
 
+from reacton.utils import equals as equals_extra
+
+
+def equals_pickle(a, b):
+    """Compare two values for equality.
+
+    Avoid false negative, e.g. when comparing dataframes, we want to compare
+    the data, not the object identity.
+
+    """
+    if equals_extra(a, b):
+        return True
+    import pickle
+
+    try:
+        if pickle.dumps(a) == pickle.dumps(b):
+            return True
+    except Exception:
+        pass
+    return False
+
+
 def github_url(file):
     rel_path = os.path.relpath(file, Path(solara.__file__).parent.parent)
     github_url = solara.github_url + f"/blob/{solara.git_branch}/" + rel_path

solara/website/components/markdown.py

@@ -1,8 +1,12 @@
 from typing import Dict, List, Union
 
 import yaml
+import markdown
+import mkdocs_pycafe
+import pymdownx.superfences
 
 import solara
+from solara.components.markdown import formatter, _no_deep_copy_emojione
 
 
 # We want to separate metadata from the markdown files before rendering them, which solara.Markdown doesn't support
@@ -27,12 +31,52 @@ def MarkdownWithMetadata(content: str, unsafe_solara_execute=True):
                 solara.Meta(property=key, content=value)
             else:
                 solara.Meta(name=key, content=value)
+
+    def make_markdown_object():
+        return markdown.Markdown(  # type: ignore
+            extensions=[
+                "pymdownx.highlight",
+                "pymdownx.superfences",
+                "pymdownx.emoji",
+                "toc",  # so we get anchors for h1 h2 etc
+                "tables",
+            ],
+            extension_configs={
+                "pymdownx.emoji": {
+                    "emoji_index": _no_deep_copy_emojione,
+                },
+                "pymdownx.superfences": {
+                    "custom_fences": [
+                        {
+                            "name": "mermaid",
+                            "class": "mermaid",
+                            "format": pymdownx.superfences.fence_div_format,
+                        },
+                        {
+                            "name": "solara",
+                            "class": "",
+                            "validator": mkdocs_pycafe.validator,
+                            "format": mkdocs_pycafe.formatter(type="solara", next_formatter=formatter(unsafe_solara_execute), inside_last_div=False),
+                        },
+                        {
+                            "name": "python",
+                            "class": "highlight",
+                            "validator": mkdocs_pycafe.validator,
+                            "format": mkdocs_pycafe.formatter(type="solara", next_formatter=formatter(unsafe_solara_execute), inside_last_div=False),
+                        },
+                    ],
+                },
+            },
+        )
+
+    md_parser = solara.use_memo(make_markdown_object, dependencies=[unsafe_solara_execute])
+
     with solara.v.Html(
         tag="div",
         style_="display: flex; flex-direction: row; justify-content: center; gap: 15px; max-width: 90%; margin: 0 auto;",
         attributes={"id": "markdown-to-navigate"},
     ):
-        solara.Markdown(content, unsafe_solara_execute=unsafe_solara_execute, style="flex-grow: 1; max-width: min(100%, 1024px);")
+        solara.Markdown(content, unsafe_solara_execute=unsafe_solara_execute, style="flex-grow: 1; max-width: min(100%, 1024px);", md_parser=md_parser)
         MarkdownNavigation(id="markdown-to-navigate").key("markdown-nav" + str(hash(content)))
 
 

solara/website/components/sidebar.py

@@ -15,7 +15,9 @@ def Sidebar():
             break
 
     with solara.v.List(
-        expand=True, nav=True, style_="height: 100%; display: flex; flex-direction: column; background-color: var(--color-material-background);"
+        expand=True,
+        nav=True,
+        style_="height: 100%; max-height: 100vh; display: flex; flex-direction: column; background-color: var(--color-material-background); overflow-y: auto;",
     ) as main:
         with solara.v.ListItemGroup(v_model=router.path):
             # e.g. getting_started, examples, components, api, advanced, faq

solara/website/pages/__init__.py

@@ -280,13 +280,19 @@ def Layout(children=[]):
                         justify="center" if route_current is not None and route_current.path in ["documentation", "showcase"] else "start",
                     ):
                         if route_current is not None and route_current.module is not None and hasattr(route_current.module, "Sidebar"):
-                            with solara.v.NavigationDrawer(
-                                clipped=True,
-                                class_="d-none d-md-block",
-                                height="unset",
-                                style_="min-height: calc(100vh - 64px);",
-                                width="20rem",
-                                v_model=True,  # Forces menu to display even if it had somehow been closed
+                            with solara.v.Sheet(
+                                style_="""
+                                    height: 100vh;
+                                    width: 20rem;
+                                    overflow: auto;
+                                    border-right: 1px solid var(--color-border-appbar);
+                                    position: sticky;
+                                    top: 0;
+                                    flex-direction: column;
+                                    gap: 0;
+                                """,
+                                class_="d-md-flex d-none",
+                                elevation=0,
                             ):
                                 route_current.module.Sidebar()
                         with rv.Col(

solara/website/pages/changelog/changelog.md

@@ -1,5 +1,14 @@
 # Solara Changelog
 
+## Version 1.41.0
+   * Feature: Mutation detection is now available under the `SOLARA_STORAGE_MUTATION_DETECTION` environmental variable. [#595](https://github.com/widgetti/solara/pull/595).
+   * Feature: Autofocusing text inputs is now supported. [#788](https://github.com/widgetti/solara/pull/788).
+   * Feature: Custom colours are now supported for the Solara loading spinner. [#858](https://github.com/widgetti/solara/pull/858)
+   * Bug Fix: Echarts responsive size is now properly supported. [#273](https://github.com/widgetti/solara/pull/273).
+   * Bug Fix: Some version checks would prevent Solara from starting. [#904](https://github.com/widgetti/solara/pull/904).
+   * Bug Fix: Solara apps running in qt mode (`--qt`) should now always work correctly. [#856](https://github.com/widgetti/solara/pull/856).
+   * Bug Fix: Hot reloading of files outside working directory would crash app. [069a205](https://github.com/widgetti/solara/commit/069a205c88a8cbcb0b0ca23f4d56889c8ad6134a) and [#869](https://github.com/widgetti/solara/pull/869).
+
 ## Version 1.40.0
    * Feature: In Jupyter Notebook and Lab, Solara (server) now renders the [ipypopout](https://github.com/widgetti/ipypopout) window instead of Voila [#805](render ipypopout content in jupyter notebook and lab)
    * Feature: Support styling input field of [ChatInput component](https://solara.dev/documentation/components/lab/chat). [#800](https://github.com/widgetti/solara/pull/800).

solara/website/pages/documentation/advanced/content/20-understanding/40-routing.md

@@ -196,7 +196,7 @@ Note that all routes are relative, since a component does not know if it is embe
 
 
 Therefore you should never use the `route.path` for navigation since the route object has no knowledge of the full url
-(e.g. `/docs/basics/ipywigets`) but only knows its small piece of the pathname (e.g. `ipywidgets`)
+(e.g. `/docs/basics/ipywidgets`) but only knows its small piece of the pathname (e.g. `ipywidgets`)
 
 Using [`resolve_path`](/documentation/api/routing/resolve_path) we can request the full url for navigation.
 
@@ -219,6 +219,22 @@ def LinkToIpywidgets():
     return main
 ```
 
+### Linking to Sections of a Page
+
+The `solara.Link` component also supports linking to HTML elements identified by id. Although most Solara components don't directly support the id attribute, you can assign ids to all ipyvuetify components, using the `attributes` argument:
+
+```python
+solara.v.Btn(attributes={"id": "my-id"}, ...)
+```
+
+You can then link to a particular element by appending `#` followed by its id to your link, i.e. `solara.Link(route_or_path="/page#my-id")`. If you want the page to smoothly scroll to the linked element, you should give an element that contains it (for instance the `html`-element) the following CSS rule:
+
+```css
+html {
+    scroll-behaviour: smooth;
+}
+```
+
 ## Fully manual routing
 
 If you want to do routing fully manually, you can use the [`solara.use_router`](/documentation/api/routing/use_router) hook, and use the `.path` attribute.

solara/website/pages/documentation/api/cross_filter/cross_filter_dataframe.py

@@ -13,11 +13,10 @@ df = plotly.data.gapminder()
 @solara.component
 def Page():
     solara.provide_cross_filter()
-    with solara.VBox() as main:
-        solara.CrossFilterReport(df, classes=["py-2"])
-        solara.CrossFilterSelect(df, "country")
-        solara.CrossFilterDataFrame(df)
-    return main
+
+    solara.CrossFilterReport(df, classes=["py-2"])
+    solara.CrossFilterSelect(df, "country")
+    solara.CrossFilterDataFrame(df)
 
 
 __doc__ += apidoc(solara.CrossFilterDataFrame.f)  # type: ignore

solara/website/pages/documentation/api/cross_filter/cross_filter_report.py

@@ -12,11 +12,9 @@ df = plotly.data.gapminder()
 @solara.component
 def Page():
     solara.provide_cross_filter()
-    with solara.VBox() as main:
-        solara.CrossFilterReport(df, classes=["py-2"])
-        solara.CrossFilterSelect(df, "country")
-        solara.CrossFilterSlider(df, "gdpPercap", mode=">")
-    return main
+    solara.CrossFilterReport(df, classes=["py-2"])
+    solara.CrossFilterSelect(df, "country")
+    solara.CrossFilterSlider(df, "gdpPercap", mode=">")
 
 
 __doc__ += apidoc(solara.CrossFilterReport.f)  # type: ignore

solara/website/pages/documentation/api/cross_filter/cross_filter_select.py

@@ -12,11 +12,9 @@ df = plotly.data.tips()
 @solara.component
 def Page():
     solara.provide_cross_filter()
-    with solara.VBox() as main:
-        solara.CrossFilterReport(df, classes=["py-2"])
-        solara.CrossFilterSelect(df, "sex")
-        solara.CrossFilterSelect(df, "time")
-    return main
+    solara.CrossFilterReport(df, classes=["py-2"])
+    solara.CrossFilterSelect(df, "sex")
+    solara.CrossFilterSelect(df, "time")
 
 
 __doc__ += apidoc(solara.CrossFilterSelect.f)  # type: ignore

solara/website/pages/documentation/api/cross_filter/cross_filter_slider.py

@@ -12,11 +12,9 @@ df = plotly.data.gapminder()
 @solara.component
 def Page():
     solara.provide_cross_filter()
-    with solara.VBox() as main:
-        solara.CrossFilterReport(df, classes=["py-2"])
-        solara.CrossFilterSlider(df, "pop", mode=">")
-        solara.CrossFilterSlider(df, "gdpPercap", mode="<")
-    return main
+    solara.CrossFilterReport(df, classes=["py-2"])
+    solara.CrossFilterSlider(df, "pop", mode=">")
+    solara.CrossFilterSlider(df, "gdpPercap", mode="<")
 
 
 __doc__ += apidoc(solara.CrossFilterSlider.f)  # type: ignore

solara/website/pages/documentation/api/hooks/use_cross_filter.py

@@ -15,11 +15,9 @@ df = plotly.data.gapminder()
 @solara.component
 def Page():
     solara.provide_cross_filter()
-    with solara.VBox() as main:
-        solara.CrossFilterReport(df, classes=["py-2"])
-        solara.CrossFilterSelect(df, "continent")
-        solara.CrossFilterSlider(df, "gdpPercap", mode=">")
-    return main
+    solara.CrossFilterReport(df, classes=["py-2"])
+    solara.CrossFilterSelect(df, "continent")
+    solara.CrossFilterSlider(df, "gdpPercap", mode=">")
 
 
 __doc__ += apidoc(solara.use_cross_filter)  # type: ignore

solara/website/pages/documentation/api/hooks/use_exception.py

@@ -18,16 +18,14 @@ def Page():
     value_previous = solara.use_previous(value)
     exception, clear_exception = solara.use_exception()
     # print(exception)
-    with solara.VBox() as main:
-        if exception:
+    if exception:
 
-            def reset():
-                set_value(value_previous)
-                clear_exception()
+        def reset():
+            set_value(value_previous)
+            clear_exception()
 
-            solara.Text("Exception: " + str(exception))
-            solara.Button(label="Go to previous state", on_click=reset)
-        else:
-            solara.IntSlider(value=value, min=0, max=10, on_value=set_value, label="Pick a number, except 3")
-            UnstableComponent(value)
-    return main
+        solara.Text("Exception: " + str(exception))
+        solara.Button(label="Go to previous state", on_click=reset)
+    else:
+        solara.IntSlider(value=value, min=0, max=10, on_value=set_value, label="Pick a number, except 3")
+        UnstableComponent(value)

solara/website/pages/documentation/api/hooks/use_previous.py

@@ -20,14 +20,11 @@ title = "use_previous"
 def Page():
     value, set_value = solara.use_state(4)
     value_previous = solara.use_previous(value)
-    with solara.VBox() as main:
-        solara.IntSlider("value", value=value, on_value=set_value)
-        solara.Markdown(
-            f"""
-        **Current**:  `{value}`
+    solara.IntSlider("value", value=value, on_value=set_value)
+    solara.Markdown(
+        f"""
+    **Current**:  `{value}`
 
-        **Previous**: `{value_previous}`
+    **Previous**: `{value_previous}`
 """
-        )
-
-    return main
+    )

solara/website/pages/documentation/api/hooks/use_state_or_update.py

@@ -41,29 +41,26 @@ def Page():
     parent_value, set_parent_value = solara.use_state(4)
     # used to force rerenders
     rerender_counter, set_rerender_counter = solara.use_state(4)
-    with solara.VBox() as main:
-        with solara.Card("Parent value selection"):
-            solara.Info("This slider value gets passed down to the child components")
-            solara.IntSlider("parent value", value=parent_value, on_value=set_parent_value)
-            solara.Button("Force redraw", on_click=lambda: set_rerender_counter(rerender_counter + 1))
-
-        with solara.Card("Child without state"):
-            solara.Info("This child will simply render the value passed into the argument, a redraw will reset it to its parent value.")
-            SliderWithoutState(parent_value)
-
-        with solara.Card("Child with state"):
-            solara.Info("This child will not care about the value passed into the prop, it manages its own state.")
-            SliderWithState(parent_value)
-
-        with solara.Card("Child with state (or update)"):
-            solara.Info("This child will update when the passes in a new value, but a redraw will not reset it.")
-            SliderWithStateOrUpdate(parent_value)
-
-        with solara.Card("Child with state + key"):
-            solara.Info(
-                "We can also use the `.key(...)` method to force the component to forget its state, this will however cause the widget to be re-created"
-                "(a performance penalty)."
-            )
-            SliderWithState(parent_value).key(f"slider-{parent_value}")
-
-    return main
+    with solara.Card("Parent value selection"):
+        solara.Info("This slider value gets passed down to the child components")
+        solara.IntSlider("parent value", value=parent_value, on_value=set_parent_value)
+        solara.Button("Force redraw", on_click=lambda: set_rerender_counter(rerender_counter + 1))
+
+    with solara.Card("Child without state"):
+        solara.Info("This child will simply render the value passed into the argument, a redraw will reset it to its parent value.")
+        SliderWithoutState(parent_value)
+
+    with solara.Card("Child with state"):
+        solara.Info("This child will not care about the value passed into the prop, it manages its own state.")
+        SliderWithState(parent_value)
+
+    with solara.Card("Child with state (or update)"):
+        solara.Info("This child will update when the passes in a new value, but a redraw will not reset it.")
+        SliderWithStateOrUpdate(parent_value)
+
+    with solara.Card("Child with state + key"):
+        solara.Info(
+            "We can also use the `.key(...)` method to force the component to forget its state, this will however cause the widget to be re-created"
+            "(a performance penalty)."
+        )
+        SliderWithState(parent_value).key(f"slider-{parent_value}")

solara/website/pages/documentation/api/hooks/use_thread.py

@@ -3,7 +3,7 @@ from pathlib import Path
 from typing import Optional, cast
 
 import solara
-from solara.alias import rv, rw
+from solara.alias import rw
 
 HERE = Path(__file__).parent
 title = "use_thread"
@@ -29,16 +29,14 @@ def Page():
     # work will be cancelled/restarted every time the dependency changes
     result: solara.Result[bool] = solara.use_thread(work, dependencies=[number])
 
-    with solara.VBox() as main:
-        rw.IntText(value=number, on_value=set_number)
-        if result.state == solara.ResultState.FINISHED:
-            if result.value:
-                solara.Success(f"{number} is a prime!")
-            else:
-                solara.Error(f"{number} is not a prime, it can be divided by {proof} ")
-        elif result.state == solara.ResultState.ERROR:
-            solara.Error(f"Error occurred: {result.error}")
+    rw.IntText(value=number, on_value=set_number)
+    if result.state == solara.ResultState.FINISHED:
+        if result.value:
+            solara.Success(f"{number} is a prime!")
         else:
-            solara.Info(f"Running... (status = {result.state})")
-            rv.ProgressLinear(indeterminate=True)
-    return main
+            solara.Error(f"{number} is not a prime, it can be divided by {proof} ")
+    elif result.state == solara.ResultState.ERROR:
+        solara.Error(f"Error occurred: {result.error}")
+    else:
+        solara.Info(f"Running... (status = {result.state})")
+        solara.v.ProgressLinear(indeterminate=True)

solara/website/pages/documentation/api/utilities/on_kernel_start.py

@@ -19,6 +19,23 @@ The return value of on_kernel_start is a cleanup function that will remove the c
 
 During hot reload, the callbacks that are added from scripts or modules that will be reloaded will be removed before the app is loaded
 again. This can cause the order of the callbacks to be different than at first run.
+
+## Example
+
+```
+import solara
+import solara.lab
+
+
+@solara.lab.on_kernel_start
+def on_kernel_start():
+    id = solara.get_kernel_id()
+    print("Kernel started", id)
+    def cleanup():
+        print("Kernel stopped", id)
+    return cleanup  # this function will be called on kernel shutdown
+```
+
 """
 
 from solara.website.components import NoPage

solara/website/pages/documentation/components/input/input.py

@@ -19,3 +19,25 @@ __doc__ += "# InputFloat"
 __doc__ += apidoc(solara.InputFloat.f)  # type: ignore
 __doc__ += "# InputInt"
 __doc__ += apidoc(solara.InputInt.f)  # type: ignore
+
+__doc__ += """
+# Autofocus Example
+
+```solara
+import solara
+import solara.lab
+
+
+@solara.component
+def Page():
+    show_dialog = solara.use_reactive(False)
+    show_conditional = solara.use_reactive(False)
+    with solara.Row():
+        solara.Button("Show dialog", on_click=lambda: show_dialog.set(True))
+        solara.Button("Show conditionally rendered element", on_click=lambda: show_conditional.set(not show_conditional.value))
+    with solara.lab.ConfirmationDialog(open=show_dialog):
+        solara.InputFloat("Float here", autofocus=True)
+    if show_conditional.value:
+        solara.InputFloat("Float here", autofocus=True)
+```
+"""

solara/website/pages/documentation/components/viz/echarts.py

@@ -63,7 +63,9 @@ def Page():
             with solara.ToggleButtonsSingle("bars", on_value=set_option):
                 solara.Button("bars")
                 solara.Button("pie")
-            solara.FigureEcharts(option=options[option], on_click=set_click_data, on_mouseover=set_mouseover_data, on_mouseout=set_mouseout_data)
+            solara.FigureEcharts(
+                option=options[option], on_click=set_click_data, on_mouseover=set_mouseover_data, on_mouseout=set_mouseout_data, responsive=True
+            )
         with solara.Card("Event data"):
             solara.Markdown(f"**Click data**: {click_data}")
             solara.Markdown(f"**Mouseover data**: {mouseover_data}")

solara/website/pages/documentation/examples/__init__.py

@@ -25,28 +25,20 @@ def Layout(children):
     assert module is not None
     github_url = solara.util.github_url(module.__file__)
 
-    with solara.HBox(grow=False) as main:
-        if route_current.path == "fullscreen":
-            with solara.Padding(4, children=children):
-                pass
-        else:
-            with solara.VBox(grow=True, align_items="baseline"):
-                doc = module.__doc__
-                if doc:
-                    with solara.VBox(grow=True):
-                        MarkdownWithMetadata(doc)
-                with solara.HBox():
-                    if route_current.path != "/":
-                        solara.Button("View source code on GitHub", icon_name="mdi-github-circle", href=github_url, class_="ma-2", target="_blank", text=True)
-                        # code = inspect.getsource(module)
-
-                        # code_quoted = urllib.parse.quote_plus(code)
-                        # url = f"https://test.solara.dev/try?code={code_quoted}"
-                        # solara.Button("Run on solara.dev", icon_name="mdi-pencil", href=url, class_="ma-2", target="_blank")
-                # with solara.HBox():
+    if route_current.path == "fullscreen":
+        with solara.Padding(4, children=children):
+            pass
+    else:
+        with solara.Column(align="center", style={"max-width": "100%"}):
+            doc = module.__doc__
+            if doc:
+                with solara.Column():
+                    MarkdownWithMetadata(doc)
+            with solara.Column(style={"max-width": "min(100%, 1024px)", "width": "100%"}):
+                if route_current.path != "/":
+                    solara.Button("View source code on GitHub", icon_name="mdi-github-circle", href=github_url, class_="ma-2", target="_blank", text=True)
                 if not hasattr(module, "Page"):
                     solara.Error(f"No Page component found in {module}")
                 else:
-                    with solara.Padding(4, children=children):
+                    with solara.Div(children=children):
                         pass
-    return main

solara/website/pages/documentation/examples/ai/chatbot.py

@@ -77,7 +77,7 @@ def Page():
     task = solara.lab.use_task(call_openai, dependencies=[user_message_count])  # type: ignore
 
     with solara.Column(
-        style={"width": "700px", "height": "50vh"},
+        style={"width": "100%", "height": "50vh"},
     ):
         with solara.lab.ChatBox():
             for item in messages.value:

solara/website/pages/documentation/examples/general/pokemon_search.py

@@ -10,8 +10,8 @@ from solara import use_fetch
 from solara.alias import rv
 
 github_url = solara.util.github_url(__file__)
-
-json_url = "https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json"
+pokemon_base_url = "https://raw.githubusercontent.com/jherr/pokemon/0722479d4153b1db0d0326956b08b37f44a95a5f"
+json_url = f"{pokemon_base_url}/index.json"
 
 
 @solara.component
@@ -40,7 +40,7 @@ def Page():
                     for pokemon in pokemons[:20]:
                         with solara.Div():
                             name = pokemon["name"]
-                            url = "https://jherr-pokemon.s3.us-west-1.amazonaws.com/" + pokemon["image"]
+                            url = f'{pokemon_base_url}/{pokemon["image"]}'
                             # TODO: how to do this with solara
                             rv.Img(src=url, contain=True, max_height="200px")
                             solara.Text(name)

solara/website/pages/documentation/examples/general/vue_component.py

@@ -35,7 +35,7 @@ def Page():
     sales_data = np.floor(np.cumsum(gen.random(7) - 0.5) * 100 + 100)
     show_report = solara.use_reactive(False)
 
-    with solara.Column(style={"min-width": "600px"}):
+    with solara.Column():
         if show_report.value:
             with solara.Card("Report"):
                 solara.Markdown("Lorum ipsum dolor sit amet")

solara/website/pages/documentation/examples/libraries/altair.py

@@ -38,6 +38,7 @@ def Page():
         )
         .configure_view(step=13, strokeWidth=0)
         .configure_axis(domain=False)
+        .properties(width="container")
     )
     with solara.Card("Annual Weather Heatmap for Seattle, WA"):
         solara.AltairChart(chart, on_click=on_click)

solara/website/pages/documentation/examples/libraries/bqplot.py

@@ -34,6 +34,6 @@ def Page(x=x0, ymax=5):
     lines = bqplot.Lines(x=x, y=y, scales={"x": x_scale, "y": y_scale}, stroke_width=3, colors=[color], display_legend=display_legend, labels=[label])
     x_axis = bqplot.Axis(scale=x_scale)
     y_axis = bqplot.Axis(scale=y_scale, orientation="vertical")
-    bqplot.Figure(axes=[x_axis, y_axis], marks=[lines], scale_x=x_scale, scale_y=y_scale, layout={"min_width": "800px"})
+    bqplot.Figure(axes=[x_axis, y_axis], marks=[lines], scale_x=x_scale, scale_y=y_scale, layout={"max_width": "100%", "width": "100%"})
 
     # return main

solara/website/pages/documentation/examples/libraries/ipyleaflet.py

@@ -15,7 +15,7 @@ bounds = solara.reactive(None)
 @solara.component
 def Page():
     # Isolation is required to prevent the map from overlapping navigation (when screen width < 960px)
-    with solara.Column(style={"min-width": "500px", "height": "500px", "isolation": "isolate"}):
+    with solara.Column(style={"width": "100%", "height": "500px", "isolation": "isolate"}):
         # solara components support reactive variables
         solara.SliderInt(label="Zoom level", value=zoom, min=1, max=20)
         # using 3rd party widget library require wiring up the events manually

solara/website/pages/documentation/examples/libraries/ipyleaflet_advanced.py

@@ -31,7 +31,7 @@ def Page():
         # do things with the location
         marker_location.set(location)
 
-    with solara.Column(style={"min-width": "500px", "height": "500px"}):
+    with solara.Column(style={"width": "100%", "height": "500px"}):
         solara.Markdown(f"Market set to: {marker_location.value}", style={"color": "#6e6e6e"})
 
         map = maps[map_name.value]