Redo version page (#777)

* Redo version page

* More work on editing page

* Make saving work

* Finish version editing

* Version creation (base)

* Add creation buttons

* Add file uploader to versions page

* Add version file parsing

* Finish PR

* Fix version page responsiveness and use more consistent card design

* Whoops that wasn't supposed to be there

* Fixes + allow whole page dragging

* Re-add lost merge data

* Remove debug line

* Move back to list btm

Co-authored-by: Prospector <prospectordev@gmail.com>

assets/styles/components.scss

@@ -381,25 +381,25 @@ tr.button-transparent {
   background-color: transparent;
   border-radius: var(--size-rounded-sm);
 
-    &:focus-visible:not(&:disabled) > *,
-    &:hover:not(&:disabled) > * {
-      cursor: pointer;
-      filter: brightness(0.85);
-      background-color: var(--color-raised-bg);
-    }
+  &:focus-visible:not(&:disabled) > *,
+  &:hover:not(&:disabled) > * {
+    cursor: pointer;
+    filter: brightness(0.85);
+    background-color: var(--color-raised-bg);
+  }
 
-    &:active:not(&:disabled) > * {
-      filter: brightness(0.8);
-      background-color: var(--color-raised-bg);
-    }
+  &:active:not(&:disabled) > * {
+    filter: brightness(0.8);
+    background-color: var(--color-raised-bg);
+  }
 
-    &:disabled > *,
-    &[disabled] > * {
-      cursor: not-allowed;
-      filter: grayscale(50%);
-      opacity: 0.5;
-      box-shadow: none;
-    }
+  &:disabled > *,
+  &[disabled] > * {
+    cursor: not-allowed;
+    filter: grayscale(50%);
+    opacity: 0.5;
+    box-shadow: none;
+  }
 }
 
 .button-within {
@@ -886,6 +886,7 @@ textarea.known-error {
 }
 
 .known-errors {
+  min-height: 0;
   color: var(--color-special-red);
 
   ul {
@@ -999,6 +1000,7 @@ h1 {
         color: var(--color-special-red);
       }
     }
+
     .label__description {
       display: block;
       margin-block-end: var(--spacing-card-sm);
@@ -1067,11 +1069,14 @@ h1 {
     width: 15rem;
   }
 
-  >,
-  .extend-styling> {
-    input + *,
-    .input-group + * {
-      margin-block-start: var(--spacing-card-md);
+  > :where(input + *, .input-group + *) {
+    margin-block-start: var(--spacing-card-md);
+  }
+
+  .input-group {
+    .multiselect, input {
+      width: auto;
+      flex-basis: 0;
     }
   }
 
@@ -1146,6 +1151,13 @@ h1 {
   margin-right: 0;
 }
 
+.full-width-inputs {
+  .multiselect, input, .iconified-input {
+    width: 100%;
+    flex-basis: 100%;
+  }
+}
+
 input,
 button {
   &:disabled {
@@ -1356,3 +1368,10 @@ button {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 }
+
+.sr-only {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}