Improve mobile usability

frontend/src/components/manage/FormInputRow.svelte

@@ -47,29 +47,41 @@
   </div>
 
   {#if windowWidth <= 950}
-    <div class="row">
+    <div class="col-1">
       {#if withDirectionButtons}
-        <div class="col-2">
+        <div class="row">
-          <form on:submit|preventDefault={() => forwardMove("down")} class="button-form">
+          <div class="col-2-force">
-            <Button icon="fas fa-chevron-down" disabled={index >= formLength - 1} />
+            <form on:submit|preventDefault={() => forwardMove("down")} class="button-form">
-          </form>
+              <Button fullWidth={true} disabled={index >= formLength - 1}>
-        </div>
+                <i class="fas fa-chevron-down"></i>
-        <div class="col-2">
+              </Button>
-          <form on:submit|preventDefault={() => forwardMove("up")} class="button-form">
+            </form>
-            <Button icon="fas fa-chevron-up" disabled={index === 0} />
+          </div>
-          </form>
+          <div class="col-2-force">
+            <form on:submit|preventDefault={() => forwardMove("up")} class="button-form">
+              <Button fullWidth={true} disabled={index === 0}>
+                <i class="fas fa-chevron-up"></i>
+              </Button>
+            </form>
+          </div>
         </div>
       {/if}
-      {#if withSaveButton}
+      <div class="row">
-        <form on:submit|preventDefault={forwardSave} class="button-form">
+        <div class="col-2-force">
-          <Button icon="fas fa-save">Save</Button>
+          {#if withSaveButton}
-        </form>
+            <form on:submit|preventDefault={forwardSave} class="button-form">
-      {/if}
+              <Button icon="fas fa-save">Save</Button>
-      {#if withDeleteButton}
+            </form>
-        <form on:submit|preventDefault={forwardDelete} class="button-form">
+          {/if}
-          <Button icon="fas fa-trash" danger={true}>Delete</Button>
+        </div>
-        </form>
+        <div class="col-2-force">
-      {/if}
+          {#if withDeleteButton}
+            <form on:submit|preventDefault={forwardDelete} class="button-form">
+              <Button icon="fas fa-trash" danger={true}>Delete</Button>
+            </form>
+          {/if}
+        </div>
+      </div>
     </div>
   {/if}
 
@@ -155,12 +167,12 @@
     }
 
     @media only screen and (max-width: 950px) {
-        .row {
-            flex-direction: column;
-        }
-
         .settings-row {
             flex-direction: column-reverse !important;
         }
+
+        .button-form {
+            width: 100%;
+        }
     }
 </style>

frontend/src/components/manage/SettingsCard.svelte

@@ -272,7 +272,7 @@
         }
     }
 
-    :global(.col-1) {
+    :global(.col-1, .col-1-force) {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
@@ -280,7 +280,7 @@
         height: 100%;
     }
 
-    :global(.col-2) {
+    :global(.col-2, .col-2-force) {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
@@ -288,7 +288,7 @@
         height: 100%;
     }
 
-    :global(.col-3) {
+    :global(.col-3, .col-3-force) {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
@@ -296,7 +296,7 @@
         height: 100%;
     }
 
-    :global(.col-4) {
+    :global(.col-4, .col-4-force) {
         display: flex;
         flex-direction: column;
         align-items: flex-start;

frontend/src/includes/Navbar.svelte

@@ -33,13 +33,11 @@
     import NavElement from "../components/NavElement.svelte";
 
     function dropdownNav() {
-      console.log(dropdown);
+      dropdown.update(v => !v);
-        dropdown.update(v => !v);
     }
 
     function closeDropdown() {
-      console.log('cum');
+       dropdown.set(false);
-        dropdown.set(false);
     }
 </script>
 

frontend/src/views/Forms.svelte

@@ -202,10 +202,7 @@
         [inputs[idx+1], inputs[idx]] = [form.inputs[idx], form.inputs[idx+1]]
       }
 
-      console.log(getForm(formId).inputs)
-
       forms = forms;
-      //await loadForms();
     }
   }