From 8d31644f80503e04ddf2ab651e853b18d58f383a Mon Sep 17 00:00:00 2001
From: sp mac bookpro 2605 <spmacbookpro2605@spdeMacBook-Pro.local>
Date: Mon, 1 Jun 2026 15:27:38 +0800
Subject: [PATCH] fix: avatar grid layout to 6 columns per row

---
 src/pages/AgentEditor/components/AvatarSelector.tsx | 8 ++++----
 src/pages/AgentEditor/components/InitModal.tsx      | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/AgentEditor/components/AvatarSelector.tsx b/src/pages/AgentEditor/components/AvatarSelector.tsx
index 2cc384f..1e1a7bf 100644
--- a/src/pages/AgentEditor/components/AvatarSelector.tsx
+++ b/src/pages/AgentEditor/components/AvatarSelector.tsx
@@ -21,7 +21,7 @@ export default function AvatarSelector({
   onAvatarChange,
 }: AvatarSelectorProps) {
   return (
-    <Modal title="选择头像形象" open={open} onCancel={onCancel} footer={null} width={520} centered>
+    <Modal title="选择头像形象" open={open} onCancel={onCancel} footer={null} width={600} centered>
       <div className="py-4">
         <div className="flex items-center justify-between gap-3 mb-4">
           <div className="text-[11px] font-bold text-gray-400 uppercase tracking-widest">
@@ -33,7 +33,7 @@ export default function AvatarSelector({
             </Button>
           </Upload>
         </div>
-        <div className="grid grid-cols-5 gap-4 bg-gray-50 p-4 rounded-2xl max-h-[400px] overflow-y-auto monica-scrollbar">
+        <div className="bg-gray-50 p-4 rounded-2xl max-h-[400px] overflow-y-auto monica-scrollbar" style={{ width: '100%', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '12px' }}>
           {[DEFAULT_AVATAR, ...PRESET_AVATARS].map((url) => (
             <div
               key={url}
@@ -43,8 +43,8 @@ export default function AvatarSelector({
                 onCancel();
                 await onAvatarChange();
               }}
-              className={`relative rounded-full cursor-pointer transition-all duration-300 overflow-hidden border-2 flex-shrink-0 ${agent?.avatar === url ? 'scale-110 shadow-lg z-10' : 'border-transparent opacity-70 hover:opacity-100 hover:scale-105'}`}
-              style={{ width: 80, height: 80, borderColor: agent?.avatar === url ? 'var(--color-brand)' : 'transparent' }}
+              className={`relative rounded-full cursor-pointer transition-all duration-300 overflow-hidden border-2 mx-auto ${agent?.avatar === url ? 'scale-110 shadow-lg z-10' : 'border-transparent opacity-70 hover:opacity-100 hover:scale-105'}`}
+              style={{ width: 80, height: 80, minWidth: 80, borderColor: agent?.avatar === url ? 'var(--color-brand)' : 'transparent' }}
             >
               <img src={url} className="w-full h-full object-cover" alt="preset" />
               {agent?.avatar === url && (
diff --git a/src/pages/AgentEditor/components/InitModal.tsx b/src/pages/AgentEditor/components/InitModal.tsx
index 5d1c99e..ec3e2b8 100644
--- a/src/pages/AgentEditor/components/InitModal.tsx
+++ b/src/pages/AgentEditor/components/InitModal.tsx
@@ -202,13 +202,13 @@ export default function InitModal({
               </Button>
             </Upload>
           </div>
-          <div className="grid grid-cols-6 gap-3 agent-editor-avatar-grid monica-scrollbar">
+          <div className="agent-editor-avatar-grid monica-scrollbar" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '12px' }}>
             {[DEFAULT_AVATAR, ...PRESET_AVATARS].map((url) => (
               <div
                 key={url}
                 onClick={() => setSelectedAvatar(url)}
-                className={`relative rounded-full cursor-pointer transition-all duration-300 overflow-hidden border-2 flex-shrink-0 ${selectedAvatar === url ? 'scale-110 shadow-lg z-10' : 'border-transparent opacity-70 hover:opacity-100 hover:scale-105'}`}
-                style={{ width: 80, height: 80, borderColor: selectedAvatar === url ? 'var(--color-brand)' : 'transparent' }}
+                className={`relative rounded-full cursor-pointer transition-all duration-300 overflow-hidden border-2 mx-auto ${selectedAvatar === url ? 'scale-110 shadow-lg z-10' : 'border-transparent opacity-70 hover:opacity-100 hover:scale-105'}`}
+                style={{ width: 80, height: 80, minWidth: 80, borderColor: selectedAvatar === url ? 'var(--color-brand)' : 'transparent' }}
               >
                 <img src={url} className="w-full h-full object-cover" alt="preset" />
                 {selectedAvatar === url && (