docs: fixes for mobile users

solara/server/assets/style.css

@@ -124,6 +124,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: