Fix mobile screen overflow issues in CodeBlock and Markdown components

.gitignore

@@ -45,3 +45,4 @@ yarn-error.log*
 test.html
 all_merged.md
 /.vscode
+.claude/settings.local.json

components/ai-provider-selector.tsx

@@ -165,7 +165,7 @@ export function AiProviderSelector({
           className="md:px-2 md:h-[34px] flex items-center gap-2"
         >
           {selectedProvider?.icon}
-          <span className="truncate">{selectedProvider?.name}</span>
+          <span className="hidden md:block truncate">{selectedProvider?.name}</span>
           <ChevronDownIcon className="h-4 w-4 opacity-50" />
         </Button>
       </DropdownMenuTrigger>

components/chat-header.tsx

@@ -51,7 +51,7 @@ function PureChatHeader({
               }}
             >
               <PlusIcon />
-              <span className="md:sr-only">New Chat</span>
+              {/* <span className="md:sr-only">New Chat</span> */}
             </Button>
           </TooltipTrigger>
           <TooltipContent>New Chat</TooltipContent>
@@ -68,7 +68,7 @@ function PureChatHeader({
         />
       )}
 
-      {!isReadonly && (
+      {!isReadonly && windowWidth >= 768 && (
         <VisibilitySelector
           chatId={chatId}
           selectedVisibilityType={selectedVisibilityType}

components/code-block.tsx

@@ -74,7 +74,7 @@ export function CodeBlock({
 
   if (isOneLine) {
     return (
-      <code className="whitespace-pre-wrap break-words text-orange-500 p-1 dark:bg-zinc-900 border-zinc-200 dark:border-zinc-700 rounded-sm">
+      <code className="whitespace-pre-wrap break-words text-orange-500 p-1 dark:bg-zinc-900 border-zinc-200 dark:border-zinc-700 rounded-sm max-w-full overflow-x-auto">
         {children}
       </code>
     );
@@ -92,9 +92,9 @@ export function CodeBlock({
             isOneLine ? "p-1" : "p-4"
           } border border-zinc-200 dark:border-zinc-700 ${
             isOneLine ? "rounded-sm" : "rounded-xl"
-          } dark:text-zinc-50 text-zinc-900`}
+          } dark:text-zinc-50 text-zinc-900 min-w-0`}
         >
-          <code className="whitespace-pre-wrap break-words">{children}</code>
+          <code className="whitespace-pre break-all sm:break-words">{children}</code>
         </pre>
       </div>
     );
@@ -104,7 +104,7 @@ export function CodeBlock({
     <div className="not-prose flex flex-col relative group">
       <CopyButton onClick={handleCopy} className="top-2 right-2" />
       <div
-        className="text-sm w-full overflow-x-auto dark:bg-zinc-900 p-4 border border-zinc-200 dark:border-zinc-700 rounded-xl dark:text-zinc-50 text-zinc-900"
+        className="text-sm w-full overflow-x-auto dark:bg-zinc-900 p-4 border border-zinc-200 dark:border-zinc-700 rounded-xl dark:text-zinc-50 text-zinc-900 min-w-0"
         dangerouslySetInnerHTML={{ __html: html }}
       />
     </div>

components/markdown.tsx

@@ -1,30 +1,30 @@
-import Link from 'next/link';
-import React, { memo } from 'react';
-import ReactMarkdown, { type Components } from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { CodeBlock } from './code-block';
+import Link from "next/link";
+import React, { memo } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { CodeBlock } from "./code-block";
 
 const components: Partial<Components> = {
   // @ts-expect-error
   code: CodeBlock,
   pre: ({ children }) => <>{children}</>,
   ol: ({ node, children, ...props }) => {
     return (
-      <ol className="list-decimal list-outside ml-4" {...props}>
+      <ol className="list-decimal list-outside ml-4 break-words" {...props}>
         {children}
       </ol>
     );
   },
   li: ({ node, children, ...props }) => {
     return (
-      <li className="py-1" {...props}>
+      <li className="py-1 break-words" {...props}>
         {children}
       </li>
     );
   },
   ul: ({ node, children, ...props }) => {
     return (
-      <ul className="list-decimal list-outside ml-4" {...props}>
+      <ul className="list-decimal list-outside ml-4 break-words" {...props}>
         {children}
       </ul>
     );
@@ -51,42 +51,42 @@ const components: Partial<Components> = {
   },
   h1: ({ node, children, ...props }) => {
     return (
-      <h1 className="text-3xl font-semibold mt-6 mb-2" {...props}>
+      <h1 className="text-3xl font-semibold mt-6 mb-2 break-words" {...props}>
         {children}
       </h1>
     );
   },
   h2: ({ node, children, ...props }) => {
     return (
-      <h2 className="text-2xl font-semibold mt-6 mb-2" {...props}>
+      <h2 className="text-2xl font-semibold mt-6 mb-2 break-words" {...props}>
         {children}
       </h2>
     );
   },
   h3: ({ node, children, ...props }) => {
     return (
-      <h3 className="text-xl font-semibold mt-6 mb-2" {...props}>
+      <h3 className="text-xl font-semibold mt-6 mb-2 break-words" {...props}>
         {children}
       </h3>
     );
   },
   h4: ({ node, children, ...props }) => {
     return (
-      <h4 className="text-lg font-semibold mt-6 mb-2" {...props}>
+      <h4 className="text-lg font-semibold mt-6 mb-2 break-words" {...props}>
         {children}
       </h4>
     );
   },
   h5: ({ node, children, ...props }) => {
     return (
-      <h5 className="text-base font-semibold mt-6 mb-2" {...props}>
+      <h5 className="text-base font-semibold mt-6 mb-2 break-words" {...props}>
         {children}
       </h5>
     );
   },
   h6: ({ node, children, ...props }) => {
     return (
-      <h6 className="text-sm font-semibold mt-6 mb-2" {...props}>
+      <h6 className="text-sm font-semibold mt-6 mb-2 break-words" {...props}>
         {children}
       </h6>
     );
@@ -105,5 +105,5 @@ const NonMemoizedMarkdown = ({ children }: { children: string }) => {
 
 export const Markdown = memo(
   NonMemoizedMarkdown,
-  (prevProps, nextProps) => prevProps.children === nextProps.children,
+  (prevProps, nextProps) => prevProps.children === nextProps.children
 );