fix(ui): improve message scroll behavior to ensure bottom content visibility

- Implement dual-phase scrolling: virtualizer positioning + native scroll to bottom
- Reduce excessive bottom padding from pb-40 to pb-20 for better viewport usage
- Unify scroll behavior across auto-scroll, history loading, and manual scroll
- Fix issue where streamed content bottom couldn't reach viewport

Author: axin7

src/components/ClaudeCodeSession.tsx

@@ -274,7 +274,22 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
   // Auto-scroll to bottom when new messages arrive
   useEffect(() => {
     if (displayableMessages.length > 0) {
-      rowVirtualizer.scrollToIndex(displayableMessages.length - 1, { align: 'end', behavior: 'smooth' });
+      // Use a more precise scrolling method to ensure content is fully visible
+      setTimeout(() => {
+        const scrollElement = parentRef.current;
+        if (scrollElement) {
+          // First, scroll using virtualizer to get close to the bottom
+          rowVirtualizer.scrollToIndex(displayableMessages.length - 1, { align: 'end', behavior: 'auto' });
+
+          // Then use direct scroll to ensure we reach the absolute bottom
+          requestAnimationFrame(() => {
+            scrollElement.scrollTo({
+              top: scrollElement.scrollHeight,
+              behavior: 'smooth'
+            });
+          });
+        }
+      }, 50);
     }
   }, [displayableMessages.length, rowVirtualizer]);
 
@@ -326,7 +341,17 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
       // Scroll to bottom after loading history
       setTimeout(() => {
         if (loadedMessages.length > 0) {
-          rowVirtualizer.scrollToIndex(loadedMessages.length - 1, { align: 'end', behavior: 'auto' });
+          const scrollElement = parentRef.current;
+          if (scrollElement) {
+            // Use the same improved scrolling method
+            rowVirtualizer.scrollToIndex(loadedMessages.length - 1, { align: 'end', behavior: 'auto' });
+            requestAnimationFrame(() => {
+              scrollElement.scrollTo({
+                top: scrollElement.scrollHeight,
+                behavior: 'auto'
+              });
+            });
+          }
         }
       }, 100);
     } catch (err) {
@@ -1141,7 +1166,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
   const messagesList = (
     <div
       ref={parentRef}
-      className="flex-1 overflow-y-auto relative pb-40"
+      className="flex-1 overflow-y-auto relative pb-20"
       style={{
         contain: 'strict',
       }}
@@ -1187,7 +1212,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
           initial={{ opacity: 0, y: 8 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.15 }}
-          className="flex items-center justify-center py-4 mb-40"
+          className="flex items-center justify-center py-4 mb-20"
         >
           <div className="rotating-symbol text-primary" />
         </motion.div>
@@ -1199,7 +1224,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
           initial={{ opacity: 0, y: 8 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.15 }}
-          className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive mb-40 w-full max-w-6xl mx-auto"
+          className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive mb-20 w-full max-w-6xl mx-auto"
         >
           {error}
         </motion.div>
@@ -1409,18 +1434,23 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
                       variant="ghost"
                       size="sm"
                       onClick={() => {
-                      // Use virtualizer to scroll to the last item
-                      if (displayableMessages.length > 0) {
-                        // Scroll to bottom of the container
-                        const scrollElement = parentRef.current;
-                        if (scrollElement) {
-                          scrollElement.scrollTo({
-                            top: scrollElement.scrollHeight,
-                            behavior: 'smooth'
-                          });
+                        // Use the improved scrolling method for manual scroll to bottom
+                        if (displayableMessages.length > 0) {
+                          const scrollElement = parentRef.current;
+                          if (scrollElement) {
+                            // First, scroll using virtualizer to get close to the bottom
+                            rowVirtualizer.scrollToIndex(displayableMessages.length - 1, { align: 'end', behavior: 'auto' });
+
+                            // Then use direct scroll to ensure we reach the absolute bottom
+                            requestAnimationFrame(() => {
+                              scrollElement.scrollTo({
+                                top: scrollElement.scrollHeight,
+                                behavior: 'smooth'
+                              });
+                            });
+                          }
                         }
-                      }
-                    }}
+                      }}
                       className="px-3 py-2 hover:bg-accent rounded-none"
                     >
                       <ChevronDown className="h-4 w-4" />