From c6ca5f327089502ed4a2c124436362d078f74e3f Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Sun, 15 Feb 2026 10:47:59 +0800
Subject: [PATCH] refactor(ui): unify container layout and adjust spacing

- Use container utility class consistently across chat components
- Change container max-width from 5xl to 4xl for better readability
- Adjust message bubble padding (p-3 -> p-2)
- Fix logout dropdown alignment and add destructive variant

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/desktop/src/renderer/src/pages/layout.tsx | 4 ++--
 packages/ui/src/components/chat-skeleton.tsx   | 2 +-
 packages/ui/src/components/chat-view.tsx       | 6 +++---
 packages/ui/src/components/message-list.tsx    | 4 ++--
 packages/ui/src/styles/globals.css             | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/desktop/src/renderer/src/pages/layout.tsx b/apps/desktop/src/renderer/src/pages/layout.tsx
index 476f61c7..9cef56e4 100644
--- a/apps/desktop/src/renderer/src/pages/layout.tsx
+++ b/apps/desktop/src/renderer/src/pages/layout.tsx
@@ -284,8 +284,8 @@ export default function Layout() {
                     </div>
                     <ChevronsUpDown className="ml-auto size-4" />
                   </DropdownMenuTrigger>
-                  <DropdownMenuContent side="top">
-                    <DropdownMenuItem onClick={handleLogout}>
+                  <DropdownMenuContent side="top" align="end">
+                    <DropdownMenuItem variant="destructive" onClick={handleLogout}>
                       <LogOut className="size-4" />
                       Log out
                     </DropdownMenuItem>
diff --git a/packages/ui/src/components/chat-skeleton.tsx b/packages/ui/src/components/chat-skeleton.tsx
index 405d2723..ea9f289c 100644
--- a/packages/ui/src/components/chat-skeleton.tsx
+++ b/packages/ui/src/components/chat-skeleton.tsx
@@ -5,7 +5,7 @@ import { Skeleton } from "@multica/ui/components/ui/skeleton";
 /** Skeleton placeholder matching MessageList layout, shown while reconnecting */
 export function ChatSkeleton() {
   return (
-    <div className="px-4 py-6 space-y-6 max-w-4xl mx-auto">
+    <div className="container px-4 py-6 space-y-6">
       {/* Assistant message */}
       <div className="flex justify-start">
         <div className="w-full p-1 px-2.5 space-y-2">
diff --git a/packages/ui/src/components/chat-view.tsx b/packages/ui/src/components/chat-view.tsx
index 5a1c92df..9219f781 100644
--- a/packages/ui/src/components/chat-view.tsx
+++ b/packages/ui/src/components/chat-view.tsx
@@ -145,7 +145,7 @@ export function ChatView({
 
       <main ref={mainRef} className="flex-1 overflow-y-auto min-h-0" style={fadeStyle}>
         {isLoadingHistory && messages.length === 0 ? (
-          <div className="px-4 py-6 max-w-4xl mx-auto">
+          <div className="container px-4 py-6">
             {/* User bubble */}
             <div className="flex justify-end my-2">
               <Skeleton className="h-8 w-[30%] rounded-md" />
@@ -211,7 +211,7 @@ export function ChatView({
             )}
             <MessageList messages={messages} streamingIds={streamingIds} />
             {isLoading && streamingIds.size === 0 && pendingApprovals.length === 0 && (
-              <div className="relative px-4 sm:px-10 max-w-4xl mx-auto">
+              <div className="container relative px-4 sm:px-10">
                 <div className="flex items-center gap-2 py-1 px-2.5 text-muted-foreground">
                   <Spinner className="text-xs" />
                   <span className="text-xs">Generating...</span>
@@ -219,7 +219,7 @@ export function ChatView({
               </div>
             )}
             {pendingApprovals.length > 0 && (
-              <div className="relative px-4 max-w-4xl mx-auto">
+              <div className="container relative px-4">
                 {pendingApprovals.map((approval) => (
                   <ExecApprovalItem
                     key={approval.approvalId}
diff --git a/packages/ui/src/components/message-list.tsx b/packages/ui/src/components/message-list.tsx
index b4d80778..5d4599ca 100644
--- a/packages/ui/src/components/message-list.tsx
+++ b/packages/ui/src/components/message-list.tsx
@@ -78,7 +78,7 @@ export const MessageList = memo(function MessageList({ messages, streamingIds }:
   }, [messages])
 
   return (
-    <div className="container relative p-6 px-4 sm:px-10">
+    <div className="container relative p-6">
       {messages.map((msg) => {
         // System messages (e.g. compaction notifications)
         if (msg.role === "system") {
@@ -125,7 +125,7 @@ export const MessageList = memo(function MessageList({ messages, streamingIds }:
                 )}
                 <div
                   className={cn(
-                    msg.role === "user" ? "bg-muted rounded-md max-w-[60%] p-3 px-4" : "w-full p-3 my-1"
+                    msg.role === "user" ? "bg-muted rounded-md max-w-[60%] p-2 px-4" : "w-full p-2 my-1"
                   )}
                 >
                   {isStreaming ? (
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index 7c7f1cf1..b66018d1 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -257,7 +257,7 @@
 }
 
 @utility container {
-  @apply w-full max-w-5xl mx-auto;
+  @apply w-full max-w-4xl mx-auto;
 }
 
 @layer base {