Fix code (codesandbox#3792)

* overflow pre

* make code 13pc

* use existing action

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Code.tsx

@@ -24,7 +24,14 @@ export const Code = withTheme(({ value, language, theme }) => (
           className={className}
           style={style}
           css={css({
+            fontSize: 3,
             whiteSpace: 'pre-wrap',
+            maxHeight: 400,
+            overflow: 'scroll',
+
+            '*': {
+              wordBreak: 'break-all',
+            },
           })}
         >
           {tokens.map((line, i) => (

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Reply.tsx

@@ -28,11 +28,11 @@ export const Reply = ({ reply }: ReplyProps) => {
                 <Menu.IconButton name="more" title="Reply actions" size={12} />
                 <Menu.List>
                   <Menu.Item
-                    onSelect={() =>
+                    onSelect={() => {
                       actions.comments.deleteComment({
                         commentId: id,
-                      })
-                    }
+                      });
+                    }}
                   >
                     Delete
                   </Menu.Item>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx

@@ -302,11 +302,12 @@ const CommentBody = ({ comment, editing, setEditing }) => {
                   Edit Comment
                 </Menu.Item>
                 <Menu.Item
-                  onSelect={() =>
+                  onSelect={() => {
+                    actions.comments.closeComment();
                     actions.comments.deleteComment({
                       commentId: comment.id,
-                    })
-                  }
+                    });
+                  }}
                 >
                   Delete
                 </Menu.Item>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/AvatarBlock.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Link, Stack, Text } from '@codesandbox/components';
+import { Avatar, Stack, Text } from '@codesandbox/components';
 import { CommentFragment } from 'app/graphql/types';
 import { formatDistance } from 'date-fns';
 import { zonedTimeToUtc } from 'date-fns-tz';
@@ -10,14 +10,9 @@ export const AvatarBlock: React.FC<{ comment: CommentFragment }> = ({
   <Stack gap={2} align="center">
     <Avatar user={comment.user} />
     <Stack direction="vertical" justify="center" gap={1}>
-      <Link
-        size={3}
-        weight="bold"
-        href={`/u/${comment.user.username}`}
-        variant="body"
-      >
+      <Text size={3} weight="bold" variant="body">
         {comment.user.username}
-      </Link>
+      </Text>
       <Text size={2} variant="muted">
         {formatDistance(
           zonedTimeToUtc(comment.insertedAt, 'Etc/UTC'),