Fix scrollbars not showing for mac and some padding issues (#1917)

ui/desktop/src/components/ChatView.tsx

@@ -386,26 +386,28 @@ export default function ChatView({
             activities={botConfig?.activities || null}
           />
         ) : (
-          <ScrollArea ref={scrollRef} className="flex-1 px-4" autoScroll>
+          <ScrollArea ref={scrollRef} className="flex-1" autoScroll>
-            {filteredMessages.map((message, index) => (
+            <div className="px-4">
-              <div key={message.id || index} className="mt-[16px]">
+              {filteredMessages.map((message, index) => (
-                {isUserMessage(message) ? (
+                <div key={message.id || index} className="mt-[16px]">
-                  <UserMessage message={message} />
+                  {isUserMessage(message) ? (
-                ) : (
+                    <UserMessage message={message} />
-                  <GooseMessage
+                  ) : (
-                    messageHistoryIndex={chat?.messageHistoryIndex}
+                    <GooseMessage
-                    message={message}
+                      messageHistoryIndex={chat?.messageHistoryIndex}
-                    messages={messages}
+                      message={message}
-                    metadata={messageMetadata[message.id || '']}
+                      messages={messages}
-                    append={(text) => append(createUserMessage(text))}
+                      metadata={messageMetadata[message.id || '']}
-                    appendMessage={(newMessage) => {
+                      append={(text) => append(createUserMessage(text))}
-                      const updatedMessages = [...messages, newMessage];
+                      appendMessage={(newMessage) => {
-                      setMessages(updatedMessages);
+                        const updatedMessages = [...messages, newMessage];
-                    }}
+                        setMessages(updatedMessages);
-                  />
+                      }}
-                )}
+                    />
-              </div>
+                  )}
-            ))}
+                </div>
+              ))}
+            </div>
             {error && (
               <div className="flex flex-col items-center justify-center p-4">
                 <div className="text-red-700 dark:text-red-300 bg-red-400/50 p-3 rounded-lg mb-2">

ui/desktop/src/components/sessions/SessionHistoryView.tsx

@@ -98,7 +98,7 @@ const SessionHistoryView: React.FC<SessionHistoryViewProps> = ({
   };
 
   return (
-    <div className="h-screen w-full">
+    <div className="h-screen w-full flex flex-col">
       <div className="relative flex items-center h-[36px] w-full bg-bgSubtle"></div>
 
       {/* Top Row - back, info, reopen thread (fixed) */}

ui/desktop/src/components/sessions/SessionViewComponents.tsx

@@ -77,7 +77,7 @@ export const SessionMessages: React.FC<SessionMessagesProps> = ({
   onRetry,
 }) => {
   return (
-    <ScrollArea className="h-[calc(100vh-120px)] w-full">
+    <ScrollArea className="h-full w-full">
       <div className="p-4">
         <div className="flex flex-col space-y-4">
           <div className="space-y-4 mb-6">

ui/desktop/src/styles/main.css

@@ -148,6 +148,93 @@
       --text-prominent-inverse: var(--grey-20);
     }
     /* end arcade colors */
+
+    /* Force scrollbars to be visible */
+    [data-radix-scroll-area-viewport] {
+      scrollbar-width: auto !important;
+      -ms-overflow-style: auto !important;
+    }
+
+    /* Override Radix UI ScrollArea styles */
+    [data-radix-scroll-area-viewport] > div {
+      display: block !important;
+    }
+
+    /* Native scrollbar styling */
+    * {
+      scrollbar-width: auto;
+      scrollbar-color: var(--grey-80) transparent;
+    }
+
+    .dark * {
+      scrollbar-color: var(--dark-grey-45) transparent;
+    }
+
+    /* Webkit scrollbar styles */
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+      width: 12px; /* Increased from 8px */
+      height: 12px;
+      background-color: transparent;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: transparent;
+      border-radius: 0;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-color: var(--grey-80);
+      border: 3px solid transparent; /* Creates padding effect */
+      border-radius: 8px;
+      background-clip: padding-box;
+      min-height: 40px; /* Minimum height of thumb */
+    }
+
+    .dark ::-webkit-scrollbar-thumb {
+      background-color: var(--dark-grey-45);
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: var(--grey-60);
+      border: 2px solid transparent; /* Slightly less padding on hover */
+    }
+
+    .dark ::-webkit-scrollbar-thumb:hover {
+      background-color: var(--dark-grey-60);
+    }
+
+    /* Ensure the thumb is more prominent when active */
+    ::-webkit-scrollbar-thumb:active {
+      background-color: var(--grey-50);
+      border: 2px solid transparent;
+    }
+
+    .dark ::-webkit-scrollbar-thumb:active {
+      background-color: var(--dark-grey-60);
+    }
+
+    ::-webkit-scrollbar-track {
+      background: transparent;
+      border-radius: 4px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: var(--grey-80);
+      border-radius: 4px;
+    }
+
+    .dark ::-webkit-scrollbar-thumb {
+      background: var(--dark-grey-45);
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--grey-60);
+    }
+
+    .dark ::-webkit-scrollbar-thumb:hover {
+      background: var(--dark-grey-60);
+    }
   }
 }