diff --git a/docs/src/components/InlineSnippet.svelte b/docs/src/components/InlineSnippet.svelte
index 136fe90b..5d1b8177 100644
--- a/docs/src/components/InlineSnippet.svelte
+++ b/docs/src/components/InlineSnippet.svelte
@@ -6,7 +6,12 @@
 </script>
 
 <div>
-  <CodeSnippet code="{code}" type="inline" copy="{(text) => copy(text)}" />
+  <CodeSnippet
+    code="{code}"
+    type="inline"
+    copy="{(text) => copy(text)}"
+    class="code-override"
+  />
 </div>
 
 <style>
diff --git a/docs/src/global.css b/docs/src/global.css
index fd8003b2..e9dbb1a1 100644
--- a/docs/src/global.css
+++ b/docs/src/global.css
@@ -27,6 +27,13 @@ html[theme="g90"] .code-override {
   line-height: var(--cds-code-02-line-height);
   letter-spacing: var(--cds-code-02-letter-spacing);
   cursor: text;
+  /* This override is needed to get code snippets to wrap properly and not overstretch the layout.
+   * Code snippets are used for specific examples but also for type definitions at the bottom of the page. */
+  white-space: pre-wrap;
+}
+
+.code-override code {
+  word-break: break-all;
 }
 
 .code-override .bx--snippet--multi .bx--snippet-container pre {