Add an inline block component

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

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

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