Merge remote-tracking branch 'origin/master'

src/components/comment/CommentContent/index.tsx

@@ -15,6 +15,7 @@ import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import { CommentForm } from '~/components/comment/CommentForm';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import { selectNode } from '~/redux/node/selectors';
+import classNames from 'classnames';
 
 interface IProps {
   comment: IComment;
@@ -84,7 +85,9 @@ const CommentContent: FC<IProps> = memo(({ comment, can_edit, onDelete, modalSho
         <div className={classnames(styles.block, styles.block_image)}>
           {menu}
 
-          <div className={styles.images}>
+          <div
+            className={classNames(styles.images, { [styles.multiple]: groupped.image.length > 1 })}
+          >
             {groupped.image.map((file, index) => (
               <div key={file.id} onClick={() => modalShowPhotoswipe(groupped.image, index)}>
                 <img src={getURL(file, PRESETS['600'])} alt={file.name} />

src/components/comment/CommentContent/styles.module.scss

@@ -1,6 +1,5 @@
 @import "src/styles/variables";
-
-@import 'flexbin/flexbin.scss';
+@import "~flexbin/flexbin";
 
 .wrap {
   position: relative;
@@ -114,7 +113,6 @@
   font: $font_12_regular;
   color: transparentize($color: white, $amount: 0.8);
   padding: 0 6px 2px;
-  border-radius: 0 0 $radius 0;
   z-index: 2;
   background: $comment_bg;
   border-radius: 4px;
@@ -123,10 +121,29 @@
 }
 
 .images {
-  @include flexbin(240px, 5px);
-
   img {
+    max-height: 400px;
     border-radius: $radius;
+    max-width: 100%;
+  }
+
+  &.multiple {
+    img {
+      max-height: none;
+    }
+
+    // Desktop devices
+    @include flexbin(25vh, $flexbin-space);
+
+    // Tablet devices
+    @media (max-width: $flexbin-tablet-max) {
+      @include flexbin($flexbin-row-height-tablet, $flexbin-space-tablet);
+    }
+
+    // Phone devices
+    @media (max-width: $flexbin-phone-max) {
+      @include flexbin($flexbin-row-height-phone, $flexbin-space-phone);
+    }
   }
 }