From 24a090850fc0eff2cb7d1de6b5ec8a89ff8ae5a4 Mon Sep 17 00:00:00 2001
From: lizerk <lizerk-dev@gmail.com>
Date: Mon, 13 Apr 2026 16:07:53 +0300
Subject: [PATCH] fix(frontend): remove nested avatar fallback shells

---
 frontend/src/app/employees/page.tsx                    | 8 ++++----
 frontend/src/app/profile/page.tsx                      | 8 ++++----
 frontend/src/app/users/[id]/page.tsx                   | 8 ++++----
 frontend/src/components/users/EditUserProfileModal.tsx | 8 ++++----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/employees/page.tsx b/frontend/src/app/employees/page.tsx
index 7cedb04d..425fb339 100644
--- a/frontend/src/app/employees/page.tsx
+++ b/frontend/src/app/employees/page.tsx
@@ -188,7 +188,9 @@ export default function EmployeesPage() {
                   href={`/users/${employee.id}`}
                   className="flex min-w-0 flex-1 items-center gap-4"
                 >
-                  <div className="app-avatar-frame flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-full">
+                  <div
+                    className={`${employee.avatar ? "app-avatar-frame" : "app-avatar-fallback"} flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-full text-sm font-semibold`}
+                  >
                     {employee.avatar ? (
                       <Image
                         src={resolveMediaUrl(employee.avatar)}
@@ -199,9 +201,7 @@ export default function EmployeesPage() {
                         unoptimized
                       />
                     ) : (
-                      <span className="app-avatar-fallback flex h-full w-full items-center justify-center text-sm font-semibold">
-                        {initials}
-                      </span>
+                      initials
                     )}
                   </div>
                   <div className="min-w-0 flex-1">
diff --git a/frontend/src/app/profile/page.tsx b/frontend/src/app/profile/page.tsx
index 30629b3b..bffaa420 100644
--- a/frontend/src/app/profile/page.tsx
+++ b/frontend/src/app/profile/page.tsx
@@ -122,7 +122,9 @@ export default function ProfilePage() {
             ) : null
           }
           avatar={
-            <div className="app-avatar-frame h-20 w-20 shrink-0 overflow-hidden rounded-full">
+            <div
+              className={`${user.avatar ? "app-avatar-frame" : "app-avatar-fallback"} flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-full text-2xl font-semibold`}
+            >
               {user.avatar ? (
                 <Image
                   src={resolveMediaUrl(user.avatar)}
@@ -133,9 +135,7 @@ export default function ProfilePage() {
                   unoptimized
                 />
               ) : (
-                <div className="app-avatar-fallback flex h-full w-full items-center justify-center text-2xl font-semibold">
-                  {initials(user.first_name, user.last_name)}
-                </div>
+                initials(user.first_name, user.last_name)
               )}
             </div>
           }
diff --git a/frontend/src/app/users/[id]/page.tsx b/frontend/src/app/users/[id]/page.tsx
index 5f0e539a..2e04a340 100644
--- a/frontend/src/app/users/[id]/page.tsx
+++ b/frontend/src/app/users/[id]/page.tsx
@@ -318,7 +318,9 @@ export default function UserDetailPage() {
                 ) : null
               }
               avatar={
-                <div className="h-20 w-20 shrink-0 overflow-hidden rounded-full app-avatar-frame">
+                <div
+                  className={`flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-full text-2xl font-semibold ${avatarUrl && !avatarFailed ? "app-avatar-frame" : "app-avatar-fallback"}`}
+                >
                   {avatarUrl && !avatarFailed ? (
                     <Image
                       src={avatarUrl}
@@ -330,9 +332,7 @@ export default function UserDetailPage() {
                       unoptimized
                     />
                   ) : (
-                    <div className="app-avatar-fallback flex h-full w-full items-center justify-center text-2xl font-semibold">
-                      {initials}
-                    </div>
+                    initials
                   )}
                 </div>
               }
diff --git a/frontend/src/components/users/EditUserProfileModal.tsx b/frontend/src/components/users/EditUserProfileModal.tsx
index bc9c1e2a..16ab0d1a 100644
--- a/frontend/src/components/users/EditUserProfileModal.tsx
+++ b/frontend/src/components/users/EditUserProfileModal.tsx
@@ -116,7 +116,9 @@ export default function EditUserProfileModal({
         <div className="space-y-4">
           <section className="app-surface-muted rounded-xl p-4">
             <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
-              <div className="app-avatar-frame flex h-20 w-20 items-center justify-center overflow-hidden rounded-full shrink-0">
+              <div
+                className={`flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-full text-xl font-semibold ${form.avatarPreview || (avatarUrl && !avatarFailed) ? "app-avatar-frame" : "app-avatar-fallback"}`}
+              >
                 {form.avatarPreview ? (
                   <Image
                     src={form.avatarPreview}
@@ -136,9 +138,7 @@ export default function EditUserProfileModal({
                     unoptimized
                   />
                 ) : (
-                  <span className="app-avatar-fallback flex h-full w-full items-center justify-center text-xl font-semibold">
-                    {initials}
-                  </span>
+                  initials
                 )}
               </div>