Fix horizontal scrollbars on small screens

This patch addresses #1649 to fix documentation layout. In fact there are multiple issues with the current layout.

1. Flex layout might have an issue with overflowing content. See https://codepen.io/gregorw/full/gOdqreo.
2. The props table at the bottom of each page doesn’t overflow and stretches the layout.

This minimal change fixes code snippets in such a way that they are wrapped on small screens, since `overflow-x: scroll` doesn’t seem to work with the flexbox layout used. See code pen for problem description and solution A. This fixes horizontal scrollbars on all pages that don’t have other issues such as a large non-overflowing props table at the bottom.

The prop table at the bottom needs a separate PR. Possible solutions are that we get overflow/scroll to work or that we change to the mobile table of contents earlier. Maybe using a non-flexbox layout would solve some of the problems, too. See solution B of code pen above.

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>

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 {