Fix codeblock rendering

apps/docs/components/CodeBlock/CodeBlock.tsx

@@ -48,6 +48,11 @@ const CodeBlock: FC<Props> = ({
     }, 1000)
   }
 
+  // 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 shortCodeBlockClasses =
+    typeof children === 'string' && children.length < 70 ? 'short-inline-codeblock' : ''
+
   let lang = language ? language : className ? className.replace('language-', '') : 'js'
   // force jsx to be js highlighted
   if (lang === 'jsx') lang = 'js'
@@ -65,76 +70,78 @@ const CodeBlock: FC<Props> = ({
   const showLineNumbers = !hideLineNumbers
 
   return (
-    <div className="relative max-w-[90vw] md:max-w-none overflow-auto">
+    <>
       {title && (
         <div className="rounded-t-md bg-scale-300 py-2 px-4 border-b border-scale-500 text-blue-1100 font-sans">
           {title.replace(/%20/g, ' ')}
         </div>
       )}
       {className ? (
-        <SyntaxHighlighter
-          language={lang}
-          wrapLines={true}
-          style={monokaiTheme}
-          className={[
-            'code-block border p-4 w-full !my-0 !bg-scale-300',
-            `${!title ? '!rounded-md' : '!rounded-t-none !rounded-b-md'}`,
-            `${!showLineNumbers ? 'pl-6' : ''}`,
-            className,
-          ].join(' ')}
-          customStyle={{
-            fontSize: large ? 18 : 13,
-            lineHeight: large ? 1.5 : 1.4,
-          }}
-          showLineNumbers={showLineNumbers}
-          lineProps={(lineNumber) => {
-            if (linesToHighlight.includes(lineNumber)) {
-              return {
-                style: { display: 'block', backgroundColor: 'var(--colors-scale6)' },
+        <div className="relative max-w-[90vw] md:max-w-none overflow-auto">
+          <SyntaxHighlighter
+            language={lang}
+            wrapLines={true}
+            style={monokaiTheme}
+            className={[
+              'code-block border p-4 w-full !my-0 !bg-scale-300',
+              `${!title ? '!rounded-md' : '!rounded-t-none !rounded-b-md'}`,
+              `${!showLineNumbers ? 'pl-6' : ''}`,
+              className,
+            ].join(' ')}
+            customStyle={{
+              fontSize: large ? 18 : 13,
+              lineHeight: large ? 1.5 : 1.4,
+            }}
+            showLineNumbers={showLineNumbers}
+            lineProps={(lineNumber) => {
+              if (linesToHighlight.includes(lineNumber)) {
+                return {
+                  style: { display: 'block', backgroundColor: 'var(--colors-scale6)' },
+                }
               }
-            }
-            return {}
-          }}
-          lineNumberContainerStyle={{
-            paddingTop: '128px',
-          }}
-          lineNumberStyle={{
-            minWidth: '44px',
-            paddingLeft: '4px',
-            paddingRight: '4px',
-            marginRight: '12px',
-            color: '#828282',
-            textAlign: 'center',
-            fontSize: large ? 14 : 12,
-            paddingTop: '4px',
-            paddingBottom: '4px',
-          }}
-        >
-          {(value || children)?.trimEnd()}
-        </SyntaxHighlighter>
-      ) : (
-        <code>{value || children}</code>
-      )}
-      {!hideCopy && (value || children) && className ? (
-        <div
-          className={[
-            'absolute right-2',
-            `${isDarkMode ? 'dark' : ''}`,
-            `${!title ? 'top-2' : 'top-[3.25rem]'}`,
-          ].join(' ')}
-        >
-          <CopyToClipboard text={value || children}>
-            <Button
-              type="default"
-              icon={copied ? <IconCheck /> : <IconCopy />}
-              onClick={() => handleCopy()}
+              return {}
+            }}
+            lineNumberContainerStyle={{
+              paddingTop: '128px',
+            }}
+            lineNumberStyle={{
+              minWidth: '44px',
+              paddingLeft: '4px',
+              paddingRight: '4px',
+              marginRight: '12px',
+              color: '#828282',
+              textAlign: 'center',
+              fontSize: large ? 14 : 12,
+              paddingTop: '4px',
+              paddingBottom: '4px',
+            }}
+          >
+            {(value || children)?.trimEnd()}
+          </SyntaxHighlighter>
+          {!hideCopy && (value || children) && className ? (
+            <div
+              className={[
+                'absolute right-2',
+                `${isDarkMode ? 'dark' : ''}`,
+                `${!title ? 'top-2' : 'top-[3.25rem]'}`,
+              ].join(' ')}
             >
-              {copied ? 'Copied' : ''}
-            </Button>
-          </CopyToClipboard>
+              <CopyToClipboard text={value || children}>
+                <Button
+                  type="default"
+                  icon={copied ? <IconCheck /> : <IconCopy />}
+                  onClick={() => handleCopy()}
+                >
+                  {copied ? 'Copied' : ''}
+                </Button>
+              </CopyToClipboard>
+            </div>
+          ) : null}
         </div>
-      ) : null}
-    </div>
+      ) : (
+        <code className={shortCodeBlockClasses}>{value || children}</code>
+      )}
+    </>
   )
 }