Fix: Fixed pending requests menu sizing

src/pages/friends/Friend.module.scss

@@ -1,5 +1,5 @@
 .list {
-    padding: 0 20px 20px 20px;
+    padding: 0 10px 10px 10px;
     user-select: none;
     overflow-y: scroll;
 
@@ -22,17 +22,23 @@
         summary {
             outline: none;
             list-style: none;
+            transition: .2s opacity;
 
             &::marker, &::-webkit-details-marker {
                 display: none;
             }
 
             svg {
+                flex-shrink: 0;
                 transition: .2s ease transform;
             }
         }
 
         &:not([open]) {
+            summary {
+                opacity: .7;
+            }
+            
             summary svg {
                 transform: rotateZ(-90deg);
             }
@@ -127,17 +133,23 @@
 }
 
 .pending {
-    gap: 12px;
     padding: 1em;
     display: flex;
     cursor: pointer;
     margin-top: 1em;
+    border-radius: 7px;
     align-items: center;
     flex-direction: row;
     background: var(--secondary-background);
 
+    svg {
+        flex-shrink: 0;
+    }
+
     .avatars {
         display: flex;
+        flex-shrink: 0;
+        margin-inline-end: 15px;
     }
 
     .details {
@@ -145,26 +157,53 @@
         display: flex;
         flex-direction: column;
 
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+
         > div {
-            font-size: 1.4em;
+            font-size: 16px;
             font-weight: 800;
+            display: flex;
+            gap: 6px;
+            align-items: center;
+            min-width: 0;
+
+            
+            .title {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
 
             span {
                 width: 1.5em;
                 height: 1.5em;
-                font-size: 0.8em;
+                font-size: 12px;
 
                 border-radius: 50%;
                 align-items: center;
                 display: inline-flex;
                 justify-content: center;
                 background: var(--error);
+                flex-shrink: 0;
+            }
+        }
+
+        .from {
+            .user {
+                font-weight: 600;
             }
         }
 
         > span {
-            font-weight: 600;
+            font-weight: 400;
+            font-size: 12px;
             color: var(--tertiary-foreground);
+
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
         }
     }
 }

src/pages/friends/Friend.tsx

@@ -94,7 +94,7 @@ export function Friend({ user }: Props) {
         <div className={styles.friend}
             onClick={() => openScreen({ id: 'profile', user_id: user._id })}
             onContextMenu={attachContextMenu('Menu', { user: user._id })}>
-            <UserIcon target={user} size={38} status />
+            <UserIcon target={user} size={36} status />
             <div className={styles.name}>
                 <span>@{user.username}</span>
                 {subtext && (

src/pages/friends/Friends.tsx

@@ -77,14 +77,14 @@ export default function Friends() {
                 { lists[0][1].length > 0 && <div className={styles.pending}
                     onClick={() => openScreen({ id: 'pending_requests', users: lists[0][1].map(x => x._id) })}>
                     <div className={styles.avatars}>
-                        { lists[0][1].map((x, i) => i < 3 && <UserIcon target={x} size={64} />) }
+                        { lists[0][1].map((x, i) => i < 3 && <UserIcon target={x} size={54} />) }
                     </div>
                     <div className={styles.details}>
                         {/* ! FIXME: i18n */}
-                        <div>Pending requests <span>{ lists[0][1].length }</span></div>
+                        <div className={styles.title}>Pending requests<span>{ lists[0][1].length }</span></div>
-                        <span>From { lists[0][1].map(x => x.username).join(', ') }</span>
+                        <span className={styles.from}>From <span className={styles.user}>{ lists[0][1].map(x => x.username).join(', ') }</span></span>
                     </div>
-                    <ChevronRight size={48} />
+                    <ChevronRight size={28} />
                 </div> }
 
                 {