fixed audio grid on mobile

package.json

@@ -14,6 +14,10 @@
     "url": "https://github.com/muerwre/my-empty-react-project"
   },
   "devDependencies": {
+    "@types/classnames": "^2.2.7",
+    "@types/node": "^11.13.22",
+    "@types/ramda": "^0.26.33",
+    "@types/react": "16.9.23",
     "@babel/cli": "^7.6.4",
     "@babel/preset-env": "^7.6.3",
     "@babel/types": "7.5.5",
@@ -50,10 +54,6 @@
   "license": "MIT",
   "dependencies": {
     "@hot-loader/react-dom": "^16.10.2",
-    "@types/classnames": "^2.2.7",
-    "@types/node": "^11.13.22",
-    "@types/ramda": "^0.26.33",
-    "@types/react": "16.8.23",
     "@typescript-eslint/eslint-plugin": "^1.13.0",
     "@typescript-eslint/parser": "^1.13.0",
     "axios": "^0.18.0",
@@ -87,8 +87,8 @@
     "node-sass": "^4.11.0",
     "raleway-cyrillic": "^4.0.2",
     "ramda": "^0.26.1",
-    "react": "16.8.6",
-    "react-dom": "^16.10.2",
+    "react": "16.13.0",
+    "react-dom": "^16.13.0",
     "react-hot-loader": "^4.12.15",
     "react-packery-component": "^1.0.2",
     "react-redux": "^6.0.1",

src/components/editors/SortableAudioGrid/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { SortableContainer } from 'react-sortable-hoc';
 import { AudioUpload } from '~/components/upload/AudioUpload';
 import * as styles from './styles.scss';
-import { SortableImageGridItem } from '~/components/editors/SortableImageGridItem';
+import { SortableAudioGridItem } from '~/components/editors/SortableAudioGridItem';
 import { IFile } from '~/redux/types';
 import { IUploadStatus } from '~/redux/uploads/reducer';
 import { AudioPlayer } from '~/components/media/AudioPlayer';
@@ -23,15 +23,15 @@ const SortableAudioGrid = SortableContainer(
         {items
           .filter(file => file && file.id)
           .map((file, index) => (
-          <SortableImageGridItem key={file.id} index={index} collection={0}>
+            <SortableAudioGridItem key={file.id} index={index} collection={0}>
               <AudioPlayer file={file} onDrop={onDrop} onTitleChange={onTitleChange} isEditing />
-          </SortableImageGridItem>
+            </SortableAudioGridItem>
           ))}
 
         {locked.map((item, index) => (
-        <SortableImageGridItem key={item.temp_id} index={index} collection={1} disabled>
+          <SortableAudioGridItem key={item.temp_id} index={index} collection={1} disabled>
             <AudioUpload title={item.name} progress={item.progress} is_uploading />
-        </SortableImageGridItem>
+          </SortableAudioGridItem>
         ))}
       </div>
     )

src/components/editors/SortableAudioGrid/styles.scss

@@ -6,8 +6,4 @@
   grid-row-gap: $gap;
   grid-template-columns: auto;
   grid-template-rows: $comment_height;
-
-  @media (max-width: 600px) {
-    grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
-  }
 }

src/components/editors/SortableAudioGridItem/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SortableElement } from 'react-sortable-hoc';
 
-import * as styles from './styles.scss';
+import styles from './styles.scss';
 
 const SortableAudioGridItem = SortableElement(({ children }) => (
   <div className={styles.item}>{children}</div>

src/components/input/InputText/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ChangeEvent, useCallback, useState, useEffect } from 'react';
+import React, { FC, ChangeEvent, useCallback, useState, useEffect, LegacyRef } from 'react';
 import classNames from 'classnames';
 import * as styles from '~/styles/inputs.scss';
 import { Icon } from '~/components/input/Icon';
@@ -19,7 +19,7 @@ const InputText: FC<IInputTextProps> = ({
   ...props
 }) => {
   const [focused, setFocused] = useState(false);
-  const [inner_ref, setInnerRef] = useState();
+  const [inner_ref, setInnerRef] = useState<HTMLInputElement>(null);
 
   const onInput = useCallback(
     ({ target }: ChangeEvent<HTMLInputElement>) => handler(target.value),