fix: markdown overflows page on mobile

widgetti · Sep 9, 2024 · 7b0c364 · 7b0c364
1 parent 24bd165
commit 7b0c364
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/solara/website/components/breadcrumbs.py b/solara/website/components/breadcrumbs.py
@@ -10,7 +10,7 @@ def BreadCrumbs(route_current: solara.Route):
     routes: List[solara.Route] = _resolve_path_to_route(current_path_parts[1:], router.routes, [])
     print("Found routes", [r.path for r in routes])
 
-    with solara.Row(style={"align-items": "center"}) as main:
+    with solara.Row(style={"align-items": "center", "flex-wrap": "wrap"}) as main:
         for i, route in enumerate(routes):
             if i == len(routes) - 1:
                 solara.Text(route.label, style={"color": "var(--color-text-fade)"})

diff --git a/solara/website/components/docs.py b/solara/website/components/docs.py
@@ -115,6 +115,6 @@ def CategoryLayout(children=[]):
     if route_current.path == "/":
         return Gallery()
     else:
-        with solara.Column(align="stretch", children=children) as main:
+        with solara.Column(align="stretch", children=children, style={"max-width": "100%"}) as main:
             pass
         return main
diff --git a/solara/website/components/markdown.py b/solara/website/components/markdown.py
@@ -30,7 +30,7 @@ def MarkdownWithMetadata(content: str, unsafe_solara_execute=True):
     with solara.v.Html(
         tag="div", style_="display: flex; flex-direction: row; 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;")
+        solara.Markdown(content, unsafe_solara_execute=unsafe_solara_execute, style="flex-grow: 1; max-width: 100%;")
         MarkdownNavigation(id="markdown-to-navigate").key("markdown-nav" + str(hash(content)))