Polish v1234 (codesandbox#3802)

* more polish

* add constants

* make style instead

Author: SaraVieira

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

@@ -43,6 +43,7 @@ export const AddComment: React.FC = () => {
             onKeyDown={submitOnEnter}
             placeholder="Write a comment"
             css={css({ minHeight: 8 })}
+            style={{ lineHeight: 1.2 }}
           />
         </FormField>
       </form>

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

@@ -394,9 +394,9 @@ const Replies = ({ replies, repliesRenderedCallback }) => {
     >
       {repliesLoaded ? (
         <>
-          {replies.map(reply => (
-            <Reply reply={reply} key={reply.id} />
-          ))}
+          {replies.map(
+            reply => reply && <Reply reply={reply} key={reply.id} />
+          )}
         </>
       ) : (
         <SkeletonReply />

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

@@ -18,9 +18,12 @@ export const MultiComment = ({ x, y, ids }: MultiCommentProps) => {
     actions,
   } = useOvermind();
 
+  const CARROT_LEFT_MARGIN = 25;
+  const BORDER_WIDTH = 10;
+
   const list = css({
     position: 'fixed',
-    left: x - 10,
+    left: x - CARROT_LEFT_MARGIN,
     top: y + 20,
     backgroundColor: 'sideBar.background',
     border: '1px solid',
@@ -35,30 +38,30 @@ export const MultiComment = ({ x, y, ids }: MultiCommentProps) => {
       content: "''",
       display: 'block',
       position: 'absolute',
-      left: '7px',
+      left: CARROT_LEFT_MARGIN - 1,
       width: 0,
       height: 0,
       borderStyle: 'solid',
-      top: '-11px',
+      top: `-${BORDER_WIDTH + 1}px`,
       borderColor: 'transparent',
       borderBottomColor: 'sideBar.border',
 
-      borderWidth: '11px',
+      borderWidth: `${BORDER_WIDTH + 1}px`,
       borderTopWidth: 0,
     },
 
     '&::after': {
       content: "''",
       display: 'block',
       position: 'absolute',
-      left: 2,
+      left: CARROT_LEFT_MARGIN,
       width: 0,
       height: 0,
       borderStyle: 'solid',
-      top: '-10px',
+      top: `-${BORDER_WIDTH}px`,
       borderColor: 'transparent',
       borderBottomColor: 'sideBar.background',
-      borderWidth: '10px',
+      borderWidth: `${BORDER_WIDTH}px`,
       borderTopWidth: 0,
     },
   });