change the position and erased callouts and lengthened

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

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

src/client/styles/scss/_comment_growi.scss

@@ -5,7 +5,7 @@
     margin-left: 4.5em;
 
     @include media-breakpoint-down(xs) {
-      margin-left: 3.5em;
+      margin-left: 0em;
     }
 
     // speech balloon
@@ -20,7 +20,7 @@
       border-left-width: 0;
 
       @include media-breakpoint-down(xs) {
-        top: 1em;
+        display: none;
       }
     }
   }
@@ -81,6 +81,7 @@
   .page-comment-reply {
     margin-top: 1em;
   }
+
   // remove margin after hidden replies
   .page-comments-hidden-replies + .page-comment-reply {
     margin-top: 0;