fixed audio grid on mobile

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';
@@ -19,22 +19,22 @@ const SortableAudioGrid = SortableContainer(
     onDrop: (file_id: IFile['id']) => void;
     onTitleChange: (file_id: IFile['id'], title: IFile['metadata']['title']) => void;
   }) => (
-    <div className={styles.grid}>
-      {items
-        .filter(file => file && file.id)
-        .map((file, index) => (
-          <SortableImageGridItem key={file.id} index={index} collection={0}>
-            <AudioPlayer file={file} onDrop={onDrop} onTitleChange={onTitleChange} isEditing />
-          </SortableImageGridItem>
-        ))}
+      <div className={styles.grid}>
+        {items
+          .filter(file => file && file.id)
+          .map((file, index) => (
+            <SortableAudioGridItem key={file.id} index={index} collection={0}>
+              <AudioPlayer file={file} onDrop={onDrop} onTitleChange={onTitleChange} isEditing />
+            </SortableAudioGridItem>
+          ))}
 
-      {locked.map((item, index) => (
-        <SortableImageGridItem key={item.temp_id} index={index} collection={1} disabled>
-          <AudioUpload title={item.name} progress={item.progress} is_uploading />
-        </SortableImageGridItem>
-      ))}
-    </div>
-  )
+        {locked.map((item, index) => (
+          <SortableAudioGridItem key={item.temp_id} index={index} collection={1} disabled>
+            <AudioUpload title={item.name} progress={item.progress} is_uploading />
+          </SortableAudioGridItem>
+        ))}
+      </div>
+    )
 );
 
 export { SortableAudioGrid };

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),