fix missing top border on comment box (#3102)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.css

@@ -1,6 +1,3 @@
-$commentsBorder: var(--palette-grey-300);
-
-.commentFormBox {
-  border: 1px solid $commentsBorder;
-  border-radius: var(--round-corners);
+.root {
+  margin-top: var(--spacing-2);
 }

src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.tsx

@@ -11,6 +11,8 @@ import CommentForm from "../../Stream/CommentForm";
 import TopBarLeft from "../TopBarLeft";
 import Username from "../Username";
 
+import styles from "./EditCommentForm.css";
+
 export interface EditCommentFormProps {
   id: string;
   className?: string;
@@ -63,6 +65,7 @@ const EditCommentForm: FunctionComponent<EditCommentFormProps> = (props) => {
         expired={props.expired}
         placeholder="Edit comment"
         placeHolderId="comments-editCommentForm-rte"
+        topBorder={true}
         disabledMessage={
           <Localized id="comments-editCommentForm-editTimeExpired">
             Edit time has expired. You can no longer edit this comment. Why not
@@ -76,6 +79,7 @@ const EditCommentForm: FunctionComponent<EditCommentFormProps> = (props) => {
             </AriaInfo>
           </Localized>
         }
+        className={styles.root}
         rteConfig={props.rteConfig}
       />
     </div>

src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.css

@@ -3,6 +3,7 @@ $commentsBorder: var(--palette-grey-300);
 .commentFormBox {
   border: 1px solid $commentsBorder;
   border-radius: var(--round-corners);
+  overflow: hidden;
 }
 
 .noTopBorder {

src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx

@@ -79,6 +79,7 @@ interface Props {
   bodyInputID: string;
   siteID: string;
   topBorder?: boolean;
+  className?: string;
 }
 
 const CommentForm: FunctionComponent<Props> = (props) => {
@@ -122,7 +123,7 @@ const CommentForm: FunctionComponent<Props> = (props) => {
   );
 
   return (
-    <div className={CLASSES[props.classNameRoot].$root}>
+    <div className={cn(CLASSES[props.classNameRoot].$root, props.className)}>
       <Form onSubmit={onSubmit} initialValues={props.initialValues}>
         {({
           handleSubmit,

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentForm.tsx

@@ -72,6 +72,7 @@ const PostCommentForm: FunctionComponent<Props> = (props) => {
         onSubmit={props.onSubmit}
         onChange={props.onChange}
         min={props.min}
+        topBorder={!props.showMessageBox}
         initialValues={props.initialValues}
         max={props.max}
         disabled={props.disabled}
@@ -107,7 +108,6 @@ const PostCommentForm: FunctionComponent<Props> = (props) => {
         submitStatus={
           <PostCommentSubmitStatusContainer status={props.submitStatus} />
         }
-        topBorder={false}
       />
     </div>
   );

src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap

@@ -328,7 +328,7 @@ exports[`edit a comment and handle server error: edit form 1`] = `
       </div>
     </div>
     <div
-      className="coral coral-editComment"
+      className="coral coral-editComment EditCommentForm-root"
     >
       <form
         autoComplete="off"
@@ -524,7 +524,7 @@ exports[`edit a comment: edit form 1`] = `
       </div>
     </div>
     <div
-      className="coral coral-editComment"
+      className="coral coral-editComment EditCommentForm-root"
     >
       <form
         autoComplete="off"
@@ -720,7 +720,7 @@ exports[`edit a comment: optimistic response 1`] = `
       </div>
     </div>
     <div
-      className="coral coral-editComment"
+      className="coral coral-editComment EditCommentForm-root"
     >
       <form
         autoComplete="off"
@@ -1798,7 +1798,7 @@ exports[`shows expiry message: edit time expired 1`] = `
       </div>
     </div>
     <div
-      className="coral coral-editComment"
+      className="coral coral-editComment EditCommentForm-root"
     >
       <form
         autoComplete="off"