doc: add break word all for better ux

Author: rasvanjaya21

demo-tabs.tsx

@@ -24,7 +24,7 @@ export function Demo() {
 				onChange={e => setHello(e.target.value || null)}
 				data-interacted={Boolean(hello)}
 			/>
-			<p>Hello, {hello || 'anonymous visitor'}!</p>
+			<p className="break-all">Hello, {hello || 'anonymous visitor'}!</p>
 		</>
 	)
 }

packages/docs/content/docs/basic-usage.mdx

@@ -28,7 +28,7 @@ export function Demo() {
     <>
       <input value={name || ''} onChange={e => setName(e.target.value)} />
       <button onClick={() => setName(null)}>Clear</button>
-      <p>Hello, {name || 'anonymous visitor'}!</p>
+      <p className="break-all">Hello, {name || 'anonymous visitor'}!</p>
     </>
   )
 }

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

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

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

@@ -21,7 +21,7 @@ export async function LandingDemo() {
           <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 sm:flex-row sm:items-center">
+        <div className="mb-4 flex flex-col gap-4 items-start sm:flex-row">
           <Demo />
           <LookAtTheURL />
         </div>