From aef47a1bc5ea6a47136195811fbb3ae925861a7b Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Fri, 18 Nov 2022 15:22:11 -0330
Subject: [PATCH 1/3] Fix code wrapping in paragraphs

---
 apps/docs/styles/main.scss | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/docs/styles/main.scss b/apps/docs/styles/main.scss
index fecabd702dc..5c30b08ac0a 100644
--- a/apps/docs/styles/main.scss
+++ b/apps/docs/styles/main.scss
@@ -213,14 +213,27 @@ a:has(code) {
   box-shadow: none !important;
 }
 
+// fix code line wrapping
+// need to set this to happen from medium onwards, otherwise the would cause horizontal scroll
+article p code {
+  &::before,
+  &::after {
+    display: none !important;
+  }
+
+  @media screen and (min-width: 769px) {
+    white-space: pre !important;
+  }
+}
+
 // fix firefox issue with li wrapping
 .doc-content-container ul li div.relative {
   display: inline-block;
 }
 
-.doc-content-container ul li a {
-  box-shadow: none !important;
-}
+// .doc-content-container ul li a {
+//   box-shadow: none !important;
+// }
 
 // fix ToC links when they have <code> inside
 .toc-menu li a code {

From 776a892ef87dd032bf330a6cab4ef11d6c38cdd6 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Fri, 18 Nov 2022 15:25:08 -0330
Subject: [PATCH 2/3] Unneeded css block

---
 apps/docs/styles/main.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/apps/docs/styles/main.scss b/apps/docs/styles/main.scss
index 5c30b08ac0a..bc0bfcce83e 100644
--- a/apps/docs/styles/main.scss
+++ b/apps/docs/styles/main.scss
@@ -231,10 +231,6 @@ article p code {
   display: inline-block;
 }
 
-// .doc-content-container ul li a {
-//   box-shadow: none !important;
-// }
-
 // fix ToC links when they have <code> inside
 .toc-menu li a code {
   background: none;

From 64e48fb2388560360f82bfb04bd7fc29aef983a3 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Fri, 18 Nov 2022 16:53:28 -0330
Subject: [PATCH 3/3] Add an inline block component

---
 .../docs/components/CustomHTMLElements/InlineCode.tsx | 11 +++++++++++
 apps/docs/components/index.tsx                        |  2 ++
 apps/docs/styles/main.scss                            |  2 ++
 3 files changed, 15 insertions(+)
 create mode 100644 apps/docs/components/CustomHTMLElements/InlineCode.tsx

diff --git a/apps/docs/components/CustomHTMLElements/InlineCode.tsx b/apps/docs/components/CustomHTMLElements/InlineCode.tsx
new file mode 100644
index 00000000000..95dc7603bb0
--- /dev/null
+++ b/apps/docs/components/CustomHTMLElements/InlineCode.tsx
@@ -0,0 +1,11 @@
+const InlineCodeTag = ({ children }) => {
+  // If children isn't a string, just return it as is, just in case
+  if (typeof children !== 'string') return children
+
+  // check the length of the string inside the <code> tag
+  // if it's fewer than 70 characters, add a white-space: pre so it doesn't wrap
+  const classes = children.length < 70 ? 'short-inline-codeblock' : ''
+
+  return <code className={classes}>{children}</code>
+}
+export default InlineCodeTag
diff --git a/apps/docs/components/index.tsx b/apps/docs/components/index.tsx
index ffaadc1ed96..cd2a76eb223 100644
--- a/apps/docs/components/index.tsx
+++ b/apps/docs/components/index.tsx
@@ -18,6 +18,7 @@ import { Heading } from './CustomHTMLElements'
 import QuickstartIntro from './MDX/quickstart_intro.mdx'
 import ProjectSetup from './MDX/project_setup.mdx'
 import { Mermaid } from 'mdx-mermaid/lib/Mermaid'
+import InlineCodeTag from './CustomHTMLElements/InlineCode'
 
 const components = {
   Admonition,
@@ -55,6 +56,7 @@ const components = {
     return <CodeBlock {...props} linesToHighlight={linesToHighlight} />
   },
   mono: (props: any) => <code className="text-sm">{props.children}</code>,
+  inlineCode: (props: any) => <InlineCodeTag>{props.children}</InlineCodeTag>,
 }
 
 export default components
diff --git a/apps/docs/styles/main.scss b/apps/docs/styles/main.scss
index bc0bfcce83e..4b418f53612 100644
--- a/apps/docs/styles/main.scss
+++ b/apps/docs/styles/main.scss
@@ -220,7 +220,9 @@ article p code {
   &::after {
     display: none !important;
   }
+}
 
+.short-inline-codeblock {
   @media screen and (min-width: 769px) {
     white-space: pre !important;
   }