increase parties limit

app/javascript/template_builder/field_submitter.vue

@@ -143,6 +143,7 @@
       <li
         v-for="(submitter, index) in submitters"
         :key="submitter.uuid"
+        class="w-full"
       >
         <a
           href="#"
@@ -191,7 +192,10 @@
           </div>
         </a>
       </li>
-      <li v-if="submitters.length < names.length && editable && allowAddNew">
+      <li
+        v-if="submitters.length < names.length && editable && allowAddNew"
+        class="w-full"
+      >
         <a
           href="#"
           class="flex px-2"
@@ -308,9 +312,21 @@ export default {
         this.t('seventeenth_party'),
         this.t('eighteenth_party'),
         this.t('nineteenth_party'),
-        this.t('twentieth_party')
+        this.t('twentieth_party'),
+        ...this.generatedNames
       ]
     },
+    generatedNames () {
+      const names = []
+
+      for (let i = 21; i < 101; i++) {
+        const suffix = this.getOrdinalSuffix(i)
+
+        names.push(`${i}${suffix} ${this.t('party')}`)
+      }
+
+      return names
+    },
     lastPartyIndex () {
       const index = Math.max(...this.submitters.map((s) => this.names.indexOf(s.name)))
 
@@ -328,6 +344,13 @@ export default {
     selectSubmitter (submitter) {
       this.$emit('update:model-value', submitter.uuid)
     },
+    getOrdinalSuffix (num) {
+      if (num % 10 === 1 && num % 100 !== 11) return 'st'
+      if (num % 10 === 2 && num % 100 !== 12) return 'nd'
+      if (num % 10 === 3 && num % 100 !== 13) return 'rd'
+
+      return 'th'
+    },
     remove (submitter) {
       if (window.confirm(this.t('are_you_sure_'))) {
         this.$emit('remove', submitter)

app/javascript/template_builder/fields.vue

@@ -5,7 +5,7 @@
       class="roles-dropdown w-full rounded-lg"
       :style="withStickySubmitters ? { backgroundColor } : {}"
       :submitters="submitters"
-      :menu-style="{ backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
+      :menu-style="{ overflow: 'auto', display: 'flex', flexDirection: 'row', maxHeight: 'calc(100vh - 120px)', backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
       :editable="editable && !defaultSubmitters.length"
       @new-submitter="save"
       @remove="removeSubmitter"

app/javascript/template_builder/i18n.js

@@ -1,4 +1,5 @@
 const en = {
+  party: 'Party',
   method: 'Method',
   reorder_fields: 'Reorder fields',
   verify_id: 'Verify ID',
@@ -160,6 +161,7 @@ const en = {
 }
 
 const es = {
+  party: 'Parte',
   method: 'Método',
   reorder_fields: 'Reordenar campos',
   verify_id: 'Verificar ID',
@@ -321,6 +323,7 @@ const es = {
 }
 
 const it = {
+  party: 'Parte',
   method: 'Metodo',
   reorder_fields: 'Riordina i campi',
   verify_id: 'Verifica ID',
@@ -482,6 +485,7 @@ const it = {
 }
 
 const pt = {
+  party: 'Parte',
   method: 'Método',
   reorder_fields: 'Reorganizar campos',
   verify_id: 'Verificar ID',
@@ -643,6 +647,7 @@ const pt = {
 }
 
 const fr = {
+  party: 'Partie',
   method: 'Méthode',
   reorder_fields: 'Réorganiser les champs',
   verify_id: "Vérifier l'ID",
@@ -804,6 +809,7 @@ const fr = {
 }
 
 const de = {
+  party: 'Partei',
   method: 'Verfahren',
   reorder_fields: 'Felder neu anordnen',
   verify_id: 'ID überprüfen',