fix search minimal adaptive

src/App.scss

@@ -1,10 +1,11 @@
 $breakpoint-mobile: 720px;
 $breakpoint-tablet: 1540px;
 
+
 .App {
   height: auto;
  text-align: center;
-  background: black;
+  //background: black;
 
 }
 
@@ -68,7 +69,6 @@ input {
   height: 700px;
   @media (max-width: $breakpoint-tablet) {
     height: 400px;
-    margin-left: -100px;
   }
 }
 
@@ -93,8 +93,6 @@ input {
 
 
 .Header {
-  position: fixed;
-  top: 0px;
   width: 100%;
   display: flex;
   justify-content: space-between;
@@ -108,41 +106,48 @@ input {
     color: lawngreen;
   }
 
+  @media (max-width: $breakpoint-mobile) {
+    display: flex;
+    flex-direction: column;
+    h3 {
+      margin: 8px;
+      font-size: 20px;
+    }
+  }
+
 }
 
 main {
   background-image: url("background.jpg");
-  background-repeat: no-repeat;
   background-attachment:fixed;
-  background-position:  200px 0px;
-  overflow: auto;
-  margin-top: 112px;
-  height: 80vh;
+  background-position: top 0px;
+  background-position: right 0px;
   display: flex;
   flex-direction: row;
+  min-height: 90vh;
   @media (max-width: $breakpoint-tablet) {
-    margin-top: 92px;
+  }
+  @media(max-width: $breakpoint-mobile) {
+    flex-direction: column;
   }
 }
 
+
 .Aside {
-  z-index: 1;
-  height: 89%;
-  top: 114px;
-  position: fixed;
-  width: 430px;
+  min-width: 22%;
   background-color: red;
   @media (max-width: $breakpoint-tablet) {
     width: 320px;
-    top: 96px;
+    min-width: 30%;
+  }
+  @media (max-width: $breakpoint-mobile) {
+    width: 100%
   }
 }
 
 .Content {
-  margin-left: 440px;
   margin-bottom: 120px;
   @media (max-width: $breakpoint-tablet) {
-    margin-left: 330px;
   }
 }
 
@@ -166,9 +171,7 @@ main {
 }
 
 footer {
-  z-index: 0;
-  width: 80%;
-  height: 100px;
+  width: 100%;
   background-color: #303030;
   position: fixed;
 right: 0px;
@@ -192,11 +195,17 @@ right: 0px;
   flex-direction: row;
      margin-top: 40px;
   margin-right: 20px;
+
+
 }
 
 .RegColumn {
   display: flex;
   flex-direction: column;
+  @media (max-width: $breakpoint-mobile) {
+width: 100%;
+
+  }
 }
 
 
@@ -217,6 +226,10 @@ right: 0px;
     padding: 6px;
     width: 600px;
   }
+  @media (max-width: $breakpoint-mobile) {
+    width: auto;
+    font-size: 14px;
+  }
 
 }
 
@@ -275,6 +288,10 @@ right: 0px;
 
 .hello-column {
   display: flex;
+  @media (max-width: $breakpoint-mobile) {
+    flex-direction: column;
+  }
+
 }
 
 

src/pages/my-tracks/my-tracks.js

@@ -50,11 +50,10 @@ const CSortableComponent = connect(state => ({ playlist: state?.promise?.playlis
 
 export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
     <>
-        <CPlaylistDropZone >
+        <CPlaylistDropZone />
             <CPreloaded promiseName='playlistById'>
                 <CSortableComponent />
             </CPreloaded>
-        </CPlaylistDropZone >
     </>
 
 

src/pages/tools/playlistdropzone.js

@@ -15,13 +15,14 @@ function PlaylistDropZone({tracks=[], onLoad, children }) {
         console.log(tracks, files.current, acceptedFiles)
         onLoad(files.current);
        }, []);
-    const { getRootProps, isDragActive } = useDropzone({ onDrop });
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
     return (
         <div className='drop-zone'{...getRootProps()}>
+            <input {...getInputProps()} />
             {isDragActive ? (
                 <p >Перетащите файл сюда ...</p>
             ) : (
-                <p>Для добавления трэка перетащите файлы в плейлист</p>
+                <p>Для добавления трэка нажмите или перетащите файлы СЮДА</p>
             )}
             {children}
         </div>

src/pages/tools/search.js

@@ -46,7 +46,7 @@ const SearchResult = ({ trackFind }) => {
     return (
         <>
             {trackFind.map((track) => (
-                <CTrack trackP={track} />
+                <CTrack track={track} />
             ))}
         </>
     );