[WEB-5520] fix: comments UI in space app #8189

apps/space/core/components/editor/lite-text-editor.tsx

@@ -79,21 +79,23 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
         // overriding the containerClassName to add relative class passed
         containerClassName={cn(containerClassName, "relative")}
       />
-      <IssueCommentToolbar
-        executeCommand={(item) => {
-          // TODO: update this while toolbar homogenization
-          // @ts-expect-error type mismatch here
-          editorRef?.executeMenuItemCommand({
-            itemKey: item.itemKey,
-            ...item.extraProps,
-          });
-        }}
-        isSubmitting={isSubmitting}
-        showSubmitButton={showSubmitButton}
-        handleSubmit={(e) => rest.onEnterKeyPress?.(e)}
-        isCommentEmpty={isEmpty}
-        editorRef={editorRef}
-      />
+      {editable && (
+        <IssueCommentToolbar
+          executeCommand={(item) => {
+            // TODO: update this while toolbar homogenization
+            // @ts-expect-error type mismatch here
+            editorRef?.executeMenuItemCommand({
+              itemKey: item.itemKey,
+              ...item.extraProps,
+            });
+          }}
+          isSubmitting={isSubmitting}
+          showSubmitButton={showSubmitButton}
+          handleSubmit={(e) => rest.onEnterKeyPress?.(e)}
+          isCommentEmpty={isEmpty}
+          editorRef={editorRef}
+        />
+      )}
     </div>
   );
 });

apps/space/core/components/issues/peek-overview/comment/add-comment.tsx

@@ -96,6 +96,9 @@ export const AddComment = observer(function AddComment(props: Props) {
                 setUploadAssetIds((prev) => [...prev, asset_id]);
                 return asset_id;
               }}
+              displayConfig={{
+                fontSize: "small-font",
+              }}
             />
           )}
         />

apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx

@@ -42,7 +42,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
     control,
     formState: { isSubmitting },
     handleSubmit,
-  } = useForm<any>({
+  } = useForm<TIssuePublicComment>({
     defaultValues: { comment_html: comment.comment_html },
   });
 
@@ -120,6 +120,9 @@ export const CommentCard = observer(function CommentCard(props: Props) {
                       const { asset_id } = await uploadCommentAsset(file, anchor, comment.id);
                       return asset_id;
                     }}
+                    displayConfig={{
+                      fontSize: "small-font",
+                    }}
                   />
                 )}
               />

apps/web/ce/components/comments/comment-block.tsx

@@ -1,10 +1,9 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode } from "react";
 import { useRef } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import type { TIssueComment } from "@plane/types";
-import { EIssueCommentAccessSpecifier } from "@plane/types";
 import { Avatar, Tooltip } from "@plane/ui";
 import { calculateTimeAgo, cn, getFileURL, renderFormattedDate, renderFormattedTime } from "@plane/utils";
 // hooks
@@ -56,9 +55,7 @@ export const CommentBlock = observer(function CommentBlock(props: TCommentBlock)
         <div className="flex w-full gap-2">
           <div className="flex-1 flex flex-wrap items-center gap-1">
             <div className="flex items-center gap-1">
-              <span className="text-xs font-medium">
-                {`${displayName}${comment.access === EIssueCommentAccessSpecifier.EXTERNAL ? " (External User)" : ""}`}
-              </span>
+              <span className="text-xs font-medium">{displayName}</span>
             </div>
             <div className="text-xs text-custom-text-300">
               commented{" "}