chore: style sidebar

Author: guenhter

frontend_omni/src/index.css

@@ -9,3 +9,22 @@ body {
     background-color 0.3s ease,
     color 0.1s ease;
 }
+
+/* Custom scrollbar styles */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-muted);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-ring);
+}

frontend_omni/src/modules/chat-layout/ChatArea.tsx

@@ -148,7 +148,6 @@ export default function ChatArea() {
         <div className="size-full flex flex-col">
             {ChatTopPane && <ChatTopPane />}
             <MessageList
-                className="max-w-5xl mx-auto p-6 h-full w-full overflow-y-auto"
                 pastMessages={messages}
                 inputMessage={inputMessage}
                 onRegenerate={handleRegenerate}

frontend_omni/src/modules/chat-layout/MessageList.tsx

@@ -30,7 +30,6 @@ export default function MessageList({
     pastMessages,
     inputMessage,
     onRegenerate,
-    className,
 }: MessageListProps) {
     const modules = useModules();
     const WelcomeComponent = modules.getOne<ComponentType>(
@@ -42,8 +41,8 @@ export default function MessageList({
     return (
         <>
             {!hasMessages && WelcomeComponent && <WelcomeComponent />}
-            <Conversation className={className}>
-                <ConversationContent>
+            <Conversation className="p-6">
+                <ConversationContent className="mx-auto max-w-5xl">
                     {pastMessages.map((message) => (
                         <CompletedMessage
                             key={message.id}