better image thumbs on comments

package-lock.json

@@ -8124,6 +8124,11 @@
       "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=",
       "dev": true
     },
+    "flexbin": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/flexbin/-/flexbin-0.2.0.tgz",
+      "integrity": "sha1-ASYwbT1ZX8t9/LhxSbnJWZ/49Ok="
+    },
     "flush-write-stream": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",

package.json

@@ -77,6 +77,7 @@
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-react-hooks": "^1.7.0",
+    "flexbin": "^0.2.0",
     "history": "^4.7.2",
     "http-errors": "~1.6.2",
     "less": "^3.8.1",

src/components/node/Comment/index.tsx

@@ -27,7 +27,9 @@ const Comment: FC<IProps> = ({ comment, is_empty, is_loading, className, photo,
     {comment.files && comment.files.length > 0 && (
       <div className={styles.images}>
         {comment.files.map(file => (
-          <ImageUpload thumb={getURL(file.url)} />
+          <div>
+            <img src={getURL(file.url)} />
+          </div>
         ))}
       </div>
     )}

src/components/node/Comment/styles.scss

@@ -7,9 +7,14 @@
   }
 }
 
+@import 'flexbin/flexbin.scss';
+
 .images {
   padding: 10px;
-  display: grid;
+
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  @include flexbin(150px, 10px);
-  column-gap: $grid_line;
+
+  img {
+    border-radius: 4px;
+  }
 }