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

@@ -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>
                 )}

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({

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,