fixed a line break on mobile

src/client/js/components/PageComment/Comment.jsx

@@ -87,7 +87,7 @@ class Comment extends React.PureComponent {
   }
 
   getRootClassName(comment) {
-    let className = 'page-comment';
+    let className = 'page-comment flex-column';
 
     const { revisionId, revisionCreatedAt } = this.props.pageContainer.state;
     if (comment.revision === revisionId) {
@@ -197,7 +197,9 @@ class Comment extends React.PureComponent {
           />
         ) : (
           <div id={commentId} className={rootClassName}>
-            <UserPicture user={creator} />
+            <div className="page-comment-writer">
+              <UserPicture user={creator} />
+            </div>
             <div className="page-comment-main">
               <div className="page-comment-creator">
                 <Username user={creator} />

src/client/js/components/User/UserPicture.jsx

@@ -32,7 +32,7 @@ export default class UserPicture extends React.Component {
   }
 
   getClassName() {
-    const className = ['rounded-circle', 'picture', 'd-inline-block'];
+    const className = ['rounded-circle', 'picture'];
     // size
     if (this.props.size) {
       className.push(`picture-${this.props.size}`);
@@ -41,11 +41,6 @@ export default class UserPicture extends React.Component {
     return className.join(' ');
   }
 
-  getBlockClassName() {
-    const className = ['d-inline-block', 'd-sm-block'];
-    return className.join(' ');
-  }
-
   renderForNull() {
     return (
       <img
@@ -74,7 +69,7 @@ export default class UserPicture extends React.Component {
     return (
       (this.props.withoutLink)
         ? <span>{imgElem}</span>
-        : <a href={`/user/${user.username}`} className={this.getBlockClassName()}>{imgElem}</a>
+        : <a href={`/user/${user.username}`}>{imgElem}</a>
     );
   }
 

src/client/styles/scss/_comment_growi.scss

@@ -48,6 +48,12 @@
     }
   }
 
+  .page-comment-writer {
+    @include media-breakpoint-down(xs) {
+      height: 50px;
+    }
+  }
+
   .page-comment {
     position: relative;