[CORL-1233] Mobile display fixes (#3067)

* mobile display fixes

* show button full text at larger breakpoint

* update snaps

* hardcode in media query for reaction buttons

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

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

@@ -2,6 +2,7 @@ $commentTimestampColor: var(--palette-grey-500);
 
 .root {
   flex: 1;
+  overflow: hidden;
 }
 
 .highlight {

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

@@ -38,7 +38,10 @@ $commenterActionEditColorActive: var(--palette-primary-300);
 }
 
 .actionBar {
-  min-width: 150px;
+  min-width: 100px;
+  @media (min-width: $breakpoints-xs) {
+    min-width: 150px;
+  }
 }
 
 .actionButton {

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

@@ -1,14 +1,9 @@
 import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
+import Responsive from "react-responsive";
 
 import CLASSES from "coral-stream/classes";
-import {
-  ClickOutside,
-  Flex,
-  Icon,
-  MatchMedia,
-  Popover,
-} from "coral-ui/components/v2";
+import { ClickOutside, Flex, Icon, Popover } from "coral-ui/components/v2";
 import { Button } from "coral-ui/components/v3";
 
 import PermalinkPopover from "./PermalinkPopover";
@@ -67,11 +62,11 @@ const Permalink: FunctionComponent<PermalinkProps> = ({
             >
               <Flex alignItems="center" container="span">
                 <Icon className={styles.icon}>share</Icon>
-                <MatchMedia gtWidth="xs">
+                <Responsive minWidth={400}>
                   <Localized id="comments-permalinkButton-share">
                     <span>Share</span>
                   </Localized>
-                </MatchMedia>
+                </Responsive>
               </Flex>
             </Button>
           </Localized>

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

@@ -1,8 +1,9 @@
 import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
 import React from "react";
+import Responsive from "react-responsive";
 
-import { Flex, Icon, MatchMedia } from "coral-ui/components/v2";
+import { Flex, Icon } from "coral-ui/components/v2";
 import { Button } from "coral-ui/components/v3";
 
 import styles from "./ReactionButton.css";
@@ -59,7 +60,7 @@ function render(props: ReactionButtonProps) {
             {reacted ? (iconActive ? iconActive : icon) : icon}
           </Icon>
         )}
-        <MatchMedia gtWidth="xs">
+        <Responsive minWidth={400}>
           {props.isQA ? (
             <span>
               {reacted ? (
@@ -71,7 +72,7 @@ function render(props: ReactionButtonProps) {
           ) : (
             <span>{reacted ? labelActive : label}</span>
           )}
-        </MatchMedia>
+        </Responsive>
         {!!totalReactions && (
           <span className={styles.totalReactions}>{totalReactions}</span>
         )}

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

@@ -1,7 +1,8 @@
 import { Localized } from "@fluent/react/compat";
 import React, { EventHandler, FunctionComponent, MouseEvent } from "react";
+import Responsive from "react-responsive";
 
-import { Flex, Icon, MatchMedia } from "coral-ui/components/v2";
+import { Flex, Icon } from "coral-ui/components/v2";
 import { Button } from "coral-ui/components/v3";
 
 import styles from "./ReplyButton.css";
@@ -31,11 +32,11 @@ const ReplyButton: FunctionComponent<Props> = (props) => (
     >
       <Flex alignItems="center" container="span">
         <Icon className={styles.icon}>reply</Icon>
-        <MatchMedia gtWidth="xs">
+        <Responsive minWidth={400}>
           <Localized id="comments-replyButton-reply">
             <span>Reply</span>
           </Localized>
-        </MatchMedia>
+        </Responsive>
       </Flex>
     </Button>
   </Localized>

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

@@ -3,6 +3,10 @@ $commentsConversationLinkColorHovered: var(--palette-primary-700);
 $commentsConversationLinkColorActive: var(--palette-primary-800);
 
 .conversationLink {
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
+  text-align: left;
   &.sizeRegular {
     padding: 0;
   }

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

@@ -29,8 +29,8 @@ exports[`renders correctly 1`] = `
       >
         reply
       </ForwardRef(forwardRef)>
-      <MatchMediaWithContext
-        gtWidth="xs"
+      <MediaQuery
+        minWidth={400}
       >
         <Localized
           id="comments-replyButton-reply"
@@ -39,7 +39,7 @@ exports[`renders correctly 1`] = `
             Reply
           </span>
         </Localized>
-      </MatchMediaWithContext>
+      </MediaQuery>
     </ForwardRef(forwardRef)>
   </ForwardRef(forwardRef)>
 </Localized>