From eb53af12c40f9da1686e47d10773b1f5e76cf316 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Sun, 2 Feb 2025 12:30:01 +0200
Subject: [PATCH] adjust form

---
 app/javascript/submission_form/date_step.vue       |  4 ++--
 app/javascript/submission_form/form.vue            | 14 +++++++-------
 app/javascript/submission_form/image_step.vue      |  4 ++--
 app/javascript/submission_form/initials_step.vue   |  4 ++--
 app/javascript/submission_form/invite_form.vue     |  2 +-
 .../submission_form/multi_select_step.vue          |  4 ++--
 app/javascript/submission_form/number_step.vue     |  4 ++--
 app/javascript/submission_form/payment_step.vue    |  2 +-
 app/javascript/submission_form/phone_step.vue      |  2 +-
 app/javascript/submission_form/signature_step.vue  |  4 ++--
 app/javascript/submission_form/text_step.vue       |  4 ++--
 .../submission_form/verification_step.vue          |  2 +-
 12 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/app/javascript/submission_form/date_step.vue b/app/javascript/submission_form/date_step.vue
index 7c9ebded..478cc6d7 100644
--- a/app/javascript/submission_form/date_step.vue
+++ b/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"
diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue
index 2077bcef..01e2de78 100644
--- a/app/javascript/submission_form/form.vue
+++ b/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"
diff --git a/app/javascript/submission_form/image_step.vue b/app/javascript/submission_form/image_step.vue
index 593659b9..6f35523f 100644
--- a/app/javascript/submission_form/image_step.vue
+++ b/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"
diff --git a/app/javascript/submission_form/initials_step.vue b/app/javascript/submission_form/initials_step.vue
index 587d6dce..9aee4727 100644
--- a/app/javascript/submission_form/initials_step.vue
+++ b/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"
diff --git a/app/javascript/submission_form/invite_form.vue b/app/javascript/submission_form/invite_form.vue
index eefe7661..10c3927d 100644
--- a/app/javascript/submission_form/invite_form.vue
+++ b/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"
diff --git a/app/javascript/submission_form/multi_select_step.vue b/app/javascript/submission_form/multi_select_step.vue
index 0db6f68e..636e2308 100644
--- a/app/javascript/submission_form/multi_select_step.vue
+++ b/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>
diff --git a/app/javascript/submission_form/number_step.vue b/app/javascript/submission_form/number_step.vue
index 015ff7d2..79b81f3e 100644
--- a/app/javascript/submission_form/number_step.vue
+++ b/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>
diff --git a/app/javascript/submission_form/payment_step.vue b/app/javascript/submission_form/payment_step.vue
index 95a1a08e..aa9a00aa 100644
--- a/app/javascript/submission_form/payment_step.vue
+++ b/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"
diff --git a/app/javascript/submission_form/phone_step.vue b/app/javascript/submission_form/phone_step.vue
index b17559a1..1419b9f9 100644
--- a/app/javascript/submission_form/phone_step.vue
+++ b/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
diff --git a/app/javascript/submission_form/signature_step.vue b/app/javascript/submission_form/signature_step.vue
index f4d3cdd9..c472f7e7 100644
--- a/app/javascript/submission_form/signature_step.vue
+++ b/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"
diff --git a/app/javascript/submission_form/text_step.vue b/app/javascript/submission_form/text_step.vue
index 8f3e13f3..c45cdf4c 100644
--- a/app/javascript/submission_form/text_step.vue
+++ b/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>
diff --git a/app/javascript/submission_form/verification_step.vue b/app/javascript/submission_form/verification_step.vue
index 6542fe73..c40e3746 100644
--- a/app/javascript/submission_form/verification_step.vue
+++ b/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"