Improve comments display.

frontend/src/i18n.ts

@@ -202,6 +202,8 @@ export const i18nData = {
       "Optionally, you can specify a type for the new tags.":
         "Optionally, you can specify a type for the new tags.",
       "Upload Clipboard Image": "Upload Clipboard Image",
+      "Show more": "Show more",
+      "Show less": "Show less",
     },
   },
   "zh-CN": {
@@ -396,6 +398,8 @@ export const i18nData = {
       "Optionally, you can specify a type for the new tags.":
         "您可以选择为新标签指定一个类型。",
       "Upload Clipboard Image": "上传剪贴板图片",
+      "Show more": "显示更多",
+      "Show less": "显示更少",
     },
   },
   "zh-TW": {
@@ -590,6 +594,8 @@ export const i18nData = {
       "Optionally, you can specify a type for the new tags.":
         "您可以選擇為新標籤指定一個類型。",
       "Upload Clipboard Image": "上傳剪貼板圖片",
+      "Show more": "顯示更多",
+      "Show less": "顯示更少",
     },
   },
 };

frontend/src/pages/resource_details_page.tsx

@@ -23,7 +23,7 @@ import Markdown from "react-markdown";
 import "../markdown.css";
 import Loading from "../components/loading.tsx";
 import {
-  MdAdd,
+  MdAdd, MdArrowDownward, MdArrowUpward,
   MdOutlineArticle,
   MdOutlineComment,
   MdOutlineDataset,
@@ -360,11 +360,12 @@ function Article({ resource }: { resource: ResourceDetails }) {
                   ></div>
                 );
               }
-              // @ts-ignore
             } else if (
               typeof props.children === "object" &&
-              props.children.props &&
-              props.children.props.href
+              // @ts-ignore
+              props.children?.props &&
+              // @ts-ignore
+              props.children?.props.href
             ) {
               const a = props.children as ReactElement;
               const childProps = a.props as any;
@@ -1140,11 +1141,11 @@ function Comments({ resourceId }: { resourceId: number }) {
         maxPageCallback={setMaxPage}
         key={listKey}
       />
-      {maxPage && (
+      {maxPage ? (
         <div className={"w-full flex justify-center"}>
           <Pagination page={page} setPage={setPage} totalPages={maxPage} />
         </div>
-      )}
+      ) : null}
     </div>
   );
 }
@@ -1193,6 +1194,15 @@ function CommentsList({
 
 function CommentTile({ comment }: { comment: Comment }) {
   const navigate = useNavigate();
+  const [expanded, setExpanded] = useState(false);
+  const { t } = useTranslation();
+
+  const isLongComment = comment.content.length > 300;
+  const displayContent =
+    expanded || !isLongComment
+      ? comment.content
+      : comment.content.substring(0, 300) + "...";
+
   return (
     <div className={"card card-border border-base-300 p-2 my-3"}>
       <div className={"flex flex-row items-center my-1 mx-1"}>
@@ -1216,7 +1226,21 @@ function CommentTile({ comment }: { comment: Comment }) {
           {new Date(comment.created_at).toLocaleString()}
         </div>
       </div>
-      <div className={"text-sm p-2"}>{comment.content}</div>
+      <div className={"text-sm p-2 whitespace-pre-wrap"}>
+        {displayContent}
+        {isLongComment && (
+          <div className={"flex items-center justify-center"}>
+            <button
+              onClick={() => setExpanded(!expanded)}
+              className="mt-2 text-primary text-sm cursor-pointer flex items-center"
+            >
+              {expanded ? <MdArrowUpward /> : <MdArrowDownward />}
+              <span className={"w-1"}></span>
+              {expanded ? t("Show less") : t("Show more")}
+            </button>
+          </div>
+        )}
+      </div>
     </div>
   );
 }

frontend/src/pages/user_page.tsx

@@ -73,7 +73,7 @@ function UserCard({ user }: { user: User }) {
     <div className={"flex m-4 items-center"}>
       <div className={"avatar py-2"}>
         <div className="w-24 rounded-full ring-2 ring-offset-2 ring-primary ring-offset-base-100">
-          <img src={network.getUserAvatar(user)} />
+          <img alt={"avatar"} src={network.getUserAvatar(user)} />
         </div>
       </div>
       <div className="w-6"></div>
@@ -175,6 +175,13 @@ function CommentsList({
   );
 }
 
+function limitArticleLength(content: string, maxLength: number): string {
+  if (content.length <= maxLength) {
+    return content;
+  }
+  return content.slice(0, maxLength) + "...";
+}
+
 function CommentTile({ comment }: { comment: CommentWithResource }) {
   const navigate = useNavigate();
 
@@ -193,7 +200,9 @@ function CommentTile({ comment }: { comment: CommentWithResource }) {
           {new Date(comment.created_at).toLocaleString()}
         </div>
       </div>
-      <div className={"p-2"}>{comment.content}</div>
+      <div className={"p-2 whitespace-pre-wrap text-sm"}>
+        {limitArticleLength(comment.content, 200)}
+      </div>
       <a
         className="text-sm text-base-content/80 p-1 hover:text-primary cursor-pointer transition-all"
         onClick={() => {