highperfocused/multica
1
0
Fork 0
mirror of https://github.com/multica-ai/multica.git synced 2026-07-23 01:59:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(inbox): align inbox list left padding with chat list (#5240)

Browse Source 
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>
This commit is contained in:
Jiayuan Zhang
2026-07-11 04:15:12 +08:00
committed by GitHub
parent e10bb3fff0
commit 489657cfb5
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/views/inbox/components/inbox-list-item.tsx
View File

@@ -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"
}`}
>

4
packages/views/inbox/components/inbox-page.tsx
View File

@@ -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" />