From 2d748485096516533924fdefc7cbddafb36db3fe Mon Sep 17 00:00:00 2001
From: heaven <vojochatdev@gmail.com>
Date: Thu, 14 May 2026 01:05:32 +0300
Subject: [PATCH] feat(direct): enlarge DM list avatars to size 500 with 80px
 row height and matched virtualizer estimate for a denser two-line layout

---
 src/app/features/room-nav/DmStreamRow.tsx | 4 ++--
 src/app/features/room-nav/styles.css.ts   | 7 +++++--
 src/app/pages/client/direct/Direct.tsx    | 7 ++++---
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/app/features/room-nav/DmStreamRow.tsx b/src/app/features/room-nav/DmStreamRow.tsx
index b3b79efc..829d59c1 100644
--- a/src/app/features/room-nav/DmStreamRow.tsx
+++ b/src/app/features/room-nav/DmStreamRow.tsx
@@ -356,7 +356,7 @@ export function DmStreamRow({ room, selected, notificationMode, linkPath }: DmSt
             gap="300"
             className={css.DmRowInner}
           >
-            <Avatar size="300" radii="400">
+            <Avatar size="500" radii="500">
               <RoomAvatar
                 roomId={room.roomId}
                 src={
@@ -373,7 +373,7 @@ export function DmStreamRow({ room, selected, notificationMode, linkPath }: DmSt
                 }
                 alt={roomName}
                 renderFallback={() => (
-                  <Text as="span" size="H6">
+                  <Text as="span" size="H4">
                     {nameInitials(roomName)}
                   </Text>
                 )}
diff --git a/src/app/features/room-nav/styles.css.ts b/src/app/features/room-nav/styles.css.ts
index 77fa0115..7df2bb94 100644
--- a/src/app/features/room-nav/styles.css.ts
+++ b/src/app/features/room-nav/styles.css.ts
@@ -8,7 +8,10 @@ export const CategoryButtonIcon = style({
   opacity: config.opacity.P400,
 });
 
-const DmRowMinHeight = toRem(68);
+// Avatar `size="500"` (~58px) sits with symmetric 10px breathing room
+// top/bottom — minimum row height has to clear avatar + padding so the
+// circle never clips against the row's selected/hover background.
+const DmRowMinHeight = toRem(80);
 const DmRowTitleBlockHeight = toRem(40);
 
 export const DmRowOuter = style({
@@ -19,7 +22,7 @@ export const DmRowOuter = style({
 export const DmRowInner = style({
   minHeight: DmRowMinHeight,
   boxSizing: 'border-box',
-  padding: `${toRem(8)} 0`,
+  padding: `${toRem(10)} 0`,
 });
 
 // Locks the title block to its natural 2-line height so the name does
diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index 0f6d6644..49f4f521 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -173,13 +173,14 @@ export function Direct() {
     // Per-kind estimates so the initial scroll height is close to actual
     // before measureElement self-corrects: invite cards are ~140px (header +
     // sub-line + buttons + optional topic), spam toggle is ~32px, DM rows
-    // ~68px. Keeps first paint stable when the panel opens with invites.
+    // ~80px (avatar 58px + 2-line title block + padding). Keeps first paint
+    // stable when the panel opens with invites.
     estimateSize: (index) => {
       const item = items[index];
-      if (!item) return 68;
+      if (!item) return 80;
       if (item.kind === 'invite' || item.kind === 'spam-invite') return 140;
       if (item.kind === 'spam-toggle') return 32;
-      return 68;
+      return 80;
     },
     // Stable per-item identity so the measurement cache survives item-kind
     // shifts at the same index. Without this TanStack falls back to index,