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;
   }