Hide action labels on mobile

client/coral-embed-stream/style/default.css

@@ -459,14 +459,3 @@ button.comment__action-button[disabled],
   width: initial;
 }
 
-
-@media (min-device-width : 300px) and (max-device-width : 420px) {
-  .commentActionsLeft.comment__action-container .coral-plugin-replies-reply-button {
-    visibility: collapse;
-    margin-left: -30px;
-  }
-
-  .commentActionsLeft.comment__action-container .coral-plugin-replies-reply-button .coral-plugin-replies-icon {
-    visibility: visible;
-  }
-}

client/coral-plugin-replies/ReplyButton.css

@@ -0,0 +1,5 @@
+@media (max-width: 425px) {
+  .label {
+    display: none;
+  }
+}

client/coral-plugin-replies/ReplyButton.js

@@ -2,16 +2,19 @@ import React, {PropTypes} from 'react';
 
 import t from 'coral-framework/services/i18n';
 
-import classnames from 'classnames';
+import cn from 'classnames';
+import styles from './ReplyButton.css';
 
 const name = 'coral-plugin-replies';
 
 const ReplyButton = ({onClick}) => {
   return (
     <button
-      className={classnames(`${name}-reply-button`)}
+      className={cn(`${name}-reply-button`)}
       onClick={onClick}>
-      {t('reply')}
+      <span className={cn(`${name}-label`, styles.label)}>
+        {t('reply')}
+      </span>
       <i className={`${name}-icon material-icons`}
         aria-hidden={true}>reply</i>
     </button>