fix(example): truncate long channel name (trpc#6385)

examples/next-sse-chat/package.json

@@ -30,6 +30,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "superjson": "^1.12.4",
+    "tailwind-merge": "^2.0.0",
     "zod": "^3.0.0"
   },
   "devDependencies": {

examples/next-sse-chat/src/app/channels/[channelId]/layout.tsx

@@ -42,8 +42,8 @@ export default async function Home(
               )}
               href={`/channels/${channel.id}`}
             >
-              <HashtagIcon className="h-4 w-4" />
-              {channel.name}
+              <HashtagIcon className="h-4 w-4 shrink-0" />
+              <span className="truncate">{channel.name}</span>
             </Link>
           ))}
         </div>

examples/next-sse-chat/src/app/page.tsx

@@ -4,6 +4,7 @@ import { SignedIn, SignedOut } from '~/server/auth';
 import { caller } from '~/server/routers/_app';
 import Link from 'next/link';
 import { Suspense } from 'react';
+import { twMerge } from 'tailwind-merge';
 import { CreateChannelDialog } from './channels/create-channel';
 
 export default async function Home() {
@@ -58,15 +59,18 @@ export default async function Home() {
               </SignedOut>
             </Suspense>
           </div>
-          <div className="flex flex-col items-start gap-2">
+          <div className="flex w-full flex-col items-start">
             {channels.map((channel) => (
               <Link
                 key={channel.id}
-                className={buttonVariants({ variant: 'link' })}
+                className={twMerge(
+                  buttonVariants({ variant: 'link' }),
+                  'w-full justify-start',
+                )}
                 href={`/channels/${channel.id}`}
               >
-                <HashtagIcon className="mr-2 size-4" />
-                {channel.name}
+                <HashtagIcon className="mr-2 size-4 shrink-0" />
+                <span className="truncate">{channel.name}</span>
               </Link>
             ))}
           </div>