revert(settings): keep the dense member roster avatar

Consolidating the Teammates/Organization avatar onto the credential member
row's was a redesign, not a deduplication. The two encode different things:
the roster is a dense list keyed on email where the avatar is a 14px neutral
marker, while a member management row carries a name, an email, and a role
control and earns a 36px hashed avatar.

Merging them made those rows ~70% taller, gave every workspace in a permission
group a colour-hashed "avatar" seeded on its name, and cut the Add Members
picker from ~7 visible rows to ~5 inside its fixed-height box.

Restores both avatars and the containers that owned their bleed, and records
in the rule why they stay separate. Keeps only the unrelated fix in that area:
the picker row was the one settings row rounded at `sm`.

Author: waleedlatif1

.claude/rules/sim-settings-pages.md

@@ -233,8 +233,13 @@ navigation chevron. Never hand-roll any of it, and never wrap the row in your ow
   (`app/workspace/[workspaceId]/components/resource-tile` — note: *not* under
   `settings/`, unlike the other `…/` paths on this page) — the 36px tile chrome, for the rare tile
   outside a row (a detail heading). `ResourceTile` wraps the filled pairing.
-- **`MemberAvatar`** (`@/components/permissions/member-avatar`) — the one avatar
-  for any member row.
+
+
+**Member avatars are deliberately two components, not one.** `member-list.tsx`
+renders a 14px neutral marker for the dense Teammates/Organization roster, where
+the email is the primary content; `components/permissions/member-row.tsx` renders
+a 36px `getUserColor`-hashed avatar for member *management* rows that carry a name,
+an email, and a role control. Same shape, different job — do not merge them.
 
 ## Deleting a resource
 

apps/sim/app/workspace/[workspaceId]/settings/components/member-list/index.ts

@@ -1,2 +1 @@
-export { MemberAvatar } from '@/components/permissions/member-avatar'
-export { MemberRow, MemberSection } from './member-list'
+export { MemberAvatar, MemberRow, MemberSection } from './member-list'

apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx

@@ -1,15 +1,41 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import { MemberAvatar } from '@/components/permissions/member-avatar'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
-import { RESOURCE_LIST_STACK } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 
-const ROW_CLASSES = '-mx-2 flex items-center gap-2.5 rounded-lg p-2'
+const ROW_CLASSES = 'flex items-center gap-2.5 p-2'
 const ROW_EMAIL_CLASSES = 'min-w-0 flex-1 truncate text-[var(--text-body)] text-sm'
 const ROW_STATUS_CLASSES = 'flex-shrink-0 text-[var(--text-muted)] text-caption'
 
