From c37f727aad65f9cceb2348584ac3d7e1924d16dc Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 23 Jun 2021 20:36:58 +0700
Subject: [PATCH 1/2] fixed flexbin props

---
 .../comment/CommentContent/index.tsx          |  6 ++++-
 .../comment/CommentContent/styles.module.scss | 27 +++++++++++++++----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/components/comment/CommentContent/index.tsx b/src/components/comment/CommentContent/index.tsx
index 318380f3..347aa1e9 100644
--- a/src/components/comment/CommentContent/index.tsx
+++ b/src/components/comment/CommentContent/index.tsx
@@ -15,6 +15,8 @@ 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';
+import 'flexbin/flexbin.scss';
 
 interface IProps {
   comment: IComment;
@@ -84,7 +86,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} />
diff --git a/src/components/comment/CommentContent/styles.module.scss b/src/components/comment/CommentContent/styles.module.scss
index cb02f44f..ac9a4bcf 100644
--- a/src/components/comment/CommentContent/styles.module.scss
+++ b/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);
+    }
   }
 }
 

From 9c6480caff84a9e908a94e18a7a6861d81e9d6ef Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 23 Jun 2021 20:37:10 +0700
Subject: [PATCH 2/2] removed unused import

---
 src/components/comment/CommentContent/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/comment/CommentContent/index.tsx b/src/components/comment/CommentContent/index.tsx
index 347aa1e9..cccdb985 100644
--- a/src/components/comment/CommentContent/index.tsx
+++ b/src/components/comment/CommentContent/index.tsx
@@ -16,7 +16,6 @@ import { CommentForm } from '~/components/comment/CommentForm';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import { selectNode } from '~/redux/node/selectors';
 import classNames from 'classnames';
-import 'flexbin/flexbin.scss';
 
 interface IProps {
   comment: IComment;