style: Keep inline in sm+ and scroll/ellipsis on overflow

packages/docs/src/app/(pages)/_landing/demo.client.tsx

@@ -25,7 +25,9 @@ export function Demo() {
         onChange={e => setHello(e.target.value || null)}
         data-interacted={Boolean(hello)}
       />
-      <p className="break-all">Hello, {hello || 'anonymous visitor'}!</p>
+      <p className="sm:overflow-x-auto sm:text-ellipsis sm:text-nowrap">
+        Hello, {hello || 'anonymous visitor'}!
+      </p>
     </>
   )
 }

packages/docs/src/app/(pages)/_landing/demo.tsx

@@ -1,32 +1,35 @@
 import { CodeBlock } from '@/src/components/code-block'
 import fs from 'node:fs/promises'
+import { format } from 'prettier'
 import { Suspense } from 'react'
 import { Demo } from './demo.client'
 
 export async function LandingDemo() {
   const demoFilePath =
     process.cwd() + '/src/app/(pages)/_landing/demo.client.tsx'
   const demoFile = await fs.readFile(demoFilePath, 'utf8')
+  // Poor man's AST manipulation
   const demoCode = demoFile
+    .replace(/className=".+"/g, '') // Strip styling
     .split('\n')
-    .filter(
-      line =>
-        !line.includes('className="') && !line.includes('data-interacted=')
-    )
+    .filter(line => !line.includes('data-interacted='))
     .join('\n')
+  const formattedCode = await format(demoCode, {
+    parser: 'typescript'
+  })
   return (
     <>
       <Suspense
         fallback={
           <div className="mb-4 h-[136px] animate-pulse rounded bg-zinc-50 dark:bg-zinc-900 sm:h-10" />
         }
       >
-        <div className="mb-4 flex flex-col gap-4 items-start sm:flex-row">
+        <div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center">
           <Demo />
           <LookAtTheURL />
         </div>
       </Suspense>
-      <CodeBlock code={demoCode} />
+      <CodeBlock code={formattedCode} />
     </>
   )
 }