chore: update style

Author: pacexy

src/App.css

@@ -69,23 +69,20 @@
 }
 
 #comment-search-root .comment-item-avatar {
-  width: 40px;
-  height: 40px;
   border-radius: 50%;
   background-color: var(--Ga1);
   margin-right: 10px;
 }
 
 #comment-search-root .comment-item-content {
-  display: flex;
-  flex-direction: column;
 }
 
 #comment-search-root .comment-item-username {
   font-size: 12px;
   font-weight: bold;
   margin-bottom: 4px;
   color: #61666d;
+  margin-right: 12px;
 }
 
 #comment-search-root .comment-item-message {

src/App.tsx

@@ -50,22 +50,38 @@ export default function App() {
 
 interface CommentProps {
   comments?: Reply[]
+  sub?: boolean
 }
-const CommentTree: React.FC<CommentProps> = ({ comments }) => {
+const CommentTree: React.FC<CommentProps> = ({ comments, sub = false }) => {
   if (!comments) return null
   return (
     <ul>
       {comments?.map((comment) => (
         <li key={comment.rpid} className='comment-item'>
-          <img src={comment.member.avatar} className='comment-item-avatar' />
-          <div className='comment-item-content'>
+          <img
+            src={comment.member.avatar}
+            className='comment-item-avatar'
+            style={{
+              width: sub ? '30px' : '40px',
+              height: sub ? '30px' : '40px',
+            }}
+          />
+          <div
+            className='comment-item-content'
+            style={{
+              ...(!sub && {
+                display: 'flex',
+                flexDirection: 'column',
+              }),
+            }}
+          >
             <span className='comment-item-username'>
               {comment.member.uname}
             </span>
             <span className='comment-item-message'>
               {comment.content.message}
             </span>
-            <CommentTree comments={comment.replies} />
+            <CommentTree comments={comment.replies} sub />
           </div>
         </li>
       ))}