diff --git a/.changeset/wise-gorillas-fly.md b/.changeset/wise-gorillas-fly.md
new file mode 100644
index 0000000000..e45257ae7e
--- /dev/null
+++ b/.changeset/wise-gorillas-fly.md
@@ -0,0 +1,9 @@
+---
+'@commercetools-website/api-docs-smoke-test': patch
+'@commercetools-docs/gatsby-theme-docs': patch
+'@commercetools-website/docs-smoke-test': patch
+'@commercetools-website/documentation': patch
+'@commercetools-docs/ui-kit': patch
+---
+
+Fix MultiPathBlock component to be able to display content side by side on wide viewports
diff --git a/packages/gatsby-theme-docs/gatsby-config.mjs b/packages/gatsby-theme-docs/gatsby-config.mjs
index e269de1da3..0040a766fb 100644
--- a/packages/gatsby-theme-docs/gatsby-config.mjs
+++ b/packages/gatsby-theme-docs/gatsby-config.mjs
@@ -64,7 +64,7 @@ const config = (themeOptions = {}) => {
/*
gatsby-source-filesystem notes:
- https://www.gatsbyjs.org/packages/gatsby-source-filesystem/?=file#how-to-query
+ https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/
Most of these files get queried through other transformers,
but the `name` property here allows filtering allFile queries:
allFile(filter: { sourceInstanceName: { eq: "blog" } }) {
diff --git a/packages/ui-kit/src/components/multi-path-block/index.tsx b/packages/ui-kit/src/components/multi-path-block/index.tsx
index 6fa26c5d90..c88ba41716 100644
--- a/packages/ui-kit/src/components/multi-path-block/index.tsx
+++ b/packages/ui-kit/src/components/multi-path-block/index.tsx
@@ -216,6 +216,7 @@ const SelectorsContainer = styled.div`
const ComponentWrapper = styled.div`
border: 2px solid ${designSystem.colors.light.borderPrimary};
border-radius: ${designSystem.tokens.borderRadiusForMultiPath};
+ max-width: 100% !important;
`;
const PathsContainer = styled.div`
diff --git a/websites/api-docs-smoke-test/src/content/layouts/endpoint-large-desktop.mdx b/websites/api-docs-smoke-test/src/content/layouts/endpoint-large-desktop.mdx
index bb7908eef3..2fb36f5eb8 100644
--- a/websites/api-docs-smoke-test/src/content/layouts/endpoint-large-desktop.mdx
+++ b/websites/api-docs-smoke-test/src/content/layouts/endpoint-large-desktop.mdx
@@ -85,3 +85,26 @@ Blick two - don't forget the blank lines!
resource="/{projectKey}/resource/searchApiPattern"
method="GET"
/>
+
+## An Endpoint grouped in MultiPathBlock
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/websites/docs-smoke-test/src/content/views/multi-path-block.mdx b/websites/docs-smoke-test/src/content/views/multi-path-block.mdx
index 6f6c525c44..b8dd6163d9 100644
--- a/websites/docs-smoke-test/src/content/views/multi-path-block.mdx
+++ b/websites/docs-smoke-test/src/content/views/multi-path-block.mdx
@@ -2,6 +2,8 @@
title: Multi Path Block
---
+
+
import { LoginButton, IfUserLoggedOut, FirstName } from '@commercetools-docs/gatsby-theme-docs'
@@ -132,7 +134,8 @@ Some custom plan tags: , .
-**Mermaid Diagram**
+
+
```mermaid
flowchart LR
@@ -147,14 +150,13 @@ Some custom plan tags: , .
click GitHub "http://www.github.com" "B is a link to Github"
```
-
-
-**Video Player**
+
+
**Self learning conditionals**
diff --git a/websites/docs-smoke-test/src/content/views/wide.mdx b/websites/docs-smoke-test/src/content/views/wide.mdx
index 225ff6af0e..67d86a872f 100644
--- a/websites/docs-smoke-test/src/content/views/wide.mdx
+++ b/websites/docs-smoke-test/src/content/views/wide.mdx
@@ -5,6 +5,8 @@ wideLayout: true
showTimeToRead: true
---
+
+
# Manual Side By Side Content
@@ -26,3 +28,58 @@ Blick two - don't forget the blank lines!
+
+# Multi Path Block example
+
+
+
+
+
+
+```mermaid
+ flowchart LR
+ subgraph a subgraph
+ b2-->A
+ end
+ A[Start] --> GitHub{GitHub}
+ GitHub -->|Yes| C[OK]
+ C --> D[Rethink]
+ D --> GitHub
+ GitHub ---->|No| E[End]
+ click GitHub "http://www.github.com" "B is a link to Github"
+```
+
+
+
+
+
+
+
+
+
+```mermaid
+ flowchart LR
+ subgraph a subgraph
+ b2-->A
+ end
+ A[Start] --> GitHub{GitHub}
+ GitHub -->|Yes| C[OK]
+ C --> D[Rethink]
+ D --> GitHub
+ GitHub ---->|No| E[End]
+ click GitHub "http://www.github.com" "B is a link to Github"
+```
+
+
+
+
+
+
+
+
diff --git a/websites/documentation/src/content/writing/paths.mdx b/websites/documentation/src/content/writing/paths.mdx
index a3b7afb6fd..62c8699657 100644
--- a/websites/documentation/src/content/writing/paths.mdx
+++ b/websites/documentation/src/content/writing/paths.mdx
@@ -25,8 +25,6 @@ The content of the `` tag can be any type of content, including markd
- **Do not use any headings** as it will break the side page navigation that is constructed based on the headings.
-- **Do not use SiteBySide** component as it will not render correctly.
-
- Breaking lines can **only** be done using the html `
` tag. The markdown syntax for breaking lines will not work.
- The sync mechanism between blocks is based on the exact match of the language string (case insensitive). Meaning that `js` and `javascript` are considered different languages. Keep it in mind when defining the `syncWith` prop.