From 5bed6448dcea7c4051bdec2142e77d8fcef45b75 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <alex@docuseal.com>
Date: Mon, 27 Jan 2025 13:30:34 +0200
Subject: [PATCH] make custom fields titles smaller on mobile devices

---
 .../submission_form/attachment_step.vue          |  2 +-
 app/javascript/submission_form/date_step.vue     | 14 ++++++++++----
 app/javascript/submission_form/form.vue          | 16 ++++++++++++----
 app/javascript/submission_form/image_step.vue    | 16 +++++++++++++---
 app/javascript/submission_form/initials_step.vue |  7 ++++---
 .../submission_form/multi_select_step.vue        | 16 +++++++++++-----
 app/javascript/submission_form/number_step.vue   | 15 +++++++++------
 app/javascript/submission_form/payment_step.vue  |  2 +-
 app/javascript/submission_form/phone_step.vue    |  8 +++-----
 .../submission_form/signature_step.vue           |  7 ++++---
 app/javascript/submission_form/text_step.vue     | 15 +++++++++------
 .../submission_form/verification_step.vue        |  2 +-
 12 files changed, 78 insertions(+), 42 deletions(-)

diff --git a/app/javascript/submission_form/attachment_step.vue b/app/javascript/submission_form/attachment_step.vue
index f64dbb23..9f9f5f8b 100644
--- a/app/javascript/submission_form/attachment_step.vue
+++ b/app/javascript/submission_form/attachment_step.vue
@@ -49,7 +49,7 @@
       <MarkdownContent :string="field.description" />
     </div>
     <FileDropzone
-      :message="`${t('upload')} ${field.name || t('files')}${field.required ? '' : ` (${t('optional')})`}`"
+      :message="`${t('upload')} ${(field.title || field.name) || t('files')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :multiple="true"
       :dry-run="dryRun"
diff --git a/app/javascript/submission_form/date_step.vue b/app/javascript/submission_form/date_step.vue
index 7984ac09..7c9ebded 100644
--- a/app/javascript/submission_form/date_step.vue
+++ b/app/javascript/submission_form/date_step.vue
@@ -5,18 +5,24 @@
       :class="{ 'mb-2': !field.description }"
     >
       <label
+        v-if="showFieldNames"
         :for="field.uuid"
-        class="label text-2xl"
+        class="label text-lg sm:text-2xl"
       >
         <MarkdownContent
           v-if="field.title"
           :string="field.title"
         />
         <template v-else>
-          {{ field.name && showFieldNames ? field.name : t('date') }}
-          <template v-if="!field.required">
+          {{ field.name || t('date') }}
+        </template>
+        <template v-if="!field.required">
+          <span
+            class="ml-1"
+            :class="{ 'hidden sm:inline': (field.title || field.name || t('date') ).length > 10 }"
+          >
             ({{ t('optional') }})
-          </template>
+          </span>
         </template>
       </label>
       <button
diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue
index cb41d182..2077bcef 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-2xl"
+              class="label text-lg sm:text-2xl"
               :class="{ 'mb-2': !currentField.description }"
             >
               <MarkdownContent
@@ -173,7 +173,11 @@
               />
               <template v-else>
                 {{ currentField.name }}
-                <template v-if="!currentField.required">({{ t('optional') }})</template>
+              </template>
+              <template v-if="!currentField.required">
+                <span :class="{ 'hidden sm:inline': (currentField.title || currentField.name).length > 24 }">
+                  ({{ t('optional') }})
+                </span>
               </template>
             </label>
             <div
@@ -221,7 +225,7 @@
               v-if="showFieldNames && (currentField.name || currentField.title)"
               :for="currentField.uuid"
               dir="auto"
-              class="label text-2xl"
+              class="label text-lg sm:text-2xl"
               :class="{ 'mb-2': !currentField.description }"
             >
               <MarkdownContent
@@ -230,7 +234,11 @@
               />
               <template v-else>
                 {{ currentField.name }}
-                <template v-if="!currentField.required">({{ t('optional') }})</template>
+              </template>
+              <template v-if="!currentField.required">
+                <span :class="{ 'hidden sm:inline': (currentField.title || currentField.name).length > 24 }">
+                  ({{ t('optional') }})
+                </span>
               </template>
             </label>
             <div
diff --git a/app/javascript/submission_form/image_step.vue b/app/javascript/submission_form/image_step.vue
index 4499eb83..593659b9 100644
--- a/app/javascript/submission_form/image_step.vue
+++ b/app/javascript/submission_form/image_step.vue
@@ -2,8 +2,18 @@
   <div v-if="modelValue">
     <div class="flex justify-between items-center w-full mb-2">
       <label
-        class="label text-2xl"
-      >{{ showFieldNames && field.name ? field.name : t('image') }}</label>
+        v-if="showFieldNames"
+        :for="field.uuid"
+        class="label text-lg sm:text-2xl"
+      >
+        <MarkdownContent
+          v-if="field.title"
+          :string="field.title"
+        />
+        <template v-else>
+          {{ field.name || t('image') }}
+        </template>
+      </label>
       <button
         class="btn btn-outline btn-sm"
         @click.prevent="remove"
@@ -35,7 +45,7 @@
       <MarkdownContent :string="field.description" />
     </div>
     <FileDropzone
-      :message="`${t('upload')} ${field.name || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
+      :message="`${t('upload')} ${(field.title || field.name) || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :dry-run="dryRun"
       :accept="'image/*'"
diff --git a/app/javascript/submission_form/initials_step.vue b/app/javascript/submission_form/initials_step.vue
index 5835c9e7..587d6dce 100644
--- a/app/javascript/submission_form/initials_step.vue
+++ b/app/javascript/submission_form/initials_step.vue
@@ -5,17 +5,18 @@
       :class="{ 'mb-2': !field.description }"
     >
       <label
