fix wave ai scrolling bug (and some other small UI fixes) (#2416)

Author: sawka

frontend/app/aipanel/aimessage.tsx

@@ -79,11 +79,7 @@ const AIToolUse = memo(({ part }: AIToolUseProps) => {
 
     const statusIcon = toolData.status === "completed" ? "✓" : toolData.status === "error" ? "✗" : "•";
     const statusColor =
-        toolData.status === "completed"
-            ? "text-green-400"
-            : toolData.status === "error"
-              ? "text-red-400"
-              : "text-gray-400";
+        toolData.status === "completed" ? "text-success" : toolData.status === "error" ? "text-error" : "text-gray-400";
 
     const effectiveApproval = userApprovalOverride || toolData.approval;
 

frontend/app/aipanel/aipanel.tsx

@@ -529,9 +529,7 @@ const AIPanelComponentInner = memo(({ className, onClose }: AIPanelProps) => {
                                 <AIWelcomeMessage />
                             </div>
                         ) : (
-                            <div className="flex-1 min-h-0" onContextMenu={handleMessagesContextMenu}>
-                                <AIPanelMessages messages={messages} status={status} />
-                            </div>
+                            <AIPanelMessages messages={messages} status={status} onContextMenu={handleMessagesContextMenu} />
                         )}
                         {errorMessage && (
                             <AIErrorMessage errorMessage={errorMessage} onClear={() => model.clearError()} />

frontend/app/aipanel/aipanelmessages.tsx

@@ -10,9 +10,10 @@ import { WaveAIModel } from "./waveai-model";
 interface AIPanelMessagesProps {
     messages: any[];
     status: string;
+    onContextMenu?: (e: React.MouseEvent) => void;
 }
 
-export const AIPanelMessages = memo(({ messages, status }: AIPanelMessagesProps) => {
+export const AIPanelMessages = memo(({ messages, status, onContextMenu }: AIPanelMessagesProps) => {
     const model = WaveAIModel.getInstance();
     const isPanelOpen = useAtomValue(WorkspaceLayoutModel.getInstance().panelVisibleAtom);
     const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -41,7 +42,7 @@ export const AIPanelMessages = memo(({ messages, status }: AIPanelMessagesProps)
     }, [isPanelOpen]);
 
     return (
-        <div ref={messagesContainerRef} className="flex-1 overflow-y-auto p-2 space-y-4">
+        <div ref={messagesContainerRef} className="flex-1 overflow-y-auto p-2 space-y-4" onContextMenu={onContextMenu}>
             {messages.map((message, index) => {
                 const isLastMessage = index === messages.length - 1;
                 const isStreaming = status === "streaming" && isLastMessage && message.role === "assistant";

frontend/app/element/streamdown.tsx

@@ -152,7 +152,7 @@ const CodeBlock = ({ children, onClickExecute, codeBlockMaxWidthAtom }: CodeBloc
     return (
         <div
             className={cn("rounded-lg overflow-hidden bg-black my-4", codeBlockMaxWidth && "max-w-full")}
-            style={codeBlockMaxWidth ? { maxWidth: `${codeBlockMaxWidth}px` } : undefined}
+            style={codeBlockMaxWidth ? { maxWidth: codeBlockMaxWidth, minWidth: Math.min(400, codeBlockMaxWidth) } : undefined}
         >
             <div className="flex items-center justify-between pl-3 pr-2 pt-2 pb-1.5">
                 <span className="text-[11px] text-white/50">{language}</span>