heaven/vojo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

tweak(direct): dial DM list avatars down to 48px with 68px row height for a less heavy density

Browse source
This commit is contained in:
heaven 2026-05-14 01:12:17 +03:00
parent 2d74848509
commit a893e86d92
3 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/app/features/room-nav/DmStreamRow.tsx
View file

@ -356,7 +356,11 @@ export function DmStreamRow({ room, selected, notificationMode, linkPath }: DmSt
gap="300" gap="300"
className={css.DmRowInner} className={css.DmRowInner}
> >
<Avatar size="500" radii="500"> <Avatar
size="500"
radii="500"
style={{ width: toRem(48), height: toRem(48) }}
>
<RoomAvatar <RoomAvatar
roomId={room.roomId} roomId={room.roomId}
src={ src={
@ -373,7 +377,7 @@ export function DmStreamRow({ room, selected, notificationMode, linkPath }: DmSt
} }
alt={roomName} alt={roomName}
renderFallback={() => ( renderFallback={() => (
<Text as="span" size="H4"> <Text as="span" size="H5">
{nameInitials(roomName)} {nameInitials(roomName)}
</Text> </Text>
)} )}

8
src/app/features/room-nav/styles.css.ts
View file

@ -8,10 +8,10 @@ export const CategoryButtonIcon = style({
opacity: config.opacity.P400, opacity: config.opacity.P400,
}); });
// Avatar `size="500"` (~58px) sits with symmetric 10px breathing room // Avatar is 48px with symmetric 10px breathing room top/bottom — minimum
// top/bottom — minimum row height has to clear avatar + padding so the // row height clears avatar + padding so the circle never clips against
// circle never clips against the row's selected/hover background. // the row's selected/hover background.
const DmRowMinHeight = toRem(80); const DmRowMinHeight = toRem(68);
const DmRowTitleBlockHeight = toRem(40); const DmRowTitleBlockHeight = toRem(40);
export const DmRowOuter = style({ export const DmRowOuter = style({

6
src/app/pages/client/direct/Direct.tsx
View file

@ -173,14 +173,14 @@ export function Direct() {
// Per-kind estimates so the initial scroll height is close to actual // Per-kind estimates so the initial scroll height is close to actual
// before measureElement self-corrects: invite cards are ~140px (header + // before measureElement self-corrects: invite cards are ~140px (header +
// sub-line + buttons + optional topic), spam toggle is ~32px, DM rows // 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. // stable when the panel opens with invites.
estimateSize: (index) => { estimateSize: (index) => {
const item = items[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 === 'invite' || item.kind === 'spam-invite') return 140;
if (item.kind === 'spam-toggle') return 32; if (item.kind === 'spam-toggle') return 32;
return 80; return 68;
}, },
// Stable per-item identity so the measurement cache survives item-kind // Stable per-item identity so the measurement cache survives item-kind
// shifts at the same index. Without this TanStack falls back to index, // shifts at the same index. Without this TanStack falls back to index,