-        class="label text-2xl"
+        v-if="showFieldNames"
+        class="label text-lg sm:text-2xl"
       >
         <MarkdownContent
           v-if="field.title"
           :string="field.title"
         />
         <template v-else>
-          {{ showFieldNames && field.name ? field.name : t('initials') }}
+          {{ field.name || t('initials') }}
         </template>
       </label>
-      <div class="space-x-2 flex">
+      <div class="space-x-2 flex flex-none">
         <span
           v-if="isDrawInitials"
           class="tooltip"
diff --git a/app/javascript/submission_form/multi_select_step.vue b/app/javascript/submission_form/multi_select_step.vue
index 3d5d12c8..0db6f68e 100644
--- a/app/javascript/submission_form/multi_select_step.vue
+++ b/app/javascript/submission_form/multi_select_step.vue
@@ -3,13 +3,19 @@
     v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
-    class="label text-2xl"
+    class="label text-lg sm:text-2xl"
     :class="{ 'mb-2': !field.description }"
-  ><MarkdownContent
-     v-if="field.title"
-     :string="field.title"
-   />
+  >
+    <MarkdownContent
+      v-if="field.title"
+      :string="field.title"
+    />
     <template v-else>{{ field.name }}</template>
+    <template v-if="!field.required">
+      <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 24 }">
+        ({{ t('optional') }})
+      </span>
+    </template>
   </label>
   <div
     v-if="field.description"
diff --git a/app/javascript/submission_form/number_step.vue b/app/javascript/submission_form/number_step.vue
index 217b2d28..015ff7d2 100644
--- a/app/javascript/submission_form/number_step.vue
+++ b/app/javascript/submission_form/number_step.vue
@@ -3,15 +3,18 @@
     v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
-    class="label text-2xl"
+    class="label text-lg sm:text-2xl"
     :class="{ 'mb-2': !field.description }"
-  ><MarkdownContent
-     v-if="field.title"
-     :string="field.title"
-   />
+  >
+    <MarkdownContent
+      v-if="field.title"
+      :string="field.title"
+    />
     <template v-else>{{ field.name }}</template>
     <template v-if="!field.required">
-      ({{ t('optional') }})
+      <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 24 }">
+        ({{ t('optional') }})
+      </span>
     </template>
   </label>
   <div
diff --git a/app/javascript/submission_form/payment_step.vue b/app/javascript/submission_form/payment_step.vue
index c41ec1fd..95a1a08e 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-2xl mb-2"
+    class="label text-lg sm:text-2xl mb-2"
   >
     <MarkdownContent
       v-if="field.title"
diff --git a/app/javascript/submission_form/phone_step.vue b/app/javascript/submission_form/phone_step.vue
index 84875a86..b17559a1 100644
--- a/app/javascript/submission_form/phone_step.vue
+++ b/app/javascript/submission_form/phone_step.vue
@@ -1,8 +1,9 @@
 <template>
   <div>
     <label
+      v-if="showFieldNames"
       :for="isCodeSent ? 'one_time_code' : field.uuid"
-      class="label text-2xl"
+      class="label text-lg sm:text-2xl"
       :class="{ 'mb-2': !field.description }"
     >
       <MarkdownContent
@@ -10,10 +11,7 @@
         :string="field.title"
       />
       <template v-else>
-        {{ showFieldNames && field.name ? field.name : t('verified_phone_number') }}
-        <template v-if="!field.required">
-          ({{ t('optional') }})
-        </template>
+        {{ field.name || t('verified_phone_number') }}
       </template>
     </label>
     <div
diff --git a/app/javascript/submission_form/signature_step.vue b/app/javascript/submission_form/signature_step.vue
index f1f6a5be..7bbf5021 100644
--- a/app/javascript/submission_form/signature_step.vue
+++ b/app/javascript/submission_form/signature_step.vue
@@ -8,17 +8,18 @@
       :class="{ 'mb-2': !field.description }"
     >
       <label
-        class="label text-2xl"
+        v-if="showFieldNames"
+        class="label text-lg sm:text-2xl"
       >
         <MarkdownContent
           v-if="field.title"
           :string="field.title"
         />
         <template v-else>
-          {{ showFieldNames && field.name ? field.name : t('signature') }}
+          {{ field.name || t('signature') }}
         </template>
       </label>
-      <div class="space-x-2 flex">
+      <div class="space-x-2 flex flex-none">
         <span
           v-if="isTextSignature && format !== 'typed' && format !== 'upload'"
           class="tooltip"
diff --git a/app/javascript/submission_form/text_step.vue b/app/javascript/submission_form/text_step.vue
index 7435f595..8f3e13f3 100644
--- a/app/javascript/submission_form/text_step.vue
+++ b/app/javascript/submission_form/text_step.vue
@@ -3,15 +3,18 @@
     v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
-    class="label text-2xl"
+    class="label text-lg sm:text-2xl"
     :class="{ 'mb-2': !field.description }"
-  ><MarkdownContent
-     v-if="field.title"
-     :string="field.title"
-   />
+  >
+    <MarkdownContent
+      v-if="field.title"
+      :string="field.title"
+    />
     <template v-else>{{ field.name }}</template>
     <template v-if="!field.required">
-      ({{ t('optional') }})
+      <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 24 }">
+        ({{ t('optional') }})
+      </span>
     </template>
   </label>
   <div
diff --git a/app/javascript/submission_form/verification_step.vue b/app/javascript/submission_form/verification_step.vue
index 59310714..2850fd0d 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-2xl mb-2"
+    class="label text-lg sm:text-2xl mb-2"
   >
     <MarkdownContent
       v-if="field.title"