atlas revamp is responsive now

css/items.css

@@ -61,22 +61,23 @@
 }
 
 .reorder-filter {
-    height: 75%;
+    height: 2ch;
     cursor: pointer;
 }
 
 input.filter-input {
     width: 27ch!important;
+    max-width: 90%;
     display: inline-block;
 }
 
 .asc-icon {
     opacity: 0.25;
-    width: 1rem;
+    width: 1.75ch;
 }
 .desc-icon {
     opacity: 0.25;
-    width: 1rem;
+    width: 1.75ch;
     transform: rotate(180deg);
 }
 img.asc-sel {
@@ -90,4 +91,11 @@ input.min-max-input {
 
 #filter-container > div > div > * {
     margin: 0 2px;
+}
+
+/* item display */
+@media (min-width: 576px) and (max-width: 991px) {
+    div.col-sm-6 {
+        width: 100%;
+    }
 }

items/index.html

@@ -77,7 +77,7 @@
         </div>
         <div class = "container py-5 vh-100 mx-0 mx-lg-auto scaled-font">
             <div class = "row">
-                <div class = "row">
+                <div class = "row" style = "margin-top: 3ch;">
                     <div class = "col text-end">
                         <a href = "../items_adv/">Advanced Item Search</a>
                     </div>
@@ -151,6 +151,7 @@
             </div>
         </div>
         <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script>
+        <script type="text/javascript" src="../js/drag_drop_touch.js"></script>
         <script type="text/javascript" src="../js/utils.js"></script>
         <script type="text/javascript" src="../js/build_utils.js"></script>
         <script type="text/javascript" src="../js/icons.js"></script>