From 1722c883f3030b2a02c3758483fe1de6f8a04149 Mon Sep 17 00:00:00 2001
From: hjlarry <hjlarry@163.com>
Date: Sun, 12 Apr 2026 17:56:53 +0800
Subject: [PATCH] fix(web): adjust app card online avatars layout and counter
 alignment

---
 web/app/components/apps/app-card.tsx          | 50 +++++++++----------
 .../base/user-avatar-list/index.tsx           | 21 ++++----
 2 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index a62abf9ebe..3404fbe95c 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -406,33 +406,33 @@ const AppCard = ({ app, onlineUsers = [], onRefresh }: AppCardProps) => {
               <div>·</div>
               <div className="truncate" title={EditTimeText}>{EditTimeText}</div>
             </div>
-            {onlinePresenceUsers.length > 0 && (
-              <div className="mt-1">
-                <UserAvatarList users={onlinePresenceUsers} size="xxs" maxVisible={4} />
-              </div>
-            )}
           </div>
-          <div className="flex h-5 w-5 shrink-0 items-center justify-center">
-            {app.access_mode === AccessMode.PUBLIC && (
-              <Tooltip asChild={false} popupContent={t('accessItemsDescription.anyone', { ns: 'app' })}>
-                <RiGlobalLine className="h-4 w-4 text-text-quaternary" />
-              </Tooltip>
-            )}
-            {app.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && (
-              <Tooltip asChild={false} popupContent={t('accessItemsDescription.specific', { ns: 'app' })}>
-                <RiLockLine className="h-4 w-4 text-text-quaternary" />
-              </Tooltip>
-            )}
-            {app.access_mode === AccessMode.ORGANIZATION && (
-              <Tooltip asChild={false} popupContent={t('accessItemsDescription.organization', { ns: 'app' })}>
-                <RiBuildingLine className="h-4 w-4 text-text-quaternary" />
-              </Tooltip>
-            )}
-            {app.access_mode === AccessMode.EXTERNAL_MEMBERS && (
-              <Tooltip asChild={false} popupContent={t('accessItemsDescription.external', { ns: 'app' })}>
-                <RiVerifiedBadgeLine className="h-4 w-4 text-text-quaternary" />
-              </Tooltip>
+          <div className="flex h-full shrink-0 flex-col items-end justify-between py-px">
+            {onlinePresenceUsers.length > 0 && (
+              <UserAvatarList users={onlinePresenceUsers} size="xxs" maxVisible={3} className="justify-end" />
             )}
+            <div className="flex h-5 w-5 items-center justify-center">
+              {app.access_mode === AccessMode.PUBLIC && (
+                <Tooltip asChild={false} popupContent={t('accessItemsDescription.anyone', { ns: 'app' })}>
+                  <RiGlobalLine className="h-4 w-4 text-text-quaternary" />
+                </Tooltip>
+              )}
+              {app.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && (
+                <Tooltip asChild={false} popupContent={t('accessItemsDescription.specific', { ns: 'app' })}>
+                  <RiLockLine className="h-4 w-4 text-text-quaternary" />
+                </Tooltip>
+              )}
+              {app.access_mode === AccessMode.ORGANIZATION && (
+                <Tooltip asChild={false} popupContent={t('accessItemsDescription.organization', { ns: 'app' })}>
+                  <RiBuildingLine className="h-4 w-4 text-text-quaternary" />
+                </Tooltip>
+              )}
+              {app.access_mode === AccessMode.EXTERNAL_MEMBERS && (
+                <Tooltip asChild={false} popupContent={t('accessItemsDescription.external', { ns: 'app' })}>
+                  <RiVerifiedBadgeLine className="h-4 w-4 text-text-quaternary" />
+                </Tooltip>
+              )}
+            </div>
           </div>
         </div>
         <div className="title-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary">
diff --git a/web/app/components/base/user-avatar-list/index.tsx b/web/app/components/base/user-avatar-list/index.tsx
index 7fab07c21e..9ee2b571d5 100644
--- a/web/app/components/base/user-avatar-list/index.tsx
+++ b/web/app/components/base/user-avatar-list/index.tsx
@@ -72,16 +72,17 @@ export const UserAvatarList: FC<UserAvatarListProps> = memo(({
 
       )}
       {shouldShowCount && remainingCount > 0 && (
-        <div
-          className="flex items-center justify-center rounded-full bg-gray-500 text-[10px] leading-none text-white ring-2 ring-components-panel-bg"
-          style={{
-            zIndex: 0,
-            width: avatarSizeToPx[size],
-            height: avatarSizeToPx[size],
-          }}
-        >
-          +
-          {remainingCount}
+        <div className="relative shrink-0" style={{ zIndex: 0 }}>
+          <div
+            className="inline-flex items-center justify-center rounded-full bg-gray-500 text-[10px] leading-none text-white ring-2 ring-components-panel-bg"
+            style={{
+              width: avatarSizeToPx[size],
+              height: avatarSizeToPx[size],
+            }}
+          >
+            +
+            {remainingCount}
+          </div>
         </div>
       )}
     </div>