From 7b0c3641089bb80072acb702c2f27eec229fe16a Mon Sep 17 00:00:00 2001
From: Iisakki Rotko <iisakki.rotko@gmail.com>
Date: Fri, 6 Sep 2024 09:29:52 +0200
Subject: [PATCH] fix: markdown overflows page on mobile

---
 solara/website/components/breadcrumbs.py | 2 +-
 solara/website/components/docs.py        | 2 +-
 solara/website/components/markdown.py    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/solara/website/components/breadcrumbs.py b/solara/website/components/breadcrumbs.py
index 6839a9196..88c050244 100644
--- 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
index 9d1e57708..3f2890240 100644
--- 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
index 0d03e3279..1fa400561 100644
--- 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)))