style: 邮件详情

src/views/Conversations/Online/Components/EmailDetail.jsx

@@ -120,7 +120,7 @@ const EmailDetail = ({ open, setOpen, emailMsg={}, ...props }) => {
     }
 
     return (
-      <div className={`flex items-center w-full ${className || ''}`}>
+      <div className={`flex justify-end items-center w-full ${className || ''}`}>
         {btns}
       </div>
     )
@@ -140,22 +140,22 @@ const EmailDetail = ({ open, setOpen, emailMsg={}, ...props }) => {
         initial={{ top: 74 }}
         onMove={onHandleMove}
         onResize={onHandleResize}
-        footer={<ActionBtns className='w-full' />}>
+        footer={<ActionBtns className='w-full !justify-start' />}>
         <div className='email-container flex flex-col gap-2 *:p-2 *:rounded-sm *:border-b *:border-gray-200 *:shadow-1md'>
           <div className=' font-bold'>{mailData.info?.MAI_Subject || emailMsg?.msgOrigin?.subject}</div>
 
           <div>
-            <div className={['flex justify-between', window.innerWidth < 600 ? 'flex-row' : 'flex-row'].join(' ')}>
-              <div className='flex gap-2 mb-2 items-center'>
+            <div className={['flex flex-wrap justify-end', window.innerWidth < 600 ? 'flex-col' : 'flex-row '].join(' ')}>
+              <div className=' grow shrink basis-0 flex flex-wrap gap-2 mb-2 items-center'>
                 <Avatar className='' style={TagColorStyle(mailData.info?.MAI_From, true)}>
                   {(mailData.info?.MAI_From || '').substring(0, 1)}
                 </Avatar>
-                <div className=' flex flex-col'>
-                  <span className=' font-bold text-base'>{mailData.info?.fromName}</span>
-                  <span className='text-neutral-500'>{mailData.info?.MAI_From}</span>
+                <div className=' flex flex-col '>
+                  {/* <span className=' font-bold text-base'>{mailData.info?.fromName}</span> */}
+                  <span className='text-neutral-500 text-wrap break-words break-all '>{mailData.info?.MAI_From}</span>
                 </div>
               </div>
-              <div className='flex flex-col justify-start gap-1 items-end'>
+              <div className=' shrink-0 flex flex-col justify-start gap-1 items-end'>
                 <ActionBtns />
                 <div className='text-xs '>{mailData.info?.MAI_SendDate || emailMsg.localDate}</div>
               </div>