6.3.2 mobile and responsive UI fixes (#3096)

* Remove vertical padding and line height on badges

Allows them to align with the time and user name
text elements.

* Hide report button text on mobile screens

* Allow read more links to wrap text on mobile

* Wrap comment tags when on mobile screens

* Fix collapse alignment on mobile screens

* Update top bar responsive scaling

* Use MatchMedia inside ReportButton

* Fix justification on comment TopBarRight

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

@@ -11,20 +11,36 @@ interface Props {
   className?: string;
 }
 
+// The comment param is `any` because relay isn't
+// smart enough to see that the nested fragments
+// on the comment container are compatible.
+export function authorHasBadges(comment: any) {
+  return (
+    comment &&
+    comment.author &&
+    comment.author.badges &&
+    comment.author.badges.length !== 0
+  );
+}
+
 const AuthorBadgesContainer: FunctionComponent<Props> = ({
   comment,
   className,
 }) => {
-  if (!comment.author || !comment.author.badges) {
+  const hasBadges = authorHasBadges(comment);
+
+  if (!hasBadges) {
     return null;
   }
   return (
     <>
-      {comment.author.badges.map((badge) => (
-        <Tag key={badge} color="dark" className={className}>
-          {badge}
-        </Tag>
-      ))}
+      {comment.author &&
+        comment.author.badges &&
+        comment.author.badges.map((badge) => (
+          <Tag key={badge} color="dark" className={className}>
+            {badge}
+          </Tag>
+        ))}
     </>
   );
 };

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

@@ -21,6 +21,23 @@ $commentTimestampColor: var(--palette-grey-500);
   font-style: normal;
   font-weight: var(--font-weight-primary-semi-bold);
   font-size: var(--font-size-2);
-  line-height: 1.14;
   color: $commentTimestampColor;
+
+  margin-right: var(--spacing-1);
+}
+
+.tags {
+  margin-right: var(--spacing-1);
+}
+
+.badges {
+  margin-right: var(--spacing-1);
+}
+
+.username {
+  margin-right: var(--spacing-2);
+}
+
+.usernameFullRow {
+  flex-basis: 100%;
 }

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

@@ -8,6 +8,8 @@ import Comment from "./Comment";
 it("renders username and body", () => {
   const props: PropTypesOf<typeof Comment> = {
     username: "Marvin",
+    tags: "",
+    badges: "",
     body: "Woof",
     createdAt: "1995-12-17T03:24:00.000Z",
     topBarRight: "topBarRight",

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

@@ -4,11 +4,10 @@ import React, { FunctionComponent } from "react";
 import CLASSES from "coral-stream/classes";
 import HTMLContent from "coral-stream/common/HTMLContent";
 import Timestamp from "coral-stream/common/Timestamp";
-import { Flex, HorizontalGutter } from "coral-ui/components/v2";
+import { Flex, HorizontalGutter, MatchMedia } from "coral-ui/components/v2";
 
 import EditedMarker from "./EditedMarker";
 import InReplyTo from "./InReplyTo";
-import TopBarLeft from "./TopBarLeft";
 
 import styles from "./Comment.css";
 
@@ -22,7 +21,8 @@ export interface CommentProps {
   showEditedMarker?: boolean;
   highlight?: boolean;
   parentAuthorName?: string | null;
-  userTags?: React.ReactNode;
+  tags?: React.ReactNode | null;
+  badges?: React.ReactNode | null;
   collapsed?: boolean;
   media?: React.ReactNode;
 }
@@ -39,15 +39,35 @@ const Comment: FunctionComponent<CommentProps> = (props) => {
     >
       <Flex
         direction="row"
+        alignItems="flex-start"
         justifyContent="space-between"
         className={CLASSES.comment.topBar.$root}
       >
-        <TopBarLeft>
-          <Flex direction="row" alignItems="center" itemGutter="half">
-            {props.username && props.username}
-            {props.userTags}
-          </Flex>
-          <Flex direction="row" alignItems="baseline" itemGutter>
+        <Flex alignItems="center" wrap>
+          {props.username && (
+            <MatchMedia lteWidth="mobile">
+              {(matches) => (
+                <div
+                  className={cn(styles.username, {
+                    [styles.usernameFullRow]: matches,
+                  })}
+                >
+                  {props.username}
+                </div>
+              )}
+            </MatchMedia>
+          )}
+          <Flex direction="row" alignItems="center" wrap>
+            {props.tags && (
+              <Flex alignItems="center" className={styles.tags}>
+                {props.tags}
+              </Flex>
+            )}
+            {props.badges && (
+              <Flex alignItems="center" className={styles.badges}>
+                {props.badges}
+              </Flex>
+            )}
             <Timestamp
               className={cn(styles.timestamp, CLASSES.comment.topBar.timestamp)}
             >
@@ -57,7 +77,7 @@ const Comment: FunctionComponent<CommentProps> = (props) => {
               <EditedMarker className={CLASSES.comment.topBar.edited} />
             )}
           </Flex>
-        </TopBarLeft>
+        </Flex>
         {props.topBarRight && <div>{props.topBarRight}</div>}
       </Flex>
 

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

@@ -50,4 +50,6 @@ $commenterActionEditColorActive: var(--palette-primary-300);
 
 .staticUsername {
   color: var(--palette-text-100);
+
+  margin-right: var(--spacing-2);
 }

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

@@ -37,6 +37,7 @@ import {
 } from "coral-stream/mutations";
 import { Ability, can } from "coral-stream/permissions";
 import { Button, Flex, HorizontalGutter, Icon } from "coral-ui/components/v2";
+import MatchMedia from "coral-ui/components/v2/MatchMedia";
 
 import { CommentContainer_comment as CommentData } from "coral-stream/__generated__/CommentContainer_comment.graphql";
 import { CommentContainer_settings as SettingsData } from "coral-stream/__generated__/CommentContainer_settings.graphql";
@@ -45,7 +46,7 @@ import { CommentContainer_viewer as ViewerData } from "coral-stream/__generated_
 
 import { isPublished } from "../helpers";
 import AnsweredTag from "./AnsweredTag";
-import UserBadgesContainer from "./AuthorBadgesContainer";
+import UserBadgesContainer, { authorHasBadges } from "./AuthorBadgesContainer";
 import ButtonsBar from "./ButtonsBar";
 import EditCommentFormContainer from "./EditCommentForm";
 import FeaturedTag from "./FeaturedTag";
@@ -61,7 +62,7 @@ import ReplyCommentFormContainer from "./ReplyCommentForm";
 import ReportFlowContainer, { ReportButton } from "./ReportFlow";
 import ShowConversationLink from "./ShowConversationLink";
 import { UsernameContainer, UsernameWithPopoverContainer } from "./Username";
-import UserTagsContainer from "./UserTagsContainer";
+import UserTagsContainer, { commentHasTags } from "./UserTagsContainer";
 
 import styles from "./CommentContainer.css";
 
@@ -301,6 +302,9 @@ export const CommentContainer: FunctionComponent<Props> = ({
     );
   }
 
+  const hasTags = commentHasTags(story, comment);
+  const hasBadges = authorHasBadges(comment);
+
   // Comment is not published after viewer rejected it.
   if (comment.lastViewerAction === "REJECT" && comment.status === "REJECTED") {
     return <RejectedTombstoneContainer comment={comment} />;
@@ -334,7 +338,7 @@ export const CommentContainer: FunctionComponent<Props> = ({
             parentAuthorName={comment.parent?.author?.username}
             staticUsername={
               comment.author && (
-                <>
+                <Flex direction="row" alignItems="center">
                   <UsernameContainer
                     className={cn(
                       styles.staticUsername,
@@ -352,61 +356,82 @@ export const CommentContainer: FunctionComponent<Props> = ({
                     className={CLASSES.comment.topBar.userBadge}
                     comment={comment}
                   />
-                </>
+                </Flex>
               )
             }
             username={
               comment.author && (
-                <>
-                  <UsernameWithPopoverContainer
-                    className={CLASSES.comment.topBar.username}
-                    comment={comment}
-                    viewer={viewer}
-                  />
-                  <UserTagsContainer
-                    className={CLASSES.comment.topBar.userTag}
-                    story={story}
-                    comment={comment}
-                    settings={settings}
-                  />
-                  <UserBadgesContainer
-                    className={CLASSES.comment.topBar.userBadge}
-                    comment={comment}
-                  />
-                </>
+                <UsernameWithPopoverContainer
+                  className={CLASSES.comment.topBar.username}
+                  comment={comment}
+                  viewer={viewer}
+                />
+              )
+            }
+            tags={
+              comment.author &&
+              hasTags && (
+                <UserTagsContainer
+                  className={CLASSES.comment.topBar.userTag}
+                  story={story}
+                  comment={comment}
+                  settings={settings}
+                />
+              )
+            }
+            badges={
+              comment.author &&
+              hasBadges && (
+                <UserBadgesContainer
+                  className={CLASSES.comment.topBar.userBadge}
+                  comment={comment}
+                />
               )
             }
             staticTopBarRight={commentTags}
             topBarRight={
-              <Flex alignItems="center" itemGutter>
-                {commentTags}
-                {editable && (
-                  <Button
-                    color="stream"
-                    variant="text"
-                    onClick={openEditDialog}
-                    className={cn(
-                      CLASSES.comment.topBar.editButton,
-                      styles.editButton
-                    )}
-                    data-testid="comment-edit-button"
-                  >
-                    <Flex alignItems="center" justifyContent="center">
-                      <Icon className={styles.editIcon}>edit</Icon>
-                      <Localized id="comments-commentContainer-editButton">
-                        Edit
-                      </Localized>
-                    </Flex>
-                  </Button>
-                )}
-                {showModerationCaret && (
-                  <CaretContainer
-                    comment={comment}
-                    story={story}
-                    viewer={viewer!}
-                  />
-                )}
-              </Flex>
+              <>
+                <MatchMedia gteWidth="mobile">
+                  {(matches) => (
+                    <>
+                      <Flex
+                        alignItems="center"
+                        justifyContent="flex-end"
+                        itemGutter
+                      >
+                        {matches ? commentTags : null}
+                        {editable && (
+                          <Button
+                            color="stream"
+                            variant="text"
+                            onClick={openEditDialog}
+                            className={cn(
+                              CLASSES.comment.topBar.editButton,
+                              styles.editButton
+                            )}
+                            data-testid="comment-edit-button"
+                          >
+                            <Flex alignItems="center" justifyContent="center">
+                              <Icon className={styles.editIcon}>edit</Icon>
+                              <Localized id="comments-commentContainer-editButton">
+                                Edit
+                              </Localized>
+                            </Flex>
+                          </Button>
+                        )}
+                        {showModerationCaret && (
+                          <CaretContainer
+                            comment={comment}
+                            story={story}
+                            viewer={viewer!}
+                          />
+                        )}
+                      </Flex>
+                      {!matches ? commentTags : null}
+                    </>
+                  )}
+                </MatchMedia>
+              </>
             }
             media={
               <MediaSectionContainer

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

@@ -22,6 +22,10 @@
   color: var(--palette-grey-500);
 }
 
+.username {
+  margin-right: var(--spacing-1);
+}
+
 .inner {
   flex: 1;
 }

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

@@ -5,7 +5,6 @@ import CLASSES from "coral-stream/classes";
 import { BaseButton, Flex, Icon, RelativeTime } from "coral-ui/components/v2";
 
 import EditedMarker from "./EditedMarker";
-import TopBarLeft from "./TopBarLeft";
 
 import styles from "./CommentToggle.css";
 
@@ -37,14 +36,24 @@ const CommentToggle: FunctionComponent<Props> = (props) => {
         <Flex
           direction="row"
           justifyContent="space-between"
+          alignItems="center"
           className={cn(styles.inner, CLASSES.comment.topBar.$root)}
         >
-          <TopBarLeft>
-            <Flex direction="row" alignItems="center" itemGutter="half">
+          <Flex
+            direction="row"
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            <Flex
+              className={styles.username}
+              direction="row"
+              alignItems="center"
+              itemGutter="half"
+            >
               {props.username && props.username}
               {props.userTags}
             </Flex>
-            <Flex direction="row" alignItems="baseline" itemGutter>
+            <Flex direction="row" alignItems="baseline" itemGutter wrap>
               <RelativeTime
                 className={cn(
                   styles.timestamp,
@@ -56,7 +65,7 @@ const CommentToggle: FunctionComponent<Props> = (props) => {
                 <EditedMarker className={CLASSES.comment.topBar.edited} />
               )}
             </Flex>
-          </TopBarLeft>
+          </Flex>
           {props.topBarRight && <div>{props.topBarRight}</div>}
         </Flex>
       </Flex>

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

@@ -19,6 +19,8 @@ export interface IndentedCommentProps
   toggleCollapsed?: () => void;
   staticUsername: React.ReactNode;
   staticTopBarRight: React.ReactNode;
+  tags?: React.ReactNode | null;
+  badges?: React.ReactNode | null;
 }
 
 const IndentedComment: FunctionComponent<IndentedCommentProps> = ({
@@ -50,7 +52,7 @@ const IndentedComment: FunctionComponent<IndentedCommentProps> = ({
           topBarRight={staticTopBarRight}
         />
       ) : (
-        <Flex alignItems="flex-start" spacing={1}>
+        <Flex alignItems="baseline" spacing={1}>
           {toggleCollapsed && (
             <Localized
               id="comments-collapse-toggle"

src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.tsx

@@ -2,6 +2,7 @@ import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
 import React, { FunctionComponent, useCallback, useMemo } from "react";
 import { graphql } from "react-relay";
+import Responsive from "react-responsive";
 
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import CLASSES from "coral-stream/classes";
@@ -9,7 +10,7 @@ import {
   ShowAuthPopupMutation,
   withShowAuthPopupMutation,
 } from "coral-stream/mutations";
-import { Flex, Icon } from "coral-ui/components/v2";
+import { Flex, Icon, MatchMedia } from "coral-ui/components/v2";
 import { Button } from "coral-ui/components/v3";
 
 import { ReportButton_comment } from "coral-stream/__generated__/ReportButton_comment.graphql";
@@ -35,7 +36,7 @@ const ReportButton: FunctionComponent<Props> = ({
 }) => {
   const onClickReport = useCallback(() => {
     onClick();
-  }, []);
+  }, [onClick]);
 
   const isLoggedIn = useMemo(() => {
     return Boolean(viewer);
@@ -55,42 +56,62 @@ const ReportButton: FunctionComponent<Props> = ({
 
   if (isReported) {
     return (
-      <div
-        className={cn(
-          CLASSES.comment.actionBar.reportedButton,
-          styles.reported
-        )}
-        data-testid="comment-reported-button"
+      <Localized
+        id="comments-reportButton-aria-reported"
+        attrs={{ "aria-label": true }}
       >
-        <Flex alignItems="center">
-          <Icon size="sm" className={styles.icon}>
-            flag
-          </Icon>
-          <Localized id="comments-reportButton-reported">Reported</Localized>
-        </Flex>
-      </div>
+        <div
+          className={cn(
+            CLASSES.comment.actionBar.reportedButton,
+            styles.reported
+          )}
+          data-testid="comment-reported-button"
+        >
+          <Flex alignItems="center">
+            <Icon size="sm" className={styles.icon}>
+              flag
+            </Icon>
+            <MatchMedia gteWidth="mobile">
+              {(matches) =>
+                matches ? (
+                  <Localized id="comments-reportButton-reported">
+                    Reported
+                  </Localized>
+                ) : null
+              }
+            </MatchMedia>
+          </Flex>
+        </div>
+      </Localized>
     );
   }
 
   return (
-    <Button
-      className={cn(CLASSES.comment.actionBar.reportButton)}
-      variant={open ? "filled" : "flat"}
-      active={Boolean(open)}
-      color="secondary"
-      fontSize="small"
-      fontWeight="semiBold"
-      paddingSize="extraSmall"
-      onClick={isLoggedIn ? onClickReport : signIn}
-      data-testid="comment-report-button"
+    <Localized
+      id="comments-reportButton-aria-report"
+      attrs={{ "aria-label": true }}
     >
-      <Flex alignItems="center" container="span">
-        <Icon size="sm" className={styles.icon}>
-          flag
-        </Icon>
-        <Localized id="comments-reportButton-report">Report</Localized>
-      </Flex>
-    </Button>
+      <Button
+        className={cn(CLASSES.comment.actionBar.reportButton)}
+        variant={open ? "filled" : "flat"}
+        active={Boolean(open)}
+        color="secondary"
+        fontSize="small"
+        fontWeight="semiBold"
+        paddingSize="extraSmall"
+        onClick={isLoggedIn ? onClickReport : signIn}
+        data-testid="comment-report-button"
+      >
+        <Flex alignItems="center" container="span">
+          <Icon size="sm" className={styles.icon}>
+            flag
+          </Icon>
+          <Responsive minWidth={400}>
+            <Localized id="comments-reportButton-report">Report</Localized>
+          </Responsive>
+        </Flex>
+      </Button>
+    </Localized>
   );
 };
 

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

@@ -5,8 +5,10 @@ $commentsConversationLinkColorActive: var(--palette-primary-800);
 .conversationLink {
   overflow: hidden;
   display: block;
-  text-overflow: ellipsis;
   text-align: left;
+  white-space: break-spaces;
+  line-height: 1rem;
+
   &.sizeRegular {
     padding: 0;
   }

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

@@ -20,15 +20,47 @@ interface Props {
   className?: string;
 }
 
+function storyIsInQAMode(story: UserTagsContainer_story) {
+  return story.settings.mode === GQLSTORY_MODE.QA;
+}
+
+function hasStaffTag(comment: UserTagsContainer_comment) {
+  return comment.tags.find((t) => t.code === "STAFF");
+}
+
+function hasExpertTag(
+  story: UserTagsContainer_story,
+  comment: UserTagsContainer_comment
+) {
+  const isQA = storyIsInQAMode(story);
+  return isQA && comment.tags.find((t) => t.code === "EXPERT");
+}
+
+// The comment and story params are `any` because relay
+// isn't smart enough to see that the nested fragments
+// on the comment container are compatible.
+export function commentHasTags(story: any, comment: any) {
+  const staffTag = hasStaffTag(comment);
+  const expertTag = hasExpertTag(story, comment);
+  const hasTags = staffTag || expertTag;
+
+  return hasTags;
+}
+
 const UserTagsContainer: FunctionComponent<Props> = ({
   story,
   settings,
   comment,
   className,
 }) => {
-  const isQA = story.settings.mode === GQLSTORY_MODE.QA;
-  const staffTag = comment.tags.find((t) => t.code === "STAFF");
-  const expertTag = isQA && comment.tags.find((t) => t.code === "EXPERT");
+  const staffTag = hasStaffTag(comment);
+  const expertTag = hasExpertTag(story, comment);
+  const hasTags = commentHasTags(story, comment);
+
+  if (!hasTags) {
+    return null;
+  }
+
   return (
     <Flex alignItems="center">
       {expertTag && (

src/core/client/stream/tabs/Comments/Comment/__snapshots__/Comment.spec.tsx.snap

@@ -7,23 +7,27 @@ exports[`renders username and body 1`] = `
   size="half"
 >
   <ForwardRef(forwardRef)
+    alignItems="flex-start"
     className="coral coral-comment-topBar"
     direction="row"
     justifyContent="space-between"
   >
-    <TopBarLeft>
+    <ForwardRef(forwardRef)
+      alignItems="center"
+      wrap={true}
+    >
+      <MatchMediaWithContext
+        lteWidth="mobile"
+      >
+        [Function]
+      </MatchMediaWithContext>
       <ForwardRef(forwardRef)
         alignItems="center"
         direction="row"
-        itemGutter="half"
-      >
-        Marvin
-      </ForwardRef(forwardRef)>
-      <ForwardRef(forwardRef)
-        alignItems="baseline"
-        direction="row"
-        itemGutter={true}
+        wrap={true}
       >
+        
+        
         <TimeStamp
           className="Comment-timestamp coral coral-timestamp coral-comment-timestamp"
         >
@@ -33,7 +37,7 @@ exports[`renders username and body 1`] = `
           className="coral coral-comment-edited"
         />
       </ForwardRef(forwardRef)>
-    </TopBarLeft>
+    </ForwardRef(forwardRef)>
     <div>
       topBarRight
     </div>

src/core/client/stream/tabs/Comments/Comment/__snapshots__/IndentedComment.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`renders correctly 1`] = `
   level={1}
 >
   <ForwardRef(forwardRef)
-    alignItems="flex-start"
+    alignItems="baseline"
     spacing={1}
   >
     <Comment

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

@@ -461,11 +461,7 @@ exports[`renders comment stream 1`] = `
                   </div>
                   <span
                     className="Box-root Box-ml-1"
-                  >
-                    <div
-                      className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                    />
-                  </span>
+                  />
                   <div
                     className="Box-root Box-ml-2"
                   >
@@ -606,11 +602,7 @@ exports[`renders comment stream 1`] = `
                   </div>
                   <span
                     className="Box-root Box-ml-1"
-                  >
-                    <div
-                      className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                    />
-                  </span>
+                  />
                   <div
                     className="Box-root Box-ml-2"
                   >

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

@@ -132,20 +132,20 @@ exports[`renders permalink view 1`] = `
                         className="coral coral-indent coral-indent-0 Indent-open"
                       >
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                          className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                         >
                           <div
                             className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                             role="article"
                           >
                             <div
-                              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                             >
                               <div
-                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                                className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                               >
                                 <div
-                                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                                  className="Comment-username"
                                 >
                                   <div
                                     className="Popover-root"
@@ -181,12 +181,9 @@ exports[`renders permalink view 1`] = `
                                       </div>
                                     </div>
                                   </div>
-                                  <div
-                                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                                  />
                                 </div>
                                 <div
-                                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                                  className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                                 >
                                   <button
                                     className="BaseButton-root Timestamp-root"
@@ -210,7 +207,7 @@ exports[`renders permalink view 1`] = `
                               </div>
                               <div>
                                 <div
-                                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                                 />
                               </div>
                             </div>
@@ -332,6 +329,7 @@ exports[`renders permalink view 1`] = `
                                   className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                                 >
                                   <button
+                                    aria-label="Report"
                                     aria-pressed={false}
                                     className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                                     data-testid="comment-report-button"
@@ -354,7 +352,6 @@ exports[`renders permalink view 1`] = `
                                       >
                                         flag
                                       </i>
-                                      Report
                                     </span>
                                   </button>
                                 </div>
@@ -407,20 +404,20 @@ exports[`renders permalink view 1`] = `
                         className="coral coral-indent coral-indent-0 Indent-open"
                       >
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                          className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                         >
                           <div
                             className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                             role="article"
                           >
                             <div
-                              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                             >
                               <div
-                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                                className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                               >
                                 <div
-                                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                                  className="Comment-username"
                                 >
                                   <div
                                     className="Popover-root"
@@ -456,12 +453,9 @@ exports[`renders permalink view 1`] = `
                                       </div>
                                     </div>
                                   </div>
-                                  <div
-                                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                                  />
                                 </div>
                                 <div
-                                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                                  className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                                 >
                                   <button
                                     className="BaseButton-root Timestamp-root"
@@ -485,7 +479,7 @@ exports[`renders permalink view 1`] = `
                               </div>
                               <div>
                                 <div
-                                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                                 />
                               </div>
                             </div>
@@ -607,6 +601,7 @@ exports[`renders permalink view 1`] = `
                                   className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                                 >
                                   <button
+                                    aria-label="Report"
                                     aria-pressed={false}
                                     className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                                     data-testid="comment-report-button"
@@ -629,7 +624,6 @@ exports[`renders permalink view 1`] = `
                                       >
                                         flag
                                       </i>
-                                      Report
                                     </span>
                                   </button>
                                 </div>
@@ -679,20 +673,20 @@ exports[`renders permalink view 1`] = `
                       className="coral coral-indent coral-indent-0 Indent-open"
                     >
                       <div
-                        className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                        className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                       >
                         <div
                           className="Box-root HorizontalGutter-root Comment-root Comment-highlight coral coral-comment-highlight HorizontalGutter-half"
                           role="article"
                         >
                           <div
-                            className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                            className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                           >
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                              className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                             >
                               <div
-                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                                className="Comment-username"
                               >
                                 <div
                                   className="Popover-root"
@@ -728,12 +722,9 @@ exports[`renders permalink view 1`] = `
                                     </div>
                                   </div>
                                 </div>
-                                <div
-                                  className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                                />
                               </div>
                               <div
-                                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                                className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                               >
                                 <button
                                   className="BaseButton-root Timestamp-root"
@@ -757,7 +748,7 @@ exports[`renders permalink view 1`] = `
                             </div>
                             <div>
                               <div
-                                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                               />
                             </div>
                           </div>
@@ -879,6 +870,7 @@ exports[`renders permalink view 1`] = `
                                 className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                               >
                                 <button
+                                  aria-label="Report"
                                   aria-pressed={false}
                                   className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                                   data-testid="comment-report-button"
@@ -901,7 +893,6 @@ exports[`renders permalink view 1`] = `
                                     >
                                       flag
                                     </i>
-                                    Report
                                   </span>
                                 </button>
                               </div>
@@ -943,7 +934,7 @@ exports[`renders permalink view 1`] = `
                     className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                      className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                     >
                       <button
                         aria-label="Collapse comment thread"
@@ -968,13 +959,13 @@ exports[`renders permalink view 1`] = `
                         role="article"
                       >
                         <div
-                          className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                          className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                            className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                           >
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                              className="Comment-username"
                             >
                               <div
                                 className="Popover-root"
@@ -1010,12 +1001,9 @@ exports[`renders permalink view 1`] = `
                                   </div>
                                 </div>
                               </div>
-                              <div
-                                className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                              />
                             </div>
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                              className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                             >
                               <button
                                 className="BaseButton-root Timestamp-root"
@@ -1039,7 +1027,7 @@ exports[`renders permalink view 1`] = `
                           </div>
                           <div>
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                             />
                           </div>
                         </div>
@@ -1188,6 +1176,7 @@ exports[`renders permalink view 1`] = `
                               className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                             >
                               <button
+                                aria-label="Report"
                                 aria-pressed={false}
                                 className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                                 data-testid="comment-report-button"
@@ -1210,7 +1199,6 @@ exports[`renders permalink view 1`] = `
                                   >
                                     flag
                                   </i>
-                                  Report
                                 </span>
                               </button>
                             </div>
@@ -1243,7 +1231,7 @@ exports[`renders permalink view 1`] = `
                     className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                      className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                     >
                       <button
                         aria-label="Collapse comment thread"
@@ -1268,13 +1256,13 @@ exports[`renders permalink view 1`] = `
                         role="article"
                       >
                         <div
-                          className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                          className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                            className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                           >
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                              className="Comment-username"
                             >
                               <div
                                 className="Popover-root"
@@ -1310,12 +1298,9 @@ exports[`renders permalink view 1`] = `
                                   </div>
                                 </div>
                               </div>
-                              <div
-                                className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                              />
                             </div>
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                              className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                             >
                               <button
                                 className="BaseButton-root Timestamp-root"
@@ -1339,7 +1324,7 @@ exports[`renders permalink view 1`] = `
                           </div>
                           <div>
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                             />
                           </div>
                         </div>
@@ -1488,6 +1473,7 @@ exports[`renders permalink view 1`] = `
                               className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                             >
                               <button
+                                aria-label="Report"
                                 aria-pressed={false}
                                 className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                                 data-testid="comment-report-button"
@@ -1510,7 +1496,6 @@ exports[`renders permalink view 1`] = `
                                   >
                                     flag
                                   </i>
-                                  Report
                                 </span>
                               </button>
                             </div>

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

@@ -43,20 +43,20 @@ exports[`renders conversation thread 1`] = `
                 className="coral coral-indent coral-indent-0 Indent-open"
               >
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                  className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                 >
                   <div
                     className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                     role="article"
                   >
                     <div
-                      className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                      className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                     >
                       <div
-                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                        className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                       >
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                          className="Comment-username"
                         >
                           <div
                             className="Popover-root"
@@ -92,19 +92,23 @@ exports[`renders conversation thread 1`] = `
                               </div>
                             </div>
                           </div>
-                          <div
-                            className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                          >
-                            <span
-                              className="Tag-root coral coral-userTag coral-comment-userTag UserTagsContainer-tag Tag-colorGrey Tag-uppercase"
-                            >
-                              Staff
-                            </span>
-                          </div>
                         </div>
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                          className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                         >
+                          <div
+                            className="Box-root Flex-root Comment-tags Flex-flex Flex-alignCenter"
+                          >
+                            <div
+                              className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                            >
+                              <span
+                                className="Tag-root coral coral-userTag coral-comment-userTag UserTagsContainer-tag Tag-colorGrey Tag-uppercase"
+                              >
+                                Staff
+                              </span>
+                            </div>
+                          </div>
                           <button
                             className="BaseButton-root Timestamp-root"
                             onBlur={[Function]}
@@ -127,7 +131,7 @@ exports[`renders conversation thread 1`] = `
                       </div>
                       <div>
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                          className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                         />
                       </div>
                     </div>
@@ -249,6 +253,7 @@ exports[`renders conversation thread 1`] = `
                           className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                         >
                           <button
+                            aria-label="Report"
                             aria-pressed={false}
                             className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                             data-testid="comment-report-button"
@@ -271,7 +276,6 @@ exports[`renders conversation thread 1`] = `
                               >
                                 flag
                               </i>
-                              Report
                             </span>
                           </button>
                         </div>
@@ -357,20 +361,20 @@ exports[`renders conversation thread 1`] = `
                 className="coral coral-indent coral-indent-0 Indent-open"
               >
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                  className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                 >
                   <div
                     className="Box-root HorizontalGutter-root Comment-root Comment-highlight coral coral-comment-highlight HorizontalGutter-half"
                     role="article"
                   >
                     <div
-                      className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                      className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                     >
                       <div
-                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                        className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                       >
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                          className="Comment-username"
                         >
                           <div
                             className="Popover-root"
@@ -406,12 +410,9 @@ exports[`renders conversation thread 1`] = `
                               </div>
                             </div>
                           </div>
-                          <div
-                            className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                          />
                         </div>
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                          className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                         >
                           <button
                             className="BaseButton-root Timestamp-root"
@@ -435,7 +436,7 @@ exports[`renders conversation thread 1`] = `
                       </div>
                       <div>
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                          className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                         />
                       </div>
                     </div>
@@ -557,6 +558,7 @@ exports[`renders conversation thread 1`] = `
                           className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                         >
                           <button
+                            aria-label="Report"
                             aria-pressed={false}
                             className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                             data-testid="comment-report-button"
@@ -579,7 +581,6 @@ exports[`renders conversation thread 1`] = `
                               >
                                 flag
                               </i>
-                              Report
                             </span>
                           </button>
                         </div>
@@ -650,20 +651,20 @@ exports[`shows more of this conversation 1`] = `
                   className="coral coral-indent coral-indent-0 Indent-open"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                    className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                   >
                     <div
                       className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                       role="article"
                     >
                       <div
-                        className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                       >
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                          className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                            className="Comment-username"
                           >
                             <div
                               className="Popover-root"
@@ -699,12 +700,9 @@ exports[`shows more of this conversation 1`] = `
                                 </div>
                               </div>
                             </div>
-                            <div
-                              className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                            />
                           </div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                           >
                             <button
                               className="BaseButton-root Timestamp-root"
@@ -728,7 +726,7 @@ exports[`shows more of this conversation 1`] = `
                         </div>
                         <div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                           />
                         </div>
                       </div>
@@ -850,6 +848,7 @@ exports[`shows more of this conversation 1`] = `
                             className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
+                              aria-label="Report"
                               aria-pressed={false}
                               className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                               data-testid="comment-report-button"
@@ -872,7 +871,6 @@ exports[`shows more of this conversation 1`] = `
                                 >
                                   flag
                                 </i>
-                                Report
                               </span>
                             </button>
                           </div>
@@ -925,20 +923,20 @@ exports[`shows more of this conversation 1`] = `
                   className="coral coral-indent coral-indent-0 Indent-open"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                    className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                   >
                     <div
                       className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
                       role="article"
                     >
                       <div
-                        className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                       >
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                          className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                            className="Comment-username"
                           >
                             <div
                               className="Popover-root"
@@ -974,19 +972,23 @@ exports[`shows more of this conversation 1`] = `
                                 </div>
                               </div>
                             </div>
-                            <div
-                              className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                            >
-                              <span
-                                className="Tag-root coral coral-userTag coral-comment-userTag UserTagsContainer-tag Tag-colorGrey Tag-uppercase"
-                              >
-                                Staff
-                              </span>
-                            </div>
                           </div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                           >
+                            <div
+                              className="Box-root Flex-root Comment-tags Flex-flex Flex-alignCenter"
+                            >
+                              <div
+                                className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                              >
+                                <span
+                                  className="Tag-root coral coral-userTag coral-comment-userTag UserTagsContainer-tag Tag-colorGrey Tag-uppercase"
+                                >
+                                  Staff
+                                </span>
+                              </div>
+                            </div>
                             <button
                               className="BaseButton-root Timestamp-root"
                               onBlur={[Function]}
@@ -1009,7 +1011,7 @@ exports[`shows more of this conversation 1`] = `
                         </div>
                         <div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                           />
                         </div>
                       </div>
@@ -1131,6 +1133,7 @@ exports[`shows more of this conversation 1`] = `
                             className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
+                              aria-label="Report"
                               aria-pressed={false}
                               className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                               data-testid="comment-report-button"
@@ -1153,7 +1156,6 @@ exports[`shows more of this conversation 1`] = `
                                 >
                                   flag
                                 </i>
-                                Report
                               </span>
                             </button>
                           </div>
@@ -1203,20 +1205,20 @@ exports[`shows more of this conversation 1`] = `
                 className="coral coral-indent coral-indent-0 Indent-open"
               >
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                  className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                 >
                   <div
                     className="Box-root HorizontalGutter-root Comment-root Comment-highlight coral coral-comment-highlight HorizontalGutter-half"
                     role="article"
                   >
                     <div
-                      className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                      className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                     >
                       <div
-                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                        className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                       >
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                          className="Comment-username"
                         >
                           <div
                             className="Popover-root"
@@ -1252,12 +1254,9 @@ exports[`shows more of this conversation 1`] = `
                               </div>
                             </div>
                           </div>
-                          <div
-                            className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                          />
                         </div>
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                          className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                         >
                           <button
                             className="BaseButton-root Timestamp-root"
@@ -1281,7 +1280,7 @@ exports[`shows more of this conversation 1`] = `
                       </div>
                       <div>
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                          className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                         />
                       </div>
                     </div>
@@ -1403,6 +1402,7 @@ exports[`shows more of this conversation 1`] = `
                           className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                         >
                           <button
+                            aria-label="Report"
                             aria-pressed={false}
                             className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                             data-testid="comment-report-button"
@@ -1425,7 +1425,6 @@ exports[`shows more of this conversation 1`] = `
                               >
                                 flag
                               </i>
-                              Report
                             </span>
                           </button>
                         </div>

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

@@ -15,7 +15,7 @@ exports[`cancel edit 1`] = `
         className="coral coral-indent coral-indent-0 Indent-open"
       >
         <div
-          className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+          className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
         >
           <button
             aria-label="Collapse comment thread"
@@ -40,13 +40,13 @@ exports[`cancel edit 1`] = `
             role="article"
           >
             <div
-              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
               >
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                  className="Comment-username"
                 >
                   <div
                     className="Popover-root"
@@ -82,12 +82,9 @@ exports[`cancel edit 1`] = `
                       </div>
                     </div>
                   </div>
-                  <div
-                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                  />
                 </div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                  className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                 >
                   <button
                     className="BaseButton-root Timestamp-root"
@@ -111,7 +108,7 @@ exports[`cancel edit 1`] = `
               </div>
               <div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                 >
                   <button
                     className="BaseButton-root Button-root Button-sizeRegular Button-colorStream Button-variantText Button-uppercase coral coral-comment-editButton CommentContainer-editButton"
@@ -258,6 +255,7 @@ exports[`cancel edit 1`] = `
                   className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                 >
                   <button
+                    aria-label="Report"
                     aria-pressed={false}
                     className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                     data-testid="comment-report-button"
@@ -280,7 +278,6 @@ exports[`cancel edit 1`] = `
                       >
                         flag
                       </i>
-                      Report
                     </span>
                   </button>
                 </div>
@@ -897,7 +894,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
         className="coral coral-indent coral-indent-0 Indent-open"
       >
         <div
-          className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+          className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
         >
           <button
             aria-label="Collapse comment thread"
@@ -922,13 +919,13 @@ exports[`edit a comment: render comment with edit button 1`] = `
             role="article"
           >
             <div
-              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
               >
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                  className="Comment-username"
                 >
                   <div
                     className="Popover-root"
@@ -964,12 +961,9 @@ exports[`edit a comment: render comment with edit button 1`] = `
                       </div>
                     </div>
                   </div>
-                  <div
-                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                  />
                 </div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                  className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                 >
                   <button
                     className="BaseButton-root Timestamp-root"
@@ -993,7 +987,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
               </div>
               <div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                 >
                   <button
                     className="BaseButton-root Button-root Button-sizeRegular Button-colorStream Button-variantText Button-uppercase coral coral-comment-editButton CommentContainer-editButton"
@@ -1140,6 +1134,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
                   className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                 >
                   <button
+                    aria-label="Report"
                     aria-pressed={false}
                     className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                     data-testid="comment-report-button"
@@ -1162,7 +1157,6 @@ exports[`edit a comment: render comment with edit button 1`] = `
                       >
                         flag
                       </i>
-                      Report
                     </span>
                   </button>
                 </div>
@@ -1191,7 +1185,7 @@ exports[`edit a comment: server response 1`] = `
         className="coral coral-indent coral-indent-0 Indent-open"
       >
         <div
-          className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+          className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
         >
           <button
             aria-label="Collapse comment thread"
@@ -1216,13 +1210,13 @@ exports[`edit a comment: server response 1`] = `
             role="article"
           >
             <div
-              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
               >
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                  className="Comment-username"
                 >
                   <div
                     className="Popover-root"
@@ -1258,12 +1252,9 @@ exports[`edit a comment: server response 1`] = `
                       </div>
                     </div>
                   </div>
-                  <div
-                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                  />
                 </div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                  className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                 >
                   <button
                     className="BaseButton-root Timestamp-root"
@@ -1296,7 +1287,7 @@ exports[`edit a comment: server response 1`] = `
               </div>
               <div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                 >
                   <button
                     className="BaseButton-root Button-root Button-sizeRegular Button-colorStream Button-variantText Button-uppercase coral coral-comment-editButton CommentContainer-editButton"
@@ -1443,6 +1434,7 @@ exports[`edit a comment: server response 1`] = `
                   className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                 >
                   <button
+                    aria-label="Report"
                     aria-pressed={false}
                     className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                     data-testid="comment-report-button"
@@ -1465,7 +1457,6 @@ exports[`edit a comment: server response 1`] = `
                       >
                         flag
                       </i>
-                      Report
                     </span>
                   </button>
                 </div>
@@ -1494,7 +1485,7 @@ exports[`shows expiry message: edit form closed 1`] = `
         className="coral coral-indent coral-indent-0 Indent-open"
       >
         <div
-          className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+          className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
         >
           <button
             aria-label="Collapse comment thread"
@@ -1519,13 +1510,13 @@ exports[`shows expiry message: edit form closed 1`] = `
             role="article"
           >
             <div
-              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
               >
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                  className="Comment-username"
                 >
                   <div
                     className="Popover-root"
@@ -1561,12 +1552,9 @@ exports[`shows expiry message: edit form closed 1`] = `
                       </div>
                     </div>
                   </div>
-                  <div
-                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                  />
                 </div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                  className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                 >
                   <button
                     className="BaseButton-root Timestamp-root"
@@ -1590,7 +1578,7 @@ exports[`shows expiry message: edit form closed 1`] = `
               </div>
               <div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                 >
                   <button
                     className="BaseButton-root Button-root Button-sizeRegular Button-colorStream Button-variantText Button-uppercase coral coral-comment-editButton CommentContainer-editButton"
@@ -1737,6 +1725,7 @@ exports[`shows expiry message: edit form closed 1`] = `
                   className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                 >
                   <button
+                    aria-label="Report"
                     aria-pressed={false}
                     className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                     data-testid="comment-report-button"
@@ -1759,7 +1748,6 @@ exports[`shows expiry message: edit form closed 1`] = `
                       >
                         flag
                       </i>
-                      Report
                     </span>
                   </button>
                 </div>

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

@@ -25,7 +25,7 @@ exports[`renders comment stream with load more button 1`] = `
             className="coral coral-indent coral-indent-0 Indent-open"
           >
             <div
-              className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+              className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
             >
               <button
                 aria-label="Collapse comment thread"
@@ -50,13 +50,13 @@ exports[`renders comment stream with load more button 1`] = `
                 role="article"
               >
                 <div
-                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                    className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                      className="Comment-username"
                     >
                       <div
                         className="Popover-root"
@@ -92,12 +92,9 @@ exports[`renders comment stream with load more button 1`] = `
                           </div>
                         </div>
                       </div>
-                      <div
-                        className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                      />
                     </div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                     >
                       <button
                         className="BaseButton-root Timestamp-root"
@@ -121,7 +118,7 @@ exports[`renders comment stream with load more button 1`] = `
                   </div>
                   <div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                     />
                   </div>
                 </div>
@@ -243,6 +240,7 @@ exports[`renders comment stream with load more button 1`] = `
                       className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
+                        aria-label="Report"
                         aria-pressed={false}
                         className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                         data-testid="comment-report-button"
@@ -265,7 +263,6 @@ exports[`renders comment stream with load more button 1`] = `
                           >
                             flag
                           </i>
-                          Report
                         </span>
                       </button>
                     </div>
@@ -298,7 +295,7 @@ exports[`renders comment stream with load more button 1`] = `
             className="coral coral-indent coral-indent-0 Indent-open"
           >
             <div
-              className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+              className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
             >
               <button
                 aria-label="Collapse comment thread"
@@ -323,13 +320,13 @@ exports[`renders comment stream with load more button 1`] = `
                 role="article"
               >
                 <div
-                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                    className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                      className="Comment-username"
                     >
                       <div
                         className="Popover-root"
@@ -365,12 +362,9 @@ exports[`renders comment stream with load more button 1`] = `
                           </div>
                         </div>
                       </div>
-                      <div
-                        className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                      />
                     </div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                     >
                       <button
                         className="BaseButton-root Timestamp-root"
@@ -394,7 +388,7 @@ exports[`renders comment stream with load more button 1`] = `
                   </div>
                   <div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                     />
                   </div>
                 </div>
@@ -516,6 +510,7 @@ exports[`renders comment stream with load more button 1`] = `
                       className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
+                        aria-label="Report"
                         aria-pressed={false}
                         className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                         data-testid="comment-report-button"
@@ -538,7 +533,6 @@ exports[`renders comment stream with load more button 1`] = `
                           >
                             flag
                           </i>
-                          Report
                         </span>
                       </button>
                     </div>

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

@@ -15,7 +15,7 @@ exports[`post a comment: optimistic response 1`] = `
         className="coral coral-indent coral-indent-0 Indent-open"
       >
         <div
-          className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+          className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
         >
           <button
             aria-label="Collapse comment thread"
@@ -40,13 +40,13 @@ exports[`post a comment: optimistic response 1`] = `
             role="article"
           >
             <div
-              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
               >
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                  className="Comment-username"
                 >
                   <div
                     className="Popover-root"
@@ -82,12 +82,9 @@ exports[`post a comment: optimistic response 1`] = `
                       </div>
                     </div>
                   </div>
-                  <div
-                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                  />
                 </div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                  className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                 >
                   <button
                     className="BaseButton-root Timestamp-root"
@@ -111,7 +108,7 @@ exports[`post a comment: optimistic response 1`] = `
               </div>
               <div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                 >
                   <button
                     className="BaseButton-root Button-root Button-sizeRegular Button-colorStream Button-variantText Button-uppercase coral coral-comment-editButton CommentContainer-editButton"
@@ -258,6 +255,7 @@ exports[`post a comment: optimistic response 1`] = `
                   className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                 >
                   <button
+                    aria-label="Report"
                     aria-pressed={false}
                     className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                     data-testid="comment-report-button"
@@ -280,7 +278,6 @@ exports[`post a comment: optimistic response 1`] = `
                       >
                         flag
                       </i>
-                      Report
                     </span>
                   </button>
                 </div>

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

@@ -15,7 +15,7 @@ exports[`post a reply: open reply form 1`] = `
         className="Indent-level3 coral coral-indent coral-indent-3 Indent-open Indent-openPadded"
       >
         <div
-          className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+          className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
         >
           <button
             aria-label="Collapse comment thread"
@@ -40,13 +40,13 @@ exports[`post a reply: open reply form 1`] = `
             role="article"
           >
             <div
-              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
               >
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                  className="Comment-username"
                 >
                   <div
                     className="Popover-root"
@@ -82,12 +82,9 @@ exports[`post a reply: open reply form 1`] = `
                       </div>
                     </div>
                   </div>
-                  <div
-                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                  />
                 </div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                  className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                 >
                   <button
                     className="BaseButton-root Timestamp-root"
@@ -111,7 +108,7 @@ exports[`post a reply: open reply form 1`] = `
               </div>
               <div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                 />
               </div>
             </div>
@@ -260,6 +257,7 @@ exports[`post a reply: open reply form 1`] = `
                   className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                 >
                   <button
+                    aria-label="Report"
                     aria-pressed={false}
                     className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                     data-testid="comment-report-button"
@@ -282,7 +280,6 @@ exports[`post a reply: open reply form 1`] = `
                       >
                         flag
                       </i>
-                      Report
                     </span>
                   </button>
                 </div>
@@ -502,7 +499,7 @@ exports[`post a reply: optimistic response 1`] = `
             className="Indent-level4 coral coral-indent coral-indent-4 Indent-open Indent-openPadded"
           >
             <div
-              className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+              className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
             >
               <button
                 aria-label="Collapse comment thread"
@@ -527,13 +524,13 @@ exports[`post a reply: optimistic response 1`] = `
                 role="article"
               >
                 <div
-                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                    className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                      className="Comment-username"
                     >
                       <div
                         className="Popover-root"
@@ -569,12 +566,9 @@ exports[`post a reply: optimistic response 1`] = `
                           </div>
                         </div>
                       </div>
-                      <div
-                        className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                      />
                     </div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                     >
                       <button
                         className="BaseButton-root Timestamp-root"
@@ -598,7 +592,7 @@ exports[`post a reply: optimistic response 1`] = `
                   </div>
                   <div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeRegular Button-colorStream Button-variantText Button-uppercase coral coral-comment-editButton CommentContainer-editButton"
@@ -745,6 +739,7 @@ exports[`post a reply: optimistic response 1`] = `
                       className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
+                        aria-label="Report"
                         aria-pressed={false}
                         className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                         data-testid="comment-report-button"
@@ -767,7 +762,6 @@ exports[`post a reply: optimistic response 1`] = `
                           >
                             flag
                           </i>
-                          Report
                         </span>
                       </button>
                     </div>
@@ -811,7 +805,7 @@ exports[`renders comment stream 1`] = `
             className="coral coral-indent coral-indent-0 Indent-open"
           >
             <div
-              className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+              className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
             >
               <button
                 aria-label="Collapse comment thread"
@@ -836,13 +830,13 @@ exports[`renders comment stream 1`] = `
                 role="article"
               >
                 <div
-                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                    className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                      className="Comment-username"
                     >
                       <div
                         className="Popover-root"
@@ -878,12 +872,9 @@ exports[`renders comment stream 1`] = `
                           </div>
                         </div>
                       </div>
-                      <div
-                        className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                      />
                     </div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                     >
                       <button
                         className="BaseButton-root Timestamp-root"
@@ -907,7 +898,7 @@ exports[`renders comment stream 1`] = `
                   </div>
                   <div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                     />
                   </div>
                 </div>
@@ -1029,6 +1020,7 @@ exports[`renders comment stream 1`] = `
                       className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
+                        aria-label="Report"
                         aria-pressed={false}
                         className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                         data-testid="comment-report-button"
@@ -1051,7 +1043,6 @@ exports[`renders comment stream 1`] = `
                           >
                             flag
                           </i>
-                          Report
                         </span>
                       </button>
                     </div>
@@ -1089,7 +1080,7 @@ exports[`renders comment stream 1`] = `
                   className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                    className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                   >
                     <button
                       aria-label="Collapse comment thread"
@@ -1114,13 +1105,13 @@ exports[`renders comment stream 1`] = `
                       role="article"
                     >
                       <div
-                        className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                       >
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                          className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                            className="Comment-username"
                           >
                             <div
                               className="Popover-root"
@@ -1156,12 +1147,9 @@ exports[`renders comment stream 1`] = `
                                 </div>
                               </div>
                             </div>
-                            <div
-                              className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                            />
                           </div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                           >
                             <button
                               className="BaseButton-root Timestamp-root"
@@ -1185,7 +1173,7 @@ exports[`renders comment stream 1`] = `
                         </div>
                         <div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                           />
                         </div>
                       </div>
@@ -1334,6 +1322,7 @@ exports[`renders comment stream 1`] = `
                             className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
+                              aria-label="Report"
                               aria-pressed={false}
                               className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                               data-testid="comment-report-button"
@@ -1356,7 +1345,6 @@ exports[`renders comment stream 1`] = `
                                 >
                                   flag
                                 </i>
-                                Report
                               </span>
                             </button>
                           </div>
@@ -1394,7 +1382,7 @@ exports[`renders comment stream 1`] = `
                         className="Indent-level2 coral coral-indent coral-indent-2 Indent-open Indent-openPadded"
                       >
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                          className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                         >
                           <button
                             aria-label="Collapse comment thread"
@@ -1419,13 +1407,13 @@ exports[`renders comment stream 1`] = `
                             role="article"
                           >
                             <div
-                              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                             >
                               <div
-                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                                className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                               >
                                 <div
-                                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                                  className="Comment-username"
                                 >
                                   <div
                                     className="Popover-root"
@@ -1461,12 +1449,9 @@ exports[`renders comment stream 1`] = `
                                       </div>
                                     </div>
                                   </div>
-                                  <div
-                                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                                  />
                                 </div>
                                 <div
-                                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                                  className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                                 >
                                   <button
                                     className="BaseButton-root Timestamp-root"
@@ -1490,7 +1475,7 @@ exports[`renders comment stream 1`] = `
                               </div>
                               <div>
                                 <div
-                                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                                 />
                               </div>
                             </div>
@@ -1639,6 +1624,7 @@ exports[`renders comment stream 1`] = `
                                   className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                                 >
                                   <button
+                                    aria-label="Report"
                                     aria-pressed={false}
                                     className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                                     data-testid="comment-report-button"
@@ -1661,7 +1647,6 @@ exports[`renders comment stream 1`] = `
                                       >
                                         flag
                                       </i>
-                                      Report
                                     </span>
                                   </button>
                                 </div>
@@ -1699,7 +1684,7 @@ exports[`renders comment stream 1`] = `
                               className="Indent-level3 coral coral-indent coral-indent-3 Indent-open Indent-openPadded"
                             >
                               <div
-                                className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                                className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                               >
                                 <button
                                   aria-label="Collapse comment thread"
@@ -1724,13 +1709,13 @@ exports[`renders comment stream 1`] = `
                                   role="article"
                                 >
                                   <div
-                                    className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                    className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                                   >
                                     <div
-                                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                                      className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                                     >
                                       <div
-                                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                                        className="Comment-username"
                                       >
                                         <div
                                           className="Popover-root"
@@ -1766,12 +1751,9 @@ exports[`renders comment stream 1`] = `
                                             </div>
                                           </div>
                                         </div>
-                                        <div
-                                          className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                                        />
                                       </div>
                                       <div
-                                        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                                        className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                                       >
                                         <button
                                           className="BaseButton-root Timestamp-root"
@@ -1795,7 +1777,7 @@ exports[`renders comment stream 1`] = `
                                     </div>
                                     <div>
                                       <div
-                                        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                                        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                                       />
                                     </div>
                                   </div>
@@ -1944,6 +1926,7 @@ exports[`renders comment stream 1`] = `
                                         className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                                       >
                                         <button
+                                          aria-label="Report"
                                           aria-pressed={false}
                                           className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                                           data-testid="comment-report-button"
@@ -1966,7 +1949,6 @@ exports[`renders comment stream 1`] = `
                                             >
                                               flag
                                             </i>
-                                            Report
                                           </span>
                                         </button>
                                       </div>

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

@@ -15,7 +15,7 @@ exports[`post a reply: open reply form 1`] = `
         className="coral coral-indent coral-indent-0 Indent-open"
       >
         <div
-          className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+          className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
         >
           <button
             aria-label="Collapse comment thread"
@@ -40,13 +40,13 @@ exports[`post a reply: open reply form 1`] = `
             role="article"
           >
             <div
-              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
               >
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                  className="Comment-username"
                 >
                   <div
                     className="Popover-root"
@@ -82,12 +82,9 @@ exports[`post a reply: open reply form 1`] = `
                       </div>
                     </div>
                   </div>
-                  <div
-                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                  />
                 </div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                  className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                 >
                   <button
                     className="BaseButton-root Timestamp-root"
@@ -111,7 +108,7 @@ exports[`post a reply: open reply form 1`] = `
               </div>
               <div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                 />
               </div>
             </div>
@@ -233,6 +230,7 @@ exports[`post a reply: open reply form 1`] = `
                   className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                 >
                   <button
+                    aria-label="Report"
                     aria-pressed={false}
                     className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                     data-testid="comment-report-button"
@@ -255,7 +253,6 @@ exports[`post a reply: open reply form 1`] = `
                       >
                         flag
                       </i>
-                      Report
                     </span>
                   </button>
                 </div>
@@ -459,7 +456,7 @@ exports[`post a reply: optimistic response 1`] = `
             className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded"
           >
             <div
-              className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+              className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
             >
               <button
                 aria-label="Collapse comment thread"
@@ -484,13 +481,13 @@ exports[`post a reply: optimistic response 1`] = `
                 role="article"
               >
                 <div
-                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                    className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                      className="Comment-username"
                     >
                       <div
                         className="Popover-root"
@@ -526,12 +523,9 @@ exports[`post a reply: optimistic response 1`] = `
                           </div>
                         </div>
                       </div>
-                      <div
-                        className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                      />
                     </div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                     >
                       <button
                         className="BaseButton-root Timestamp-root"
@@ -555,7 +549,7 @@ exports[`post a reply: optimistic response 1`] = `
                   </div>
                   <div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeRegular Button-colorStream Button-variantText Button-uppercase coral coral-comment-editButton CommentContainer-editButton"
@@ -729,6 +723,7 @@ exports[`post a reply: optimistic response 1`] = `
                       className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
+                        aria-label="Report"
                         aria-pressed={false}
                         className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                         data-testid="comment-report-button"
@@ -751,7 +746,6 @@ exports[`post a reply: optimistic response 1`] = `
                           >
                             flag
                           </i>
-                          Report
                         </span>
                       </button>
                     </div>

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

@@ -313,7 +313,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                     className="coral coral-indent coral-indent-0 Indent-open"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                      className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                     >
                       <button
                         aria-label="Collapse comment thread"
@@ -338,13 +338,13 @@ exports[`renders comment stream with community guidelines 1`] = `
                         role="article"
                       >
                         <div
-                          className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                          className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                            className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                           >
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                              className="Comment-username"
                             >
                               <div
                                 className="Popover-root"
@@ -380,12 +380,9 @@ exports[`renders comment stream with community guidelines 1`] = `
                                   </div>
                                 </div>
                               </div>
-                              <div
-                                className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                              />
                             </div>
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                              className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                             >
                               <button
                                 className="BaseButton-root Timestamp-root"
@@ -409,7 +406,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                           </div>
                           <div>
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                             />
                           </div>
                         </div>
@@ -531,6 +528,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                               className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                             >
                               <button
+                                aria-label="Report"
                                 aria-pressed={false}
                                 className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                                 data-testid="comment-report-button"
@@ -553,7 +551,6 @@ exports[`renders comment stream with community guidelines 1`] = `
                                   >
                                     flag
                                   </i>
-                                  Report
                                 </span>
                               </button>
                             </div>
@@ -586,7 +583,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                     className="coral coral-indent coral-indent-0 Indent-open"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                      className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                     >
                       <button
                         aria-label="Collapse comment thread"
@@ -611,13 +608,13 @@ exports[`renders comment stream with community guidelines 1`] = `
                         role="article"
                       >
                         <div
-                          className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                          className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                            className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                           >
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                              className="Comment-username"
                             >
                               <div
                                 className="Popover-root"
@@ -653,12 +650,9 @@ exports[`renders comment stream with community guidelines 1`] = `
                                   </div>
                                 </div>
                               </div>
-                              <div
-                                className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                              />
                             </div>
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                              className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                             >
                               <button
                                 className="BaseButton-root Timestamp-root"
@@ -682,7 +676,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                           </div>
                           <div>
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                             />
                           </div>
                         </div>
@@ -804,6 +798,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                               className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                             >
                               <button
+                                aria-label="Report"
                                 aria-pressed={false}
                                 className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                                 data-testid="comment-report-button"
@@ -826,7 +821,6 @@ exports[`renders comment stream with community guidelines 1`] = `
                                   >
                                     flag
                                   </i>
-                                  Report
                                 </span>
                               </button>
                             </div>

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

@@ -24,7 +24,7 @@ exports[`renders reply list 1`] = `
             className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded"
           >
             <div
-              className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+              className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
             >
               <button
                 aria-label="Collapse comment thread"
@@ -49,13 +49,13 @@ exports[`renders reply list 1`] = `
                 role="article"
               >
                 <div
-                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                    className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                      className="Comment-username"
                     >
                       <div
                         className="Popover-root"
@@ -91,12 +91,9 @@ exports[`renders reply list 1`] = `
                           </div>
                         </div>
                       </div>
-                      <div
-                        className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                      />
                     </div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                     >
                       <button
                         className="BaseButton-root Timestamp-root"
@@ -120,7 +117,7 @@ exports[`renders reply list 1`] = `
                   </div>
                   <div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                     />
                   </div>
                 </div>
@@ -269,6 +266,7 @@ exports[`renders reply list 1`] = `
                       className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
+                        aria-label="Report"
                         aria-pressed={false}
                         className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                         data-testid="comment-report-button"
@@ -291,7 +289,6 @@ exports[`renders reply list 1`] = `
                           >
                             flag
                           </i>
-                          Report
                         </span>
                       </button>
                     </div>
@@ -329,7 +326,7 @@ exports[`renders reply list 1`] = `
                   className="Indent-level2 coral coral-indent coral-indent-2 Indent-open Indent-openPadded"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                    className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                   >
                     <button
                       aria-label="Collapse comment thread"
@@ -354,13 +351,13 @@ exports[`renders reply list 1`] = `
                       role="article"
                     >
                       <div
-                        className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                       >
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                          className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                            className="Comment-username"
                           >
                             <div
                               className="Popover-root"
@@ -396,12 +393,9 @@ exports[`renders reply list 1`] = `
                                 </div>
                               </div>
                             </div>
-                            <div
-                              className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                            />
                           </div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                           >
                             <button
                               className="BaseButton-root Timestamp-root"
@@ -425,7 +419,7 @@ exports[`renders reply list 1`] = `
                         </div>
                         <div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                           />
                         </div>
                       </div>
@@ -574,6 +568,7 @@ exports[`renders reply list 1`] = `
                             className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
+                              aria-label="Report"
                               aria-pressed={false}
                               className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                               data-testid="comment-report-button"
@@ -596,7 +591,6 @@ exports[`renders reply list 1`] = `
                                 >
                                   flag
                                 </i>
-                                Report
                               </span>
                             </button>
                           </div>
@@ -629,7 +623,7 @@ exports[`renders reply list 1`] = `
                   className="Indent-level2 coral coral-indent coral-indent-2 Indent-open Indent-openPadded"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                    className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                   >
                     <button
                       aria-label="Collapse comment thread"
@@ -654,13 +648,13 @@ exports[`renders reply list 1`] = `
                       role="article"
                     >
                       <div
-                        className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                       >
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                          className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                         >
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                            className="Comment-username"
                           >
                             <div
                               className="Popover-root"
@@ -696,12 +690,9 @@ exports[`renders reply list 1`] = `
                                 </div>
                               </div>
                             </div>
-                            <div
-                              className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                            />
                           </div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                            className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                           >
                             <button
                               className="BaseButton-root Timestamp-root"
@@ -725,7 +716,7 @@ exports[`renders reply list 1`] = `
                         </div>
                         <div>
                           <div
-                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                           />
                         </div>
                       </div>
@@ -874,6 +865,7 @@ exports[`renders reply list 1`] = `
                             className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                           >
                             <button
+                              aria-label="Report"
                               aria-pressed={false}
                               className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                               data-testid="comment-report-button"
@@ -896,7 +888,6 @@ exports[`renders reply list 1`] = `
                                 >
                                   flag
                                 </i>
-                                Report
                               </span>
                             </button>
                           </div>
@@ -932,7 +923,7 @@ exports[`renders reply list 1`] = `
             className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded"
           >
             <div
-              className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+              className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
             >
               <button
                 aria-label="Collapse comment thread"
@@ -957,13 +948,13 @@ exports[`renders reply list 1`] = `
                 role="article"
               >
                 <div
-                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                    className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                      className="Comment-username"
                     >
                       <div
                         className="Popover-root"
@@ -999,12 +990,9 @@ exports[`renders reply list 1`] = `
                           </div>
                         </div>
                       </div>
-                      <div
-                        className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                      />
                     </div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                     >
                       <button
                         className="BaseButton-root Timestamp-root"
@@ -1028,7 +1016,7 @@ exports[`renders reply list 1`] = `
                   </div>
                   <div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                     />
                   </div>
                 </div>
@@ -1177,6 +1165,7 @@ exports[`renders reply list 1`] = `
                       className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
+                        aria-label="Report"
                         aria-pressed={false}
                         className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                         data-testid="comment-report-button"
@@ -1199,7 +1188,6 @@ exports[`renders reply list 1`] = `
                           >
                             flag
                           </i>
-                          Report
                         </span>
                       </button>
                     </div>

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

@@ -351,7 +351,7 @@ exports[`renders comment stream 1`] = `
                         className="coral coral-indent coral-indent-0 Indent-open"
                       >
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                          className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                         >
                           <button
                             aria-label="Collapse comment thread"
@@ -376,13 +376,13 @@ exports[`renders comment stream 1`] = `
                             role="article"
                           >
                             <div
-                              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                             >
                               <div
-                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                                className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                               >
                                 <div
-                                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                                  className="Comment-username"
                                 >
                                   <div
                                     className="Popover-root"
@@ -418,12 +418,9 @@ exports[`renders comment stream 1`] = `
                                       </div>
                                     </div>
                                   </div>
-                                  <div
-                                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                                  />
                                 </div>
                                 <div
-                                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                                  className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                                 >
                                   <button
                                     className="BaseButton-root Timestamp-root"
@@ -447,7 +444,7 @@ exports[`renders comment stream 1`] = `
                               </div>
                               <div>
                                 <div
-                                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                                 />
                               </div>
                             </div>
@@ -569,6 +566,7 @@ exports[`renders comment stream 1`] = `
                                   className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                                 >
                                   <button
+                                    aria-label="Report"
                                     aria-pressed={false}
                                     className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                                     data-testid="comment-report-button"
@@ -591,7 +589,6 @@ exports[`renders comment stream 1`] = `
                                       >
                                         flag
                                       </i>
-                                      Report
                                     </span>
                                   </button>
                                 </div>
@@ -624,7 +621,7 @@ exports[`renders comment stream 1`] = `
                         className="coral coral-indent coral-indent-0 Indent-open"
                       >
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+                          className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
                         >
                           <button
                             aria-label="Collapse comment thread"
@@ -649,13 +646,13 @@ exports[`renders comment stream 1`] = `
                             role="article"
                           >
                             <div
-                              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                             >
                               <div
-                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                                className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                               >
                                 <div
-                                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                                  className="Comment-username"
                                 >
                                   <div
                                     className="Popover-root"
@@ -691,19 +688,23 @@ exports[`renders comment stream 1`] = `
                                       </div>
                                     </div>
                                   </div>
-                                  <div
-                                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                                  >
-                                    <span
-                                      className="Tag-root coral coral-userTag coral-comment-userTag UserTagsContainer-tag Tag-colorGrey Tag-uppercase"
-                                    >
-                                      Staff
-                                    </span>
-                                  </div>
                                 </div>
                                 <div
-                                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                                  className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                                 >
+                                  <div
+                                    className="Box-root Flex-root Comment-tags Flex-flex Flex-alignCenter"
+                                  >
+                                    <div
+                                      className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                                    >
+                                      <span
+                                        className="Tag-root coral coral-userTag coral-comment-userTag UserTagsContainer-tag Tag-colorGrey Tag-uppercase"
+                                      >
+                                        Staff
+                                      </span>
+                                    </div>
+                                  </div>
                                   <button
                                     className="BaseButton-root Timestamp-root"
                                     onBlur={[Function]}
@@ -726,7 +727,7 @@ exports[`renders comment stream 1`] = `
                               </div>
                               <div>
                                 <div
-                                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                                 />
                               </div>
                             </div>
@@ -848,6 +849,7 @@ exports[`renders comment stream 1`] = `
                                   className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                                 >
                                   <button
+                                    aria-label="Report"
                                     aria-pressed={false}
                                     className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                                     data-testid="comment-report-button"
@@ -870,7 +872,6 @@ exports[`renders comment stream 1`] = `
                                       >
                                         flag
                                       </i>
-                                      Report
                                     </span>
                                   </button>
                                 </div>

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

@@ -459,7 +459,7 @@ exports[`report comment as offensive 1`] = `
         className="coral coral-indent coral-indent-0 Indent-open"
       >
         <div
-          className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+          className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
         >
           <button
             aria-label="Collapse comment thread"
@@ -484,13 +484,13 @@ exports[`report comment as offensive 1`] = `
             role="article"
           >
             <div
-              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
               >
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                  className="Comment-username"
                 >
                   <div
                     className="Popover-root"
@@ -526,12 +526,9 @@ exports[`report comment as offensive 1`] = `
                       </div>
                     </div>
                   </div>
-                  <div
-                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                  />
                 </div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                  className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                 >
                   <button
                     className="BaseButton-root Timestamp-root"
@@ -555,7 +552,7 @@ exports[`report comment as offensive 1`] = `
               </div>
               <div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                 />
               </div>
             </div>
@@ -677,6 +674,7 @@ exports[`report comment as offensive 1`] = `
                   className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                 >
                   <div
+                    aria-label="Reported"
                     className="coral-reportedButton coral-comment-reportedButton ReportButton-reported"
                     data-testid="comment-reported-button"
                   >
@@ -689,7 +687,6 @@ exports[`report comment as offensive 1`] = `
                       >
                         flag
                       </i>
-                      Reported
                     </div>
                   </div>
                 </div>

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

@@ -24,7 +24,7 @@ exports[`renders comment stream 1`] = `
             className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded"
           >
             <div
-              className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+              className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
             >
               <button
                 aria-label="Collapse comment thread"
@@ -49,13 +49,13 @@ exports[`renders comment stream 1`] = `
                 role="article"
               >
                 <div
-                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                    className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                      className="Comment-username"
                     >
                       <div
                         className="Popover-root"
@@ -91,12 +91,9 @@ exports[`renders comment stream 1`] = `
                           </div>
                         </div>
                       </div>
-                      <div
-                        className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                      />
                     </div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                     >
                       <button
                         className="BaseButton-root Timestamp-root"
@@ -120,7 +117,7 @@ exports[`renders comment stream 1`] = `
                   </div>
                   <div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                     />
                   </div>
                 </div>
@@ -242,6 +239,7 @@ exports[`renders comment stream 1`] = `
                       className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
+                        aria-label="Report"
                         aria-pressed={false}
                         className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                         data-testid="comment-report-button"
@@ -264,7 +262,6 @@ exports[`renders comment stream 1`] = `
                           >
                             flag
                           </i>
-                          Report
                         </span>
                       </button>
                     </div>

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

@@ -15,7 +15,7 @@ exports[`renders deepest comment with link 1`] = `
         className="Indent-level3 coral coral-indent coral-indent-3 Indent-open Indent-openPadded"
       >
         <div
-          className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+          className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
         >
           <button
             aria-label="Collapse comment thread"
@@ -40,13 +40,13 @@ exports[`renders deepest comment with link 1`] = `
             role="article"
           >
             <div
-              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+              className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
             >
               <div
-                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
               >
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                  className="Comment-username"
                 >
                   <div
                     className="Popover-root"
@@ -82,12 +82,9 @@ exports[`renders deepest comment with link 1`] = `
                       </div>
                     </div>
                   </div>
-                  <div
-                    className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                  />
                 </div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                  className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                 >
                   <button
                     className="BaseButton-root Timestamp-root"
@@ -111,7 +108,7 @@ exports[`renders deepest comment with link 1`] = `
               </div>
               <div>
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                 />
               </div>
             </div>
@@ -260,6 +257,7 @@ exports[`renders deepest comment with link 1`] = `
                   className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                 >
                   <button
+                    aria-label="Report"
                     aria-pressed={false}
                     className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                     data-testid="comment-report-button"
@@ -282,7 +280,6 @@ exports[`renders deepest comment with link 1`] = `
                       >
                         flag
                       </i>
-                      Report
                     </span>
                   </button>
                 </div>

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

@@ -25,7 +25,7 @@ exports[`renders app with comment stream 1`] = `
             className="coral coral-indent coral-indent-0 Indent-open"
           >
             <div
-              className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+              className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
             >
               <button
                 aria-label="Collapse comment thread"
@@ -50,13 +50,13 @@ exports[`renders app with comment stream 1`] = `
                 role="article"
               >
                 <div
-                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                    className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                      className="Comment-username"
                     >
                       <div
                         className="Popover-root"
@@ -92,12 +92,9 @@ exports[`renders app with comment stream 1`] = `
                           </div>
                         </div>
                       </div>
-                      <div
-                        className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                      />
                     </div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                     >
                       <button
                         className="BaseButton-root Timestamp-root"
@@ -121,7 +118,7 @@ exports[`renders app with comment stream 1`] = `
                   </div>
                   <div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                     />
                   </div>
                 </div>
@@ -243,6 +240,7 @@ exports[`renders app with comment stream 1`] = `
                       className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
+                        aria-label="Report"
                         aria-pressed={false}
                         className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                         data-testid="comment-report-button"
@@ -265,7 +263,6 @@ exports[`renders app with comment stream 1`] = `
                           >
                             flag
                           </i>
-                          Report
                         </span>
                       </button>
                     </div>
@@ -298,7 +295,7 @@ exports[`renders app with comment stream 1`] = `
             className="coral coral-indent coral-indent-0 Indent-open"
           >
             <div
-              className="Box-root Flex-root Flex-flex Flex-alignFlexStart gutter Flex-spacing-1"
+              className="Box-root Flex-root Flex-flex Flex-alignBaseline gutter Flex-spacing-1"
             >
               <button
                 aria-label="Collapse comment thread"
@@ -323,13 +320,13 @@ exports[`renders app with comment stream 1`] = `
                 role="article"
               >
                 <div
-                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
+                    className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
+                      className="Comment-username"
                     >
                       <div
                         className="Popover-root"
@@ -365,12 +362,9 @@ exports[`renders app with comment stream 1`] = `
                           </div>
                         </div>
                       </div>
-                      <div
-                        className="Box-root Flex-root Flex-flex Flex-alignCenter"
-                      />
                     </div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                      className="Box-root Flex-root Flex-flex Flex-wrap Flex-alignCenter Flex-directionRow"
                     >
                       <button
                         className="BaseButton-root Timestamp-root"
@@ -394,7 +388,7 @@ exports[`renders app with comment stream 1`] = `
                   </div>
                   <div>
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
                     />
                   </div>
                 </div>
@@ -516,6 +510,7 @@ exports[`renders app with comment stream 1`] = `
                       className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifySpaceBetween Flex-alignCenter Flex-directionRow gutter"
                     >
                       <button
+                        aria-label="Report"
                         aria-pressed={false}
                         className="BaseButton-root Button-base Button-flat Button-fontSizeSmall Button-textAlignCenter Button-fontFamilyPrimary Button-fontWeightPrimarySemiBold Button-paddingSizeExtraSmall Button-colorSecondary coral coral-reportButton coral-comment-reportButton"
                         data-testid="comment-report-button"
@@ -538,7 +533,6 @@ exports[`renders app with comment stream 1`] = `
                           >
                             flag
                           </i>
-                          Report
                         </span>
                       </button>
                     </div>

src/core/client/stream/test/comments/stream/ignoreUser.spec.tsx

@@ -178,6 +178,7 @@ it("render stream with regular comments, ignore user button should be present",
   await waitForElement(() =>
     within(testRenderer.root).getByTestID("comments-allComments-log")
   );
+
   const commenter = commenters[0];
   const username = within(tabPane).getByText(commenter.username!, {
     selector: "button",

src/core/client/ui/components/v2/MatchMedia/MatchMedia.tsx

@@ -19,6 +19,7 @@ interface Props {
 
   /** less than equals width. */
   ltWidth?: Breakpoints;
+
   children: ReactNode | ((matches: boolean) => React.ReactNode);
   className?: string;
   component?:

src/core/client/ui/components/v2/Tag/Tag.css

@@ -14,8 +14,8 @@ $tag-pill-bg: inherit;
   font-family: var(--font-family-primary);
   font-weight: var(--font-weight-primary-semi-bold);
   color: $tag-text-color;
-  line-height: 1.14;
-  padding: var(--spacing-1);
+  padding-left: var(--spacing-1);
+  padding-right: var(--spacing-1);
   white-space: nowrap;
   border-radius: 2px;
   display: inline-block;
@@ -43,7 +43,7 @@ $tag-pill-bg: inherit;
 
 .variantPill {
   border-radius: 20px;
-  padding: 2px 10px;
+  padding: 0px 10px;
   background-color: $tag-pill-bg;
   &.colorGrey {
     border: 1px solid $tag-color-grey;

src/core/client/ui/theme/breakpoints.ts

@@ -1,5 +1,6 @@
 const breakpoints = {
   xs: 320,
+  mobile: 400,
   sm: 640,
   md: 1024,
   lg: 1400,