ui(error-boxes): wrap long text in ScrollArea + break-words; doc rule

.github/copilot-instructions.md

@@ -82,6 +82,10 @@ lib/
 - Toast: dự án **không** dùng `sonner`. Dùng pattern toast local trong `sidebar.tsx` hoặc `Tooltip` (xem `share-link` impl).
 - Header có nhiều nút icon → đã thêm `flex-1 overflow-hidden` ở container center + truncate trên PersonaPicker. Khi thêm nút mới phải đảm bảo `shrink-0` để không phá layout.
 - Persona label: max `88px` truncate.
+- **Long text & error boxes**: bất kỳ container nào hiển thị message lỗi, URL dài, JSON, hoặc nội dung từ user/API đều phải:
+  1. Dùng `<ScrollArea className="max-h-XX">` (`@/components/ui/scroll-area`) thay vì `overflow-auto` thuần khi cần giới hạn chiều cao + có scrollbar đẹp.
+  2. Áp `break-words [overflow-wrap:anywhere]` (hoặc `whitespace-pre-wrap break-words`) lên text bên trong để URL/token dài tự xuống dòng — **không bao giờ** để text tràn ngang khỏi `border` của box.
+  3. Tách phần header (label) ra ngoài ScrollArea để label luôn cố định, chỉ phần body cuộn.
 
 ### 7. Testing & build
 

components/ab-compare.tsx

@@ -5,6 +5,7 @@ import remarkGfm from "remark-gfm"
 import { Check, Loader2 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
+import { ScrollArea } from "@/components/ui/scroll-area"
 import { cn } from "@/lib/utils"
 
 export type AbPaneState = {
@@ -43,9 +44,11 @@ function AbCard({ label, state, onPick }: { label: string; state: AbPaneState; o
       </CardHeader>
       <CardContent className="min-h-40 p-3">
         {state.error ? (
-          <div className="rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive">
-            {state.error}
-          </div>
+          <ScrollArea className="max-h-40 rounded-md border border-destructive/30 bg-destructive/5">
+            <div className="px-3 py-2 text-xs text-destructive break-words [overflow-wrap:anywhere]">
+              {state.error}
+            </div>
+          </ScrollArea>
         ) : state.content ? (
           <div className="prose-chat text-sm">
             <ReactMarkdown remarkPlugins={[remarkGfm]}>{state.content}</ReactMarkdown>

components/chat.tsx

@@ -14,6 +14,7 @@ import { BulkActions } from "@/components/bulk-actions"
 import { MemoryDialog } from "@/components/memory-dialog"
 import { PromptLibraryDialog } from "@/components/prompt-library-dialog"
 import { ErrorLogDialog } from "@/components/error-log-dialog"
+import { ScrollArea } from "@/components/ui/scroll-area"
 import { AbCompare, type AbPaneState } from "@/components/ab-compare"
 import { AbToggle, type AbModeState } from "@/components/ab-toggle"
 import { PROVIDERS, type ProviderKey } from "@/lib/providers"
@@ -731,11 +732,13 @@ export function Chat() {
                     !
                   </div>
                   <div className="min-w-0 flex-1 space-y-2 pt-1">
-                    <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
-                      <div className="font-medium">Có lỗi khi gọi AI:</div>
-                      <div className="mt-1 whitespace-pre-wrap text-xs opacity-90">
-                        {error.message}
-                      </div>
+                    <div className="rounded-lg border border-destructive/30 bg-destructive/5 text-sm text-destructive">
+                      <div className="px-3 pt-2 font-medium">Có lỗi khi gọi AI:</div>
+                      <ScrollArea className="max-h-40">
+                        <div className="px-3 pb-2 pt-1 text-xs opacity-90 whitespace-pre-wrap break-words [overflow-wrap:anywhere]">
+                          {error.message}
+                        </div>
+                      </ScrollArea>
                     </div>
                     <button
                       onClick={() => reload()}

components/error-log-dialog.tsx

@@ -71,7 +71,7 @@ export function ErrorLogDialog({ open, onOpenChange }: ErrorLogDialogProps) {
                         {entry.request.provider ?? "unknown"} / {entry.request.model ?? "unknown"}
                       </span>
                     </div>
-                    <div className="whitespace-pre-wrap text-sm text-destructive">{entry.error}</div>
+                    <div className="whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-sm text-destructive">{entry.error}</div>
                   </summary>
                   <pre className="mt-3 max-h-72 overflow-auto rounded-md bg-muted p-3 text-xs">
                     {JSON.stringify(entry.request, null, 2)}

components/header.tsx

@@ -242,7 +242,7 @@ export function Header({
                 <DropdownMenuItem onClick={() => setSnippetsOpen(true)}>
                   <Bookmark className="mr-2 h-4 w-4" /> Snippet / Macro
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={toggleVoiceMode}>
+                <DropdownMenuItem onClick={toggleVoiceMode} className="hidden md:flex">
                   <Mic className="mr-2 h-4 w-4" /> Chế độ giọng nói
                 </DropdownMenuItem>
                 <DropdownMenuItem onClick={() => setThemeOpen(true)}>

components/mermaid-renderer.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useEffect, useId, useMemo, useState } from "react"
+import { ScrollArea } from "@/components/ui/scroll-area"
 
 type MermaidRendererProps = {
   code: string
@@ -71,9 +72,11 @@ export function MermaidRenderer({ code, title }: MermaidRendererProps) {
           <div className="h-40 w-full animate-pulse rounded-lg bg-muted" />
         </div>
       ) : error ? (
-        <div className="rounded-lg border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
-          <div className="font-medium">Không thể vẽ sơ đồ Mermaid</div>
-          <pre className="mt-2 whitespace-pre-wrap text-xs">{error}</pre>
+        <div className="rounded-lg border border-destructive/30 bg-destructive/10 text-sm text-destructive">
+          <div className="px-3 pt-3 font-medium">Không thể vẽ sơ đồ Mermaid</div>
+          <ScrollArea className="max-h-40">
+            <pre className="px-3 pb-3 pt-2 whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-xs">{error}</pre>
+          </ScrollArea>
         </div>
       ) : (
         <div

components/voice-mode.tsx

@@ -228,7 +228,7 @@ export function VoiceMode() {
         <div className="mt-3 rounded-2xl bg-muted/50 p-3 text-xs">
           {transcript && <p><span className="font-medium">Đang nghe:</span> {transcript}</p>}
           {!transcript && lastSent && <p><span className="font-medium">Đã gửi:</span> {lastSent}</p>}
-          {error && <p className="mt-1 text-destructive">{error}</p>}
+          {error && <p className="mt-1 break-words [overflow-wrap:anywhere] text-destructive">{error}</p>}
         </div>
       )}