Versatile auth URLs & many UI fixes (#199)

* Make project cards right-align their last element

Spaces out elements in a `.project-card` using `justify-content: space-between;`.

Fixes modrinth/knossos#170

* Automatically set URL for auth redirect

* Make login button use base url or current origin

Allows the login button to work in dev environment

* Remove Axios base URL trailing slash

* Update authUrl() on dashboard to match default

* Remove 'code' query from URL on page load
Allow non-exact paths to highlight mod & dashboard tabs

Fixes modrinth/knossos#200

* Make page 5 button visible on page 4 (pagination)

Fixes modrinth/knossos#184

* Color links on legal pages

Fixes modrinth/knossos#166

* Set max notifications to 5 and ignore duplicates

Fixes modrinth/knossos#175

* Add space above report button when no user desc

Fixes modrinth/knossos#143

* Better text spacing from edge of mobile screen

Fixes modrinth/knossos#179

* Fix slanted bars in modrinth/knossos#57

* Fix checkbox grid and role label

Fixes modrinth/knossos#191

* Move mod 'settings' button to the far right

Fixes modrinth/knossos#138

* Abbreviate minutes to min. when time is too long

Not a perfect solution imo, but works for now

Fixes modrinth/knossos#193

* Fix mobile header margins & add breakpoints

Fixes modrinth/knossos#203

* Clean up nuxt config
Silence babel warning & styleResources

* Upgrade sass-loader to 10.1.1 and remove warning

* Remove added horizontal footer padding

https://github.com/modrinth/knossos/pull/199#discussion_r629011624

* Improve mobile header fix

* Fix up minor inconsistencies in mod header

* Remove hard coded date

* Cleans up pagination to be more intuitive

* Fixes member invite input on moble

* Fix login button when searching mods

* Improved mobile mod search

Consistently sized pagination buttons

Breakpoint for sort buttons on smaller screens

* Consistent link style on text-only pages

* Better 4k support

* Slightly better mobile project-card support

Shuffles categories under mod icon when there is room

* Animate homepage typewriter effect backwards

* Tiny commit to align mod icons in mod headers

* Make processing status include 'Under Review'

This can be later updated once the backend has a separate status

* Create vercel.json

* Update domain auto detection

* Test vercel NODE_ENV

* Remove console.log for debugging hosting services

* Make mobile first + fix shrinked text circle size

* Optimize SVG

* Change media queries to be more mobile first

* Remove `|| window.location.origin`

* re-deploy vercel

* Change "Processing" message to "Under review"

pages/mod/_id/settings.vue

@@ -42,7 +42,7 @@
         </div>
       </label>
     </section>
-    <div class="section-header columns">
+    <div class="section-header columns team-invite">
       <h3 class="column-grow-1">Team members</h3>
       <div class="column">
         <input
@@ -417,12 +417,30 @@ export default {
 
     .main-info {
       margin-bottom: var(--spacing-card-lg);
+
+      @media screen and (min-width: 1024px) {
+        label {
+          align-items: center;
+          input {
+            margin-left: 1rem;
+          }
+        }
+      }
     }
     .permissions {
       margin: 1rem 0;
+      max-width: 45rem;
       display: grid;
-      grid-template-columns: 10rem 10rem 10rem;
-      grid-template-rows: 1.5rem 1.5rem 1.5rem;
+      grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+      grid-gap: 0.5rem;
+
+      label {
+        flex-direction: row;
+        input {
+          flex: none;
+          margin-right: 0.5rem;
+        }
+      }
     }
   }
 
@@ -469,10 +487,37 @@ section {
       text-align: center;
       height: fit-content;
       flex: 1;
+      @media screen and (max-width: 1024px) {
+        margin: 0.5rem 0 1rem 0;
+      }
     }
     div:hover {
       cursor: pointer;
     }
   }
 }
+
+.team-invite {
+  @media screen and (max-width: 1024px) {
+    flex-direction: column;
+    h3 {
+      margin-bottom: 0.5rem;
+    }
+  }
+  > div {
+    input {
+      margin-right: 1rem;
+    }
+    @media screen and (max-width: 500px) {
+      display: flex;
+      flex-direction: column;
+      input {
+        margin: 0;
+      }
+      button {
+        margin-top: 0.5rem;
+      }
+    }
+  }
+}
 </style>