From 489657cfb508a20af836c8a8f35803c462b990c7 Mon Sep 17 00:00:00 2001
From: Jiayuan Zhang <forrestchang7@gmail.com>
Date: Sat, 11 Jul 2026 04:15:12 +0800
Subject: [PATCH] fix(inbox): align inbox list left padding with chat list
 (#5240)

The inbox row used px-3 inside the px-2 list container (20px content
inset) while the chat thread row uses px-2 (16px), so switching between
the Chat and Inbox pages made the avatar column visibly jump. Align the
inbox row to px-2, which also lines the avatars up with the shared
PageHeader title (px-4 = 16px) and matches the row convention used
elsewhere. Update the two loading-skeleton rows (px-4) to match so the
list no longer shifts when real rows load in.

Closes MUL-4396

Co-authored-by: Lambda <lambda@multica.ai>
Co-authored-by: multica-agent <github@multica.ai>
---
 packages/views/inbox/components/inbox-list-item.tsx | 2 +-
 packages/views/inbox/components/inbox-page.tsx      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/views/inbox/components/inbox-list-item.tsx b/packages/views/inbox/components/inbox-list-item.tsx
index 3839f938f3..9d4a6473df 100644
--- a/packages/views/inbox/components/inbox-list-item.tsx
+++ b/packages/views/inbox/components/inbox-list-item.tsx
@@ -44,7 +44,7 @@ export function InboxListItem({
     <button
       type="button"
       onClick={onClick}
-      className={`group flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left transition-colors ${
+      className={`group flex w-full items-center gap-3 rounded-md px-2 py-2.5 text-left transition-colors ${
         isSelected ? "bg-accent" : "hover:bg-accent/50"
       }`}
     >
diff --git a/packages/views/inbox/components/inbox-page.tsx b/packages/views/inbox/components/inbox-page.tsx
index 81d6c0d6d9..7eb399a4d7 100644
--- a/packages/views/inbox/components/inbox-page.tsx
+++ b/packages/views/inbox/components/inbox-page.tsx
@@ -375,7 +375,7 @@ export function InboxPage() {
           </div>
           <div className="flex-1 min-h-0 overflow-y-auto space-y-1 p-2">
             {Array.from({ length: 5 }).map((_, i) => (
-              <div key={i} className="flex items-center gap-3 px-4 py-2.5">
+              <div key={i} className="flex items-center gap-3 px-2 py-2.5">
                 <Skeleton className="h-7 w-7 shrink-0 rounded-full" />
                 <div className="flex-1 space-y-2">
                   <Skeleton className="h-4 w-3/4" />
@@ -433,7 +433,7 @@ export function InboxPage() {
             </div>
             <div className="flex-1 min-h-0 overflow-y-auto space-y-1 p-2">
               {Array.from({ length: 5 }).map((_, i) => (
-                <div key={i} className="flex items-center gap-3 px-4 py-2.5">
+                <div key={i} className="flex items-center gap-3 px-2 py-2.5">
                   <Skeleton className="h-7 w-7 shrink-0 rounded-full" />
                   <div className="flex-1 space-y-2">
                     <Skeleton className="h-4 w-3/4" />