rework save changes button and mobile layout for filter

assets/sass/pages/_downloads.scss

@@ -90,6 +90,7 @@
   }
 
   .downloads-filter-content {
+    position: relative;
     display: none;
     // this row spans to the edge
     grid-column: span 3;
@@ -132,17 +133,19 @@
     }
 
     .filter-buttons {
-      display: flex;
-      justify-content: flex-end;
-      margin-top: 20px;
+      position: absolute;
+      top: 20px;
+      height: 50px;
+      right: 0;
+      width: 50px;
 
       button {
-        padding: 15px;
+        width: 50px;
+        height: 50px;
         background-color: $purple;
         color: #fff;
         border: none;
         border-radius: 5px;
-        margin-left: 10px;
         cursor: pointer;
       }
     }
@@ -216,6 +219,13 @@
         width: 100%;
       }
     }
+    .downloads-filter-content > div {
+      grid-template-columns: repeat(1, 1fr);
+
+      & > div {
+        margin-top: 10px;
+      }
+    }
     .downloads-section {
       grid-template-columns: repeat(1, 1fr);
     }

downloads.html

@@ -19,6 +19,9 @@ permalink: /downloads
     </div>
   </div>
   <div class="downloads-filter-content">
+    <div class="filter-buttons">
+      <button class="save-changes"><i class="fas fa-times"></i></button>
+    </div>
     <div>
       <div class="manufacturers">
         <h2>Manufacturers</h2>
@@ -37,9 +40,6 @@ permalink: /downloads
         </ul>
       </div>
     </div>
-    <div class="filter-buttons">
-      <button class="save-changes">SAVE CHANGES</button>
-    </div>
   </div>
   <div class="downloads-section">
   {% assign boards = site.data.files | sort: "downloads" | reverse %}