Improve scroll handling and robustness for chat UI

Added 'overscroll-behavior: contain' to body and Chromebook scroll containers to prevent unwanted scroll chaining. Updated scrollToBottom utilities to handle null/undefined containers and errors gracefully. Fixed ChatDetail to use the correct scroll handler function.

app/globals.css

@@ -4,6 +4,7 @@
 
 body {
   font-family: Arial, Helvetica, sans-serif;
+  overscroll-behavior: contain;
 }
 
 @layer utilities {

components/dashboard/ChatDetail.tsx

@@ -347,7 +347,7 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
 
           // If near bottom, scroll to new messages
           if (isNearBottom()) {
-            setTimeout(scrollToBottom, 50);
+            setTimeout(scrollToBottomHandler, 50);
           }
 
           // Set timeout to mark new messages as read
@@ -447,7 +447,7 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
     setMessages(prev => [...prev, tempMessage]);
 
     // Scroll to bottom to show the new message
-    setTimeout(scrollToBottom, 50);
+    setTimeout(scrollToBottomHandler, 50);
 
     try {
       setSending(true);

components/dashboard/ChatTable.tsx

@@ -354,7 +354,7 @@ export default function ChatTable() {
                           <div>
                             <div className="font-semibold text-sm flex items-center gap-2">
                               {chat.telegramUsername ? (
-                                <span className="text-blue-400">@{chat.telegramUsername}</span>
+                                <span>@{chat.telegramUsername}</span>
                               ) : (
                                 <span className="text-foreground">Customer {chat.buyerId.slice(0, 6)}...</span>
                               )}

lib/hooks/use-chromebook-scroll.tsx

@@ -11,6 +11,8 @@ export function useChromebookScroll() {
     if (!container) return;
 
     // Enhanced scrolling for Chromebooks
+    container.style.overscrollBehavior = 'contain';
+
     const handleTouchStart = (e: TouchEvent) => {
       // Prevent default touch behavior that might interfere with scrolling
       if (e.touches.length === 1) {
@@ -71,15 +73,32 @@ export function useChromebookScroll() {
  * Hook for smooth scrolling to bottom (useful for chat interfaces)
  */
 export function useSmoothScrollToBottom() {
-  const scrollToBottom = (container: HTMLElement) => {
+  const scrollToBottom = (container: HTMLElement | null | undefined) => {
+    if (!container || typeof container !== 'object') return;
+
+    try {
+      if ('scrollTo' in container && typeof container.scrollTo === 'function') {
         container.scrollTo({
           top: container.scrollHeight,
           behavior: 'smooth'
         });
+      } else {
+        container.scrollTop = container.scrollHeight;
+      }
+    } catch (err) {
+      console.error('Error in scrollToBottom:', err);
+      // Fallback to direct property assignment if scrollTo fails
+      try {
+        container.scrollTop = container.scrollHeight;
+      } catch (e) { }
+    }
   };
 
-  const scrollToBottomInstant = (container: HTMLElement) => {
+  const scrollToBottomInstant = (container: HTMLElement | null | undefined) => {
+    if (!container || typeof container !== 'object') return;
+    try {
       container.scrollTop = container.scrollHeight;
+    } catch (e) { }
   };
 
   return { scrollToBottom, scrollToBottomInstant };

public/git-info.json

@@ -1,4 +1,4 @@
 {
-  "commitHash": "f0b89d6",
-  "buildTime": "2026-01-13T10:09:36.925Z"
+  "commitHash": "5e8ba7b",
+  "buildTime": "2026-01-14T05:59:07.483Z"
 }