Improve mobile usability

frontend/src/components/manage/FormInputRow.svelte

@@ -47,30 +47,42 @@
   </div>
 
   {#if windowWidth <= 950}
-    <div class="row">
+    <div class="col-1">
       {#if withDirectionButtons}
-        <div class="col-2">
+        <div class="row">
+          <div class="col-2-force">
             <form on:submit|preventDefault={() => forwardMove("down")} class="button-form">
-            <Button icon="fas fa-chevron-down" disabled={index >= formLength - 1} />
+              <Button fullWidth={true} disabled={index >= formLength - 1}>
+                <i class="fas fa-chevron-down"></i>
+              </Button>
             </form>
           </div>
-        <div class="col-2">
+          <div class="col-2-force">
             <form on:submit|preventDefault={() => forwardMove("up")} class="button-form">
-            <Button icon="fas fa-chevron-up" disabled={index === 0} />
+              <Button fullWidth={true} disabled={index === 0}>
+                <i class="fas fa-chevron-up"></i>
+              </Button>
             </form>
           </div>
+        </div>
       {/if}
+      <div class="row">
+        <div class="col-2-force">
           {#if withSaveButton}
             <form on:submit|preventDefault={forwardSave} class="button-form">
               <Button icon="fas fa-save">Save</Button>
             </form>
           {/if}
+        </div>
+        <div class="col-2-force">
           {#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}
 
   {#if withCreateButton}
@@ -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,12 +33,10 @@
     import NavElement from "../components/NavElement.svelte";
 
     function dropdownNav() {
-      console.log(dropdown);
       dropdown.update(v => !v);
     }
 
     function closeDropdown() {
-      console.log('cum');
        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();
     }
   }