From a893e86d92dc4dd456def91541118dcd1df2e08f Mon Sep 17 00:00:00 2001
From: heaven <vojochatdev@gmail.com>
Date: Thu, 14 May 2026 01:12:17 +0300
Subject: [PATCH] tweak(direct): dial DM list avatars down to 48px with 68px
 row height for a less heavy density

---
 src/app/features/room-nav/DmStreamRow.tsx | 8 ++++++--
 src/app/features/room-nav/styles.css.ts   | 8 ++++----
 src/app/pages/client/direct/Direct.tsx    | 6 +++---
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/app/features/room-nav/DmStreamRow.tsx b/src/app/features/room-nav/DmStreamRow.tsx
index 829d59c1..6ec7cbf1 100644
--- a/src/app/features/room-nav/DmStreamRow.tsx
+++ b/src/app/features/room-nav/DmStreamRow.tsx
@@ -356,7 +356,11 @@ export function DmStreamRow({ room, selected, notificationMode, linkPath }: DmSt
             gap="300"
             className={css.DmRowInner}
           >
-            <Avatar size="500" radii="500">
+            <Avatar
+              size="500"
+              radii="500"
+              style={{ width: toRem(48), height: toRem(48) }}
+            >
               <RoomAvatar
                 roomId={room.roomId}
                 src={
@@ -373,7 +377,7 @@ export function DmStreamRow({ room, selected, notificationMode, linkPath }: DmSt
                 }
                 alt={roomName}
                 renderFallback={() => (
-                  <Text as="span" size="H4">
+                  <Text as="span" size="H5">
                     {nameInitials(roomName)}
                   </Text>
                 )}
diff --git a/src/app/features/room-nav/styles.css.ts b/src/app/features/room-nav/styles.css.ts
index 7df2bb94..2091719b 100644
--- a/src/app/features/room-nav/styles.css.ts
+++ b/src/app/features/room-nav/styles.css.ts
@@ -8,10 +8,10 @@ export const CategoryButtonIcon = style({
   opacity: config.opacity.P400,
 });
 
-// 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);
+// Avatar is 48px with symmetric 10px breathing room top/bottom — minimum
+// row height clears avatar + padding so the circle never clips against
+// the row's selected/hover background.
+const DmRowMinHeight = toRem(68);
 const DmRowTitleBlockHeight = toRem(40);
 
 export const DmRowOuter = style({
diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index 49f4f521..29f0d560 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -173,14 +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
-    // ~80px (avatar 58px + 2-line title block + padding). Keeps first paint
+    // ~68px (avatar 48px + 2-line title block + padding). Keeps first paint
     // stable when the panel opens with invites.
     estimateSize: (index) => {
       const item = items[index];
-      if (!item) return 80;
+      if (!item) return 68;
       if (item.kind === 'invite' || item.kind === 'spam-invite') return 140;
       if (item.kind === 'spam-toggle') return 32;
-      return 80;
+      return 68;
     },
     // Stable per-item identity so the measurement cache survives item-kind
     // shifts at the same index. Without this TanStack falls back to index,