docs: fixes for mobile users (#832)

Because we previously used a `solara.v.NavigationDrawer` with `v_model=True`, that was only hidden and not destroyed on mobile, Vuetify would think that a floating navigation drawer is open on page load. This would mean that the page could not be used before the user tapped somewhere on the page to "close the drawer". Also adds another maximum width restriction to make sure content doesn't become wider than the viewport on mobile resolutions.

solara/server/assets/style.css

@@ -125,6 +125,7 @@ div.highlight {
 
 .solara-autorouter-content {
     height: 100%;
+    max-width: 100%;
 }
 
 /* originally from index.css */

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/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 call_openai():
     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/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/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 @@
 @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 location_changed(location):
         # 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]

solara/website/pages/documentation/examples/visualization/annotator.py

@@ -45,9 +45,7 @@ def on_relayout(data):
     fig = go.FigureWidget(
         layout=go.Layout(
             showlegend=False,
-            autosize=False,
-            width=600,
-            height=600,
+            autosize=True,
             dragmode="drawrect",
             modebar={
                 "add": [

solara/website/pages/documentation/examples/visualization/linked_views.py

@@ -49,8 +49,8 @@ def on_click_trace(click_data):
         click_y = df[y].values[click_row]
         fig.add_trace(px.scatter(x=[click_x], y=[click_y], text=["⭐️"]).data[0])
     # make the figure a bit smaller
-    fig.update_layout(width=400)
-    with solara.VBox() as main:
+    fig.update_layout(width=340)
+    with solara.Column(style={"width": "340px"}) as main:
         solara.FigurePlotly(fig, on_click=on_click_trace)
         solara.Select(label="X-axis", value=x, values=columns, on_value=set_x)
         solara.Select(label="Y-axis", value=y, values=columns, on_value=set_y)
@@ -65,8 +65,8 @@ def Page():
     else:
         clicked_row = None
 
-    with solara.VBox() as main:
-        with solara.HBox():
+    with solara.Column() as main:
+        with solara.Row(justify="center", style={"flex-wrap": "wrap"}):
             ClickScatter(df, "sepal_length", "sepal_width", "species", clicked_row, on_click=set_click_point)
             ClickScatter(df, "petal_length", "petal_width", "species", clicked_row, on_click=set_click_point)
         if click_point is not None: