Merge pull request #10407 from supabase/fix/code-blocks-line-wrapping

Fix code wrapping in paragraphs

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

@@ -213,15 +213,26 @@ 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;
+  }
+}
+
+.short-inline-codeblock {
+  @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;
-}
-
 // fix ToC links when they have <code> inside
 .toc-menu li a code {
   background: none;