From ef23526bf794afa84fc576543c021c1d4ada7503 Mon Sep 17 00:00:00 2001
From: duckietm <troop@mailtjes.com>
Date: Tue, 2 Jun 2026 10:25:33 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=86=99=20Fix=20avatar=20in=20friends=20an?=
 =?UTF-8?q?d=20profile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/friends/FriendsView.css          | 32 ++++++------------------
 src/css/user-profile/UserProfileView.css | 22 +++++-----------
 2 files changed, 13 insertions(+), 41 deletions(-)

diff --git a/src/css/friends/FriendsView.css b/src/css/friends/FriendsView.css
index 3786920..33a625d 100644
--- a/src/css/friends/FriendsView.css
+++ b/src/css/friends/FriendsView.css
@@ -1,4 +1,3 @@
-/* ── Friends spritesheet icons ── */
 .nitro-friends-spritesheet {
     background: url('@/assets/images/friends/friends-spritesheet.png') transparent no-repeat;
 
@@ -176,9 +175,6 @@
         border: 0 !important;
     }
 
-    /* The header title is rendered by the shared <Text> component, which is a
-       <div> (not a <span>) — so target the div too, otherwise it keeps the app
-       default size and shows as oversized "testoni". */
     & .nitro-card-accordion-set-header span,
     & .nitro-card-accordion-set-header > div {
         font-size: 12px !important;
@@ -807,20 +803,9 @@
     }
 }
 
-/* ------------------------------------------------------------------ *
- * Flat (non-nested) overrides. The rules above live inside a nested
- * `.nitro-friends { & ... }` block; these are written flat so they
- * apply reliably and win by source order. They fix two things the
- * nested rules didn't: the oversized/overflowing friend-list heads and
- * the oversized accordion section titles ("testoni").
- * ------------------------------------------------------------------ */
-
-/* Friend-list avatar: clip a small box and centre the head, same proven
-   recipe as the messenger head. `inset: auto` cancels the component's
-   `inset-0`, otherwise the 130px head fills the row and overflows. */
 .nitro-friends .friends-list-avatar {
     position: relative !important;
-    width: 34px;
+    width: 32px;
     height: 36px;
     flex-shrink: 0;
     overflow: hidden;
@@ -828,18 +813,15 @@
 
 .nitro-friends .friends-list-avatar .avatar-image {
     position: absolute !important;
-    inset: auto !important;
-    left: 50% !important;
-    top: 56% !important;
-    width: 54px !important;
-    height: 54px !important;
+    inset: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
     margin: 0 !important;
-    background-position: center center !important;
-    transform: translate(-50%, -50%) scale(.95) !important;
+    background-size: 66px auto !important;
+    background-position: -16px -21px !important;
+    transform: none !important;
 }
 
-/* Accordion section titles are rendered by <Text> (a <div>, not a <span>),
-   so size the div too — otherwise they show oversized. */
 .nitro-friends .nitro-card-accordion-set-header > div,
 .nitro-friends .nitro-card-accordion-set-header span {
     font-size: 12px !important;
diff --git a/src/css/user-profile/UserProfileView.css b/src/css/user-profile/UserProfileView.css
index 66bbec6..30463a4 100644
--- a/src/css/user-profile/UserProfileView.css
+++ b/src/css/user-profile/UserProfileView.css
@@ -46,11 +46,6 @@
   gap: 10px;
 }
 
-/* Mirror the room infostand exactly: a 68x135 flex column (= profile-background)
-   that centres the avatar horizontally and clips it; the stand/overlay sit on
-   top as absolute layers. The avatar keeps its component default classes
-   (relative w-[90px] h-[130px] left-[-2px]) so it lines up with bg + stand and
-   isn't crooked. Do NOT absolutely position or force width/height on it. */
 .nitro-extended-profile__avatar-shell {
   width: 68px;
   height: 135px;
@@ -255,20 +250,15 @@
   transform: translateY(-50%);
   overflow: hidden;
 }
-
-/* Same proven recipe as the messenger head: clip a small box and centre a
-   54x54 avatar in it. `inset: auto` cancels the component's `inset-0` so the
-   width/position take effect (otherwise the head overflows huge). */
 .nitro-extended-profile__relationship-head .avatar-image {
   position: absolute !important;
-  inset: auto !important;
-  left: 50% !important;
-  top: 54% !important;
-  width: 50px !important;
-  height: 50px !important;
+  inset: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
   margin: 0 !important;
-  background-position: center center !important;
-  transform: translate(-50%, -50%) scale(.95) !important;
+  background-size: 60px auto !important;
+  background-position: -14px -21px !important;
+  transform: none !important;
 }
 
 .nitro-extended-profile__relationship-subcopy {