+interface MemberAvatarProps {
+  name: string
+  image: string | null
+}
+
+/**
+ * 14px circular avatar used in member rows. Falls back to the first letter of
+ * the member's name when no image is available.
+ */
+export function MemberAvatar({ name, image }: MemberAvatarProps) {
+  if (image) {
+    return (
+      <img
+        src={image}
+        alt={name}
+        referrerPolicy='no-referrer'
+        className='size-[14px] flex-shrink-0 rounded-full border border-[var(--border)] object-cover'
+      />
+    )
+  }
+
+  return (
+    <span className='flex size-[14px] flex-shrink-0 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-3)] font-medium text-[8px] text-[var(--text-secondary)]'>
+      {name.charAt(0).toUpperCase()}
+    </span>
+  )
+}
+
 interface MemberRowProps {
   name: string
   email: string
@@ -30,7 +56,7 @@ interface MemberRowProps {
 export function MemberRow({ name, email, image, status, roleControl, menu }: MemberRowProps) {
   return (
     <div className={ROW_CLASSES}>
-      <MemberAvatar name={name} image={image} colorSeed={email || name} />
+      <MemberAvatar name={name} image={image} />
       <span className={ROW_EMAIL_CLASSES}>{email}</span>
       <span className={ROW_STATUS_CLASSES}>{status}</span>
       {roleControl}
@@ -65,7 +91,7 @@ export function MemberSection({
       {isEmpty ? (
         <SettingsEmptyState variant='inline'>{emptyText}</SettingsEmptyState>
       ) : (
-        <div className={RESOURCE_LIST_STACK}>{children}</div>
+        <div className='-mx-2 flex flex-col gap-y-0.5'>{children}</div>
       )}
     </SettingsSection>
   )

apps/sim/components/permissions/member-avatar.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { Chip, ChipDropdown, cn } from '@sim/emcn'
-import { MemberAvatar } from '@/components/permissions/member-avatar'
+import { Avatar, AvatarFallback, Chip, ChipDropdown, cn } from '@sim/emcn'
+import { getUserColor } from '@/lib/workspaces/colors'
 import type { MemberRole } from './member-role-options'
 import { RoleLockTooltip } from './role-lock'
 
@@ -49,16 +49,20 @@ export function MemberRow<TRole extends string = MemberRole>({
   return (
     <div
       className={cn(
-        '-mx-2 grid items-center gap-2 rounded-lg p-2',
+        'grid items-center gap-2',
         canManage ? 'grid-cols-[1fr_120px_72px]' : 'grid-cols-[1fr_200px]'
       )}
     >
       <div className='flex min-w-0 items-center gap-2.5'>
-        <MemberAvatar
-          name={member.userName || member.userEmail || '?'}
-          colorSeed={member.userId || member.userEmail || ''}
-        />
-        <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+        <Avatar className='size-9 flex-shrink-0'>
+          <AvatarFallback
+            style={{ background: getUserColor(member.userId || member.userEmail || '') }}
+            className='border border-[var(--border-1)] text-small text-white'
+          >
+            {(member.userName || member.userEmail || '?').charAt(0).toUpperCase()}
+          </AvatarFallback>
+        </Avatar>
+        <div className='flex min-w-0 flex-col'>
           <span className='truncate text-[var(--text-body)] text-sm'>
             {member.userName || member.userEmail || member.userId}
           </span>

apps/sim/components/permissions/member-row.tsx

@@ -28,7 +28,6 @@ import { getErrorMessage } from '@sim/utils/errors'
 import { formatDate } from '@sim/utils/formatting'
 import { ChevronDown, Plus } from 'lucide-react'
 import { useQueryState } from 'nuqs'
-import { MemberAvatar } from '@/components/permissions/member-avatar'
 import { saveDiscardActions } from '@/components/settings/save-discard-actions'
 import type { ShareAuthType } from '@/lib/api/contracts/public-shares'
 import { isBlockTypeAccessControlExempt } from '@/lib/permission-groups/block-access'
@@ -42,11 +41,13 @@ import {
   groupTabParam,
   groupTabUrlKeys,
 } from '@/app/workspace/[workspaceId]/settings/[section]/search-params'
-import { MemberRow } from '@/app/workspace/[workspaceId]/settings/components/member-list'
+import {
+  MemberAvatar,
+  MemberRow,
+} from '@/app/workspace/[workspaceId]/settings/components/member-list'
 import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
-import { RESOURCE_LIST_STACK } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import { useSettingsUnsavedGuard } from '@/app/workspace/[workspaceId]/settings/hooks/use-settings-unsaved-guard'
 import { getAllBlocks } from '@/blocks'
@@ -453,11 +454,7 @@ function AddMembersModal({
                           className='flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
                         >
                           <Checkbox checked={isSelected} />
-                          <MemberAvatar
-                            name={name}
-                            image={member.user?.image ?? null}
-                            colorSeed={member.userId || email}
-                          />
+                          <MemberAvatar name={name} image={member.user?.image ?? null} />
                           <div className='min-w-0 flex-1'>
                             <div className='truncate text-[var(--text-body)] text-sm'>{name}</div>
                             <div className='truncate text-[var(--text-muted)] text-caption'>
@@ -1622,7 +1619,7 @@ export function GroupDetail({
                     />
                   </div>
                   {viewingGroup.workspaces.length > 0 && (
-                    <div className={RESOURCE_LIST_STACK}>
+                    <div className='-mx-2 flex flex-col gap-y-0.5'>
                       {viewingGroup.workspaces.map((ws) => (
                         <MemberRow
                           key={ws.id}
@@ -1657,17 +1654,17 @@ export function GroupDetail({
                     </Chip>
                   </div>
                   {membersLoading ? (
-                    <div className={RESOURCE_LIST_STACK}>
+                    <div className='-mx-2 flex flex-col gap-y-0.5'>
                       {[1, 2].map((i) => (
-                        <div key={i} className='-mx-2 flex items-center gap-2.5 rounded-lg p-2'>
-                          <Skeleton className='size-9 flex-shrink-0 rounded-full' />
+                        <div key={i} className='flex items-center gap-2.5 p-2'>
+                          <Skeleton className='size-[14px] flex-shrink-0 rounded-full' />
                           <Skeleton className='h-[14px] w-[180px]' />
                         </div>
                       ))}
                     </div>
                   ) : (
                     members.length > 0 && (
-                      <div className={RESOURCE_LIST_STACK}>
+                      <div className='-mx-2 flex flex-col gap-y-0.5'>
                         {members.map((member) => (
                           <MemberRow
                             key={member.id}