adjust form

app/javascript/submission_form/date_step.vue

@@ -1,13 +1,13 @@
 <template>
   <div dir="auto">
     <div
-      class="flex justify-between items-center w-full"
+      class="flex justify-between items-end w-full mb-3.5 sm:mb-4"
       :class="{ 'mb-2': !field.description }"
     >
       <label
         v-if="showFieldNames"
         :for="field.uuid"
-        class="label text-lg sm:text-2xl"
+        class="label text-xl sm:text-2xl py-0"
       >
         <MarkdownContent
           v-if="field.title"

app/javascript/submission_form/form.vue

@@ -164,7 +164,7 @@
               v-if="showFieldNames && (currentField.name || currentField.title)"
               :for="currentField.uuid"
               dir="auto"
-              class="label text-lg sm:text-2xl"
+              class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
               :class="{ 'mb-2': !currentField.description }"
             >
               <MarkdownContent
@@ -175,7 +175,7 @@
                 {{ currentField.name }}
               </template>
               <template v-if="!currentField.required">
-                <span :class="{ 'hidden sm:inline': (currentField.title || currentField.name).length > 24 }">
+                <span :class="{ 'hidden sm:inline': (currentField.title || currentField.name).length > 20 }">
                   ({{ t('optional') }})
                 </span>
               </template>
@@ -225,7 +225,7 @@
               v-if="showFieldNames && (currentField.name || currentField.title)"
               :for="currentField.uuid"
               dir="auto"
-              class="label text-lg sm:text-2xl"
+              class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
               :class="{ 'mb-2': !currentField.description }"
             >
               <MarkdownContent
@@ -236,7 +236,7 @@
                 {{ currentField.name }}
               </template>
               <template v-if="!currentField.required">
-                <span :class="{ 'hidden sm:inline': (currentField.title || currentField.name).length > 24 }">
+                <span :class="{ 'hidden sm:inline': (currentField.title || currentField.name).length > 20 }">
                   ({{ t('optional') }})
                 </span>
               </template>
@@ -474,7 +474,7 @@
         </div>
         <div
           v-if="(currentField.type !== 'payment' && currentField.type !== 'verification') || submittedValues[currentField.uuid]"
-          :class="currentField.type === 'signature' ? 'mt-2' : 'mt-6 md:mt-8'"
+          :class="currentField.type === 'signature' ? 'mt-2' : 'mt-4 md:mt-6'"
         >
           <button
             id="submit_form_button"
@@ -530,9 +530,9 @@
       />
       <div
         v-if="stepFields.length < 80"
-        class="flex justify-center"
+        class="flex justify-center mt-3 sm:mt-4 mb-0 sm:mb-1"
       >
-        <div class="flex items-center mt-4 mb-1 flex-wrap">
+        <div class="flex items-center flex-wrap">
           <a
             v-for="(step, index) in stepFields"
             :key="step[0].uuid"

app/javascript/submission_form/image_step.vue

@@ -1,10 +1,10 @@
 <template>
   <div v-if="modelValue">
-    <div class="flex justify-between items-center w-full mb-2">
+    <div class="flex justify-between items-end w-full mb-3.5 md:mb-4">
       <label
         v-if="showFieldNames"
         :for="field.uuid"
-        class="label text-lg sm:text-2xl"
+        class="label text-xl sm:text-2xl py-0"
       >
         <MarkdownContent
           v-if="field.title"

app/javascript/submission_form/initials_step.vue

@@ -1,12 +1,12 @@
 <template>
   <div dir="auto">
     <div
-      class="flex justify-between items-center w-full"
+      class="flex justify-between items-end w-full mb-3.5 md:mb-4"
       :class="{ 'mb-2': !field.description }"
     >
       <label
         v-if="showFieldNames"
-        class="label text-lg sm:text-2xl"
+        class="label text-xl sm:text-2xl py-0"
       >
         <MarkdownContent
           v-if="field.title"

app/javascript/submission_form/invite_form.vue

@@ -40,7 +40,7 @@
       >
     </div>
     <div
-      class="mt-6 md:mt-8"
+      class="mt-4 md:mt-6"
     >
       <button
         type="submit"

app/javascript/submission_form/multi_select_step.vue

@@ -3,7 +3,7 @@
     v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
-    class="label text-lg sm:text-2xl"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
     :class="{ 'mb-2': !field.description }"
   >
     <MarkdownContent
@@ -12,7 +12,7 @@
     />
     <template v-else>{{ field.name }}</template>
     <template v-if="!field.required">
-      <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 24 }">
+      <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 20 }">
         ({{ t('optional') }})
       </span>
     </template>

app/javascript/submission_form/number_step.vue

@@ -3,7 +3,7 @@
     v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
-    class="label text-lg sm:text-2xl"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
     :class="{ 'mb-2': !field.description }"
   >
     <MarkdownContent
@@ -12,7 +12,7 @@
     />
     <template v-else>{{ field.name }}</template>
     <template v-if="!field.required">
-      <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 24 }">
+      <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 20 }">
         ({{ t('optional') }})
       </span>
     </template>

app/javascript/submission_form/payment_step.vue

@@ -1,7 +1,7 @@
 <template>
   <label
     v-if="!modelValue && !sessionId"
-    class="label text-lg sm:text-2xl mb-2"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
   >
     <MarkdownContent
       v-if="field.title"

app/javascript/submission_form/phone_step.vue

@@ -3,7 +3,7 @@
     <label
       v-if="showFieldNames"
       :for="isCodeSent ? 'one_time_code' : field.uuid"
-      class="label text-lg sm:text-2xl"
+      class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
       :class="{ 'mb-2': !field.description }"
     >
       <MarkdownContent

app/javascript/submission_form/signature_step.vue

@@ -4,12 +4,12 @@
     class="relative"
   >
     <div
-      class="flex justify-between items-center w-full"
+      class="flex justify-between items-end w-full mb-3.5 md:mb-4"
       :class="{ 'mb-2': !field.description }"
     >
       <label
         v-if="showFieldNames"
-        class="label text-lg sm:text-2xl"
+        class="label text-xl sm:text-2xl py-0"
       >
         <MarkdownContent
           v-if="field.title"

app/javascript/submission_form/text_step.vue

@@ -3,7 +3,7 @@
     v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
-    class="label text-lg sm:text-2xl"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
     :class="{ 'mb-2': !field.description }"
   >
     <MarkdownContent
@@ -12,7 +12,7 @@
     />
     <template v-else>{{ field.name }}</template>
     <template v-if="!field.required">
-      <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 24 }">
+      <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 20 }">
         ({{ t('optional') }})
       </span>
     </template>

app/javascript/submission_form/verification_step.vue

@@ -1,6 +1,6 @@
 <template>
   <label
-    class="label text-lg sm:text-2xl mb-2"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
   >
     <MarkdownContent
       v-if="field.title"