From af68449f56512c4466e8f66f1926ff2b8d09da09 Mon Sep 17 00:00:00 2001
From: MarBert <41899883+MarBert@users.noreply.github.com>
Date: Mon, 30 Sep 2024 14:58:33 +0100
Subject: [PATCH] fix link out of bound (#1155)

Co-authored-by: marcobottaro <39835990+marcobottaro@users.noreply.github.com>
---
 .changeset/modern-chicken-check.md                          | 5 +++++
 .../components/organisms/GitBookContent/components/Link.tsx | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/modern-chicken-check.md

diff --git a/.changeset/modern-chicken-check.md b/.changeset/modern-chicken-check.md
new file mode 100644
index 0000000000..53085200fc
--- /dev/null
+++ b/.changeset/modern-chicken-check.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Add wordwrap break word to links
diff --git a/apps/nextjs-website/src/components/organisms/GitBookContent/components/Link.tsx b/apps/nextjs-website/src/components/organisms/GitBookContent/components/Link.tsx
index 40b9ece4a5..7b8979c585 100644
--- a/apps/nextjs-website/src/components/organisms/GitBookContent/components/Link.tsx
+++ b/apps/nextjs-website/src/components/organisms/GitBookContent/components/Link.tsx
@@ -5,7 +5,11 @@ import { useTheme } from '@mui/material';
 export const Link = ({ title, href, children }: LinkProps<ReactNode>) => {
   const { palette } = useTheme();
   return (
-    <a href={href} title={title} style={{ color: palette.primary.main }}>
+    <a
+      href={href}
+      title={title}
+      style={{ wordWrap: 'break-word', color: palette.primary.main }}
+    >
       {children}
     </a>
   );