chore: update memo detail styles

web/src/components/Memo.tsx

@@ -311,7 +311,7 @@ const Memo: React.FC<Props> = (props: Props) => {
                   </>
                 )}
                 <Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
-                <Link className="flex flex-row justify-start items-center" to={`/m/${memo.id}#comments`}>
+                <Link className="flex flex-row justify-start items-center" to={`/m/${memo.id}`}>
                   <Icon.MessageCircle className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
                   <span className="text-sm text-gray-500 dark:text-gray-400 ml-1">{commentRelations.length}</span>
                 </Link>

web/src/pages/MemoDetail.tsx

-import { Select, Tooltip, Option, IconButton, Divider } from "@mui/joy";
+import { Select, Tooltip, Option, IconButton } from "@mui/joy";
 import copy from "copy-to-clipboard";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
@@ -108,8 +108,8 @@ const MemoDetail = () => {
 
   return (
     <>
-      <section className="relative top-0 w-full min-h-full overflow-x-hidden bg-zinc-100 dark:bg-zinc-800">
-        <div className="relative w-full h-auto mx-auto flex flex-col justify-start items-center bg-white dark:bg-zinc-900">
+      <section className="relative top-0 w-full min-h-full overflow-x-hidden bg-zinc-100 dark:bg-zinc-900">
+        <div className="relative w-full h-auto mx-auto flex flex-col justify-start items-center bg-white dark:bg-zinc-800">
           <div className="w-full flex flex-col justify-start items-center py-8">
             <UserAvatar className="!w-20 h-auto mb-2 drop-shadow" avatarUrl={systemStatus.customizedProfile.logoUrl} />
             <p className="text-3xl text-black opacity-80 dark:text-gray-200">{systemStatus.customizedProfile.name}</p>
@@ -186,16 +186,16 @@ const MemoDetail = () => {
         <div className="py-6 w-full border-t dark:border-t-zinc-700">
           <div className="relative mx-auto flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 gap-y-1">
             {comments.length === 0 ? (
-              <div className="w-full flex flex-col justify-center items-center py-6">
+              <div className="w-full flex flex-col justify-center items-center py-6 mb-2">
                 <Icon.MessageCircle strokeWidth={1} className="w-8 h-auto text-gray-400" />
                 <p className="text-gray-400 italic text-sm">No comments</p>
               </div>
             ) : (
               <>
-                <div className="w-full flex flex-row justify-start items-center mb-2">
-                  <Icon.MessageCircle strokeWidth={1} className="w-5 h-auto text-gray-400 mr-1" />
+                <div className="w-full flex flex-row justify-start items-center pl-3 mb-3">
+                  <Icon.MessageCircle className="w-5 h-auto text-gray-400 mr-1" />
                   <span className="text-gray-400 text-sm">Comments</span>
-                  <span className="text-gray-400 text-sm">({comments.length})</span>
+                  <span className="text-gray-400 text-sm ml-0.5">({comments.length})</span>
                 </div>
                 {comments.map((comment) => (
                   <Memo key={comment.id} memo={comment} />
@@ -205,15 +205,12 @@ const MemoDetail = () => {
 
             {/* Only show comment editor when user login */}
             {currentUser && (
-              <>
-                {comments.length === 0 && <Divider className="!my-4" />}
-                <MemoEditor
-                  key={memo.id}
-                  className="border-none"
-                  relationList={[{ memoId: UNKNOWN_ID, relatedMemoId: memo.id, type: "COMMENT" }]}
-                  onConfirm={() => fetchMemoComments()}
-                />
-              </>
+              <MemoEditor
+                key={memo.id}
+                className="!border"
+                relationList={[{ memoId: UNKNOWN_ID, relatedMemoId: memo.id, type: "COMMENT" }]}
+                onConfirm={() => fetchMemoComments()}
+              />
             )}
           </div>
         </div>