Responsive UI.

src/styles/App.css

@@ -1,3 +1,16 @@
+@media (min-width: 650px) {
+  .search {
+    width: 35%;
+    min-width: 300px;
+  }
+}
+
+@media (max-width: 650px) {
+  .search {
+    width: 200px;
+  }
+}
+
 .App {
   min-height: 100vh;
   display: flex;
@@ -21,8 +34,6 @@
   font-size: 1.2rem;
   padding-left: 10px;
   border: none;
-  width: 35%;
-  min-width: 300px;
   box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
 }
 

src/styles/Filters.css

@@ -1,3 +1,19 @@
+@media (min-width: 800px) {
+    .filter {
+        left: 35%;
+        right: 35%;
+        min-width: 200px;
+    }
+}
+
+@media (max-width: 800px) {
+    .filter {
+        left: 20%;
+        right: 20%;
+        min-width: 100px;
+    }
+}
+
 .filter-overlay {
     animation: fadein 0.2s;
     background-color: black;
@@ -20,10 +36,7 @@
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
     padding: 5px;
     top: 15%;
-    left: 30%;
-    right: 30%;
-    min-width: 300px;
-    position: absolute;
+    position: fixed;
     -moz-user-select: none;
     -webkit-user-select: none;
     user-select: none;

src/styles/List.css

@@ -1,3 +1,62 @@
+@media (min-width: 650px) {
+  .list-entity-content {
+    margin-left: 70px;
+  }
+
+  .img-content-grp {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .etc {
+    display: flex;
+    align-items: center;
+  }
+
+  .list-row {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+  }
+
+  .list a {
+    text-decoration: none;
+  }
+}
+
+@media (max-width: 650px) {
+  .list-entity-content {
+    margin-top: 50px;
+    text-align: center;
+  }
+
+  .list-row {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+  }
+  .etc {
+    display: flex;
+    align-items: center;
+  }
+
+  .img-content-grp {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .list a {
+    text-decoration: underline;
+  }
+}
+
 .list {
   width: 100%;
   text-align: left;
@@ -18,26 +77,12 @@
   transition: opacity 0.3s;
 }
 
-.img-content-grp {
-  display: flex;
-  align-items: center;
-}
-
-.list-row {
-  margin-top: 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
-}
-
 .list-row:hover img {
   opacity: 90%;
 }
 
 .list-entity-content {
   z-index: 0;
-  margin-left: 70px;
   padding: 20px;
   justify-content: space-between;
   display: flex;
@@ -48,7 +93,6 @@
   white-space: nowrap;
   font-family: 'Font Awesome 5 Free';
   pointer-events: all;
-  text-decoration: none;
   font-size: 1rem;
 }
 
@@ -80,6 +124,7 @@
 
 .row-name {
   font-size: 2rem;
+  word-break: break-all;
 }
 
 .tags {
@@ -90,6 +135,7 @@
   padding: 10px;
   font-size: 1rem;
   border-radius: 5px;
+  flex-wrap: wrap;
 }
 
 .tags div {
@@ -106,11 +152,6 @@
   font-size: 1rem;
 }
 
-.etc {
-  display: flex;
-  align-items: center;
-}
-
 .delete {
   margin: 20px 20px 20px 0px;
   background-color:#273949;

src/styles/SendItem.css

@@ -1,3 +1,20 @@
+@media (min-width: 800px) {
+    .box {
+        left: 30%;
+        right: 30%;
+        min-width: 300px;
+    }
+}
+
+@media (max-width: 800px) {
+    .box {
+        left: 15%;
+        right: 15%;
+        min-width: 200px;
+    }
+}
+
+
 .add-overlay {
     animation: fadein 0.2s;
     background-color: black;
@@ -15,12 +32,9 @@
     border-width: 1px;
     border-color: rgb(141, 141, 141);
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
-    position: absolute;
+    position: fixed;
     z-index: 2;
     top: 15%;
-    left: 30%;
-    right: 30%;
-    min-width: 300px;
     background-color: #1f2c38;
     overflow-x: hidden;
     overflow-y: auto;

src/styles/Sort.css

@@ -1,3 +1,19 @@
+@media (min-width: 800px) {
+    .sort {
+        left: 35%;
+        right: 35%;
+        min-width: 200px;
+    }
+}
+
+@media (max-width: 800px) {
+    .sort {
+        left: 20%;
+        right: 20%;
+        min-width: 100px;
+    }
+}
+
 .sort-overlay {
     animation: fadein 0.2s;
     background-color: black;
@@ -20,9 +36,7 @@
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
     padding: 5px;
     top: 15%;
-    left: 25%;
-    right: 25%;
-    position: absolute;
+    position: fixed;
     -moz-user-select: none;
     -webkit-user-select: none;
     user-select: none;