fix(web): flat separators with wrapper divs, first-row border, DM sidebar title case

- FriendItem/RequestItem: add plain wrapper div so divide-y border
  lands on a non-rounded element (fixes curved separator lines)
- Add border-t to divide-y containers so first row also gets top line
- Remove uppercase from "Direct Messages" in DM sidebar

packages/web/src/components/chat/FriendsPage.tsx

@@ -100,7 +100,7 @@ export function FriendsPage({ mobile }: FriendsPageProps) {
                 <p className="text-txt-tertiary text-sm">No one's online right now.</p>
               </div>
             ) : (
-              <div className="divide-y divide-interactive-muted">
+              <div className="divide-y divide-interactive-muted border-t border-interactive-muted">
                 {onlineFriends.map(friend => (
                   <FriendItem key={`${friend.id}:${friend._instanceOrigin}`} friend={friend} onRemove={() => setPendingUnfriend({ id: friend.id, name: friend.displayName ?? parseFederatedUsername(friend.username).baseName })} onDm={() => handleOpenDm(friend.id, friend.homeUserId ?? undefined, friend.homeInstance)} />
                 ))}
@@ -120,7 +120,7 @@ export function FriendsPage({ mobile }: FriendsPageProps) {
                 <p className="text-txt-tertiary text-sm">No friends yet — add someone!</p>
               </div>
             ) : (
-              <div className="divide-y divide-interactive-muted">
+              <div className="divide-y divide-interactive-muted border-t border-interactive-muted">
                 {friends.map(friend => (
                   <FriendItem key={`${friend.id}:${friend._instanceOrigin}`} friend={friend} onRemove={() => setPendingUnfriend({ id: friend.id, name: friend.displayName ?? parseFederatedUsername(friend.username).baseName })} onDm={() => handleOpenDm(friend.id, friend.homeUserId ?? undefined, friend.homeInstance)} />
                 ))}
@@ -140,7 +140,7 @@ export function FriendsPage({ mobile }: FriendsPageProps) {
                 <p className="text-txt-tertiary text-sm">No pending requests — Nori is napping.</p>
               </div>
             ) : (
-              <div className="divide-y divide-interactive-muted">
+              <div className="divide-y divide-interactive-muted border-t border-interactive-muted">
                 {pendingIncoming.map(req => (
                   <RequestItem
                     key={`${req.id}:${req._instanceOrigin}`}
@@ -911,8 +911,9 @@ function FriendItem({ friend, onRemove, onDm }: { friend: TaggedFriend, onRemove
   const { baseName: friendBaseName } = parseFederatedUsername(friend.username);
   const friendDisplayName = friend.displayName ?? friendBaseName;
   return (
-    <div className="flex items-center justify-between px-3 h-[62px] rounded-[8px] hover:bg-interactive-hover group transition-colors mx-2">
+    <div className="px-2">
-      <div className="flex items-center gap-3">
+      <div className="flex items-center justify-between px-1 h-[62px] rounded-[8px] hover:bg-interactive-hover group transition-colors">
+        <div className="flex items-center gap-3 pl-2">
           <Avatar src={friend.avatar} name={friendDisplayName} size={32} status={friend.status} userId={friend.homeUserId ?? friend.id} avatarColor={friend.avatarColor} />
           <div className="flex flex-col leading-tight">
             <div className="flex items-center gap-1.5">
@@ -948,6 +949,7 @@ function FriendItem({ friend, onRemove, onDm }: { friend: TaggedFriend, onRemove
           </button>
         </div>
       </div>
+    </div>
   );
 }
 
@@ -965,8 +967,9 @@ function RequestItem({ request, type, onAccept, onDecline, onCancel }: {
   const reqDisplayName = user.displayName ?? reqBaseName;
 
   return (
-    <div className="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-interactive-hover group transition-colors mx-2">
+    <div className="px-2">
-      <div className="flex items-center gap-3">
+      <div className="flex items-center justify-between px-1 py-2.5 rounded-lg hover:bg-interactive-hover group transition-colors">
+        <div className="flex items-center gap-3 pl-2">
           <Avatar src={user.avatar} name={reqDisplayName} size={32} status={user.status as any} userId={user.homeUserId ?? user.id} avatarColor={user.avatarColor} />
         <div className="flex flex-col">
           <div className="flex items-center gap-1.5">
@@ -1016,5 +1019,6 @@ function RequestItem({ request, type, onAccept, onDecline, onCancel }: {
         )}
         </div>
       </div>
+    </div>
   );
 }

packages/web/src/components/layout/ChannelSidebar.tsx

@@ -472,7 +472,7 @@ export function ChannelSidebar() {
           </div>
 
           <div className="mt-[18px] px-2 mb-1 flex items-center justify-between group">
-            <span className="text-[12px] font-bold text-txt-tertiary uppercase tracking-wider">Direct Messages</span>
+            <span className="text-[12px] font-bold text-txt-tertiary tracking-wider">Direct Messages</span>
             <button
               onClick={() => openModal('newDm')}
               className="text-txt-tertiary hover:text-txt-primary transition-colors"