fix dropdowns

app/javascript/submission_form/completed.vue

@@ -126,7 +126,7 @@ export default {
     IconLogin,
     IconDownload
   },
-  inject: ['baseUrl', 't', 'nativePlatform'],
+  inject: ['baseUrl', 't'],
   props: {
     submitterSlug: {
       type: String,
@@ -186,6 +186,11 @@ export default {
       type: Object,
       required: false,
       default: () => ({})
+    },
+    nativePlatform: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   data () {

app/javascript/submission_form/form.vue

@@ -503,6 +503,7 @@
             :with-qr-button="withQrButton"
             :submitter="submitter"
             :show-field-names="showFieldNames"
+            :native-platform="nativePlatform"
             @update:reason="values[currentField.preferences?.reason_field_uuid] = $event"
             @touch-attachment="attachmentsIndex[previousSignatureValue] ? attachmentsIndex[previousSignatureValue].created_at = new Date() : null"
             @attached="attachments.push($event)"
@@ -521,6 +522,7 @@
             :attachments-index="attachmentsIndex"
             :show-field-names="showFieldNames"
             :submitter-slug="submitterSlug"
+            :native-platform="nativePlatform"
             @attached="attachments.push($event)"
             @start="scrollIntoField(currentField)"
             @focus="scrollIntoField(currentField)"
@@ -652,6 +654,7 @@
         :with-confetti="withConfetti"
         :can-send-email="canSendEmail && !!submitter.email"
         :submitter-slug="submitterSlug"
+        :native-platform="nativePlatform"
       />
       <nav
         v-if="stepFields.length < 80"
@@ -774,7 +777,6 @@ export default {
       baseUrl: this.baseUrl,
       scrollIntoArea: this.scrollIntoArea,
       scrollIntoField: this.scrollIntoField,
-      nativePlatform: this.nativePlatform,
       t: this.t
     }
   },

app/javascript/submission_form/initials_step.vue

@@ -236,6 +236,11 @@ export default {
       required: false,
       default: ''
     },
+    nativePlatform: {
+      type: String,
+      required: false,
+      default: ''
+    },
     modelValue: {
       type: String,
       required: false,

app/javascript/submission_form/signature_step.vue

@@ -376,7 +376,7 @@ export default {
     IconSignature,
     IconArrowsDiagonalMinimize2
   },
-  inject: ['baseUrl', 't', 'nativePlatform'],
+  inject: ['baseUrl', 't'],
   props: {
     field: {
       type: Object,
@@ -460,6 +460,11 @@ export default {
       required: false,
       default: ''
     },
+    nativePlatform: {
+      type: String,
+      required: false,
+      default: ''
+    },
     modelValue: {
       type: String,
       required: false,

app/javascript/template_builder/builder.vue

@@ -224,7 +224,7 @@
           @update:model-value="updateName"
         />
       </div>
-      <div class="space-x-3 flex items-center flex-shrink-0">
+      <div class="flex items-center gap-3 flex-shrink-0">
         <slot
           v-if="$slots.buttons"
           name="buttons"
@@ -405,11 +405,11 @@
                 tabindex="0"
                 class="dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box text-right"
               >
-                <li>
+                <native-action
-                  <native-action
+                  :data-label="t('save_and_preview')"
-                    :data-label="t('save_and_preview')"
+                  data-icon="eye"
-                    data-icon="eye"
+                >
-                  >
+                  <li>
                     <a
                       :href="`/templates/${template.id}/form`"
                       :data-native-actions="template.submitters.length > 1 ? 'users' : null"
@@ -427,13 +427,13 @@
                       />
                       <span class="whitespace-nowrap">{{ t('save_and_preview') }}</span>
                     </a>
-                  </native-action>
+                  </li>
-                </li>
+                </native-action>
-                <li>
+                <native-action
-                  <native-action
+                  :data-label="t('preferences')"
-                    :data-label="t('preferences')"
+                  data-icon="adjustments_horizontal"
-                    data-icon="adjustments_horizontal"
+                >
-                  >
+                  <li>
                     <a
                       :href="`/templates/${template.id}/preferences`"
                       :data-turbo-frame="!nativePlatform && isMobile && isBreakpointLg ? '_top' : 'modal'"
@@ -443,13 +443,14 @@
                       <IconAdjustments class="w-6 h-6 flex-shrink-0" />
                       <span class="whitespace-nowrap">{{ t('preferences') }}</span>
                     </a>
-                  </native-action>
+                  </li>
-                </li>
+                </native-action>
-                <li v-if="withRevisionsMenu">
+                <native-action
-                  <native-action
+                  v-if="withRevisionsMenu"
-                    :data-label="t('revisions')"
+                  :data-label="t('revisions')"
-                    data-icon="history"
+                  data-icon="history"
-                  >
+                >
+                  <li>
                     <button
                       class="flex space-x-2"
                       @click.prevent="openRevisionsModal"
@@ -460,13 +461,14 @@
                       </span>
                       <span class="whitespace-nowrap">{{ t('revisions') }}</span>
                     </button>
-                  </native-action>
+                  </li>
-                </li>
+                </native-action>
-                <li v-if="withDownload">
+                <native-action
-                  <native-action
+                  v-if="withDownload"
-                    :data-label="t('download')"
+                  :data-label="t('download')"
-                    data-icon="download"
+                  data-icon="download"
-                  >
+                >
+                  <li>
                     <button
                       class="flex space-x-2"
                       :disabled="isDownloading"
@@ -489,8 +491,8 @@
                         class="whitespace-nowrap"
                       >{{ t('download') }}</span>
                     </button>
-                  </native-action>
+                  </li>
-                </li>
+                </native-action>
               </ul>
             </div>
           </span>

app/views/shared/_navbar.html.erb

@@ -27,7 +27,7 @@
         <label tabindex="0" class="cursor-pointer bg-base-content text-purple-300 rounded-full p-2 w-9 justify-center flex">
           <span class="text-sm align-text-top"><%= current_user.initials %></span>
         </label>
-        <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box min-w-[160px] text-right">
+        <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box text-right" style="min-width: 160px;">
           <li class="md:hidden">
             <%= link_to settings_path, class: 'flex items-center' do %>
               <%= svg_icon('adjustments', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>

app/views/submissions/show.html.erb

@@ -20,7 +20,7 @@
         <h1 class="text-xl md:text-3xl font-semibold focus:text-clip" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;"><% (@submission.name || @submission.template&.name).to_s.split(/(_)/).each do |item| %><%= item %><wbr><% end %></h1>
       </a>
     <% end %>
-    <div class="space-x-3 flex items-center">
+    <div class="flex items-center gap-3">
       <% if signed_in? && can?(:destroy, @submission) && @submission.archived_at? && !@submission.completed_at? %>
         <native-action data-label="<%= t('unarchive') %>" data-icon="rotate" data-section="archive">
           <%= button_to button_title(title: t('unarchive'), disabled_with: t('unarchive')[0..-2], icon: svg_icon('rotate', class: 'w-6 h-6')), submission_unarchive_index_path(@submission), class: 'btn btn-primary btn-ghost text-base hidden md:flex' %>
@@ -80,8 +80,8 @@
                 <% end %>
                 <ul class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box text-right">
                   <% if show_combined_download %>
-                    <li>
+                    <native-action data-label="<%= t('download_combined_pdf') %>" data-icon="download">
-                      <native-action data-label="<%= t('download_combined_pdf') %>" data-icon="download">
+                      <li>
                         <download-button role="button" tabindex="0" data-src="<%= local_assigns[:is_preview] ? (@sig_submitter ? submit_form_documents_path(@sig_submitter.slug, { sig: params[:sig], combined: true }.compact) : submissions_preview_download_index_path(@submission.slug, combined: true)) : submission_download_index_path(@submission, combined: true) %>" class="flex items-center">
                           <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
                             <%= svg_icon('download', class: 'w-6 h-6 flex-shrink-0') %>
@@ -92,18 +92,18 @@
                             <span><%= t('downloading') %></span>
                           </span>
                         </download-button>
-                      </native-action>
+                      </li>
-                    </li>
+                    </native-action>
                   <% end %>
                   <% if show_unarchive %>
-                    <li>
+                    <native-action data-label="<%= t('unarchive') %>" data-icon="rotate" data-section="archive">
-                      <native-action data-label="<%= t('unarchive') %>" data-icon="rotate" data-section="archive">
+                      <li>
                         <button form="submission_unarchive_form">
                           <%= button_title(title: t('unarchive'), disabled_with: t('unarchive'), icon: svg_icon('rotate', class: 'w-6 h-6 flex-shrink-0')) %>
                         </button>
-                      </native-action>
+                        <%= button_to '', submission_unarchive_index_path(@submission), form: { id: 'submission_unarchive_form' }, form_class: 'hidden' %>
-                      <%= button_to '', submission_unarchive_index_path(@submission), form: { id: 'submission_unarchive_form' }, form_class: 'hidden' %>
+                      </li>
-                    </li>
+                    </native-action>
                   <% end %>
                 </ul>
               </div>

app/views/templates/_template.html.erb

@@ -73,7 +73,7 @@
       <label tabindex="0" aria-label="<%= t('more') %>" class="block cursor-pointer py-2 pl-4 pr-2 -ml-4 -mr-2 -mt-2 -mb-3 text-base-content/70">
         <%= svg_icon('dots', class: 'w-5 h-5') %>
       </label>
-      <ul tabindex="0" class="<%= turbo_native_app? ? 'hidden' : 'z-10 dropdown-content p-2 mb-1 shadow menu text-base bg-base-100 rounded-box min-w-[160px]' %>">
+      <ul tabindex="0" class="<%= turbo_native_app? ? 'hidden' : 'z-10 dropdown-content p-2 mb-1 shadow menu text-base bg-base-100 rounded-box' %>" style="min-width: 160px;">
         <% if can?(:create, Submission) %>
           <li>
             <native-menu-action data-icon="send" data-label="<%= t('send') %>" class="grid-cols-1 p-0">

app/views/users/index.html.erb

@@ -65,7 +65,7 @@
               <label tabindex="0" aria-label="<%= t('more') %>" class="btn btn-ghost btn-circle btn-sm">
                 <%= svg_icon('dots_vertical', class: 'w-5 h-5') %>
               </label>
-              <ul tabindex="0" class="<%= turbo_native_app? ? 'hidden' : 'z-10 dropdown-content p-2 mt-2 shadow menu bg-base-100 rounded-box min-w-[160px]' %>">
+              <ul tabindex="0" class="<%= turbo_native_app? ? 'hidden' : 'z-10 dropdown-content p-2 mt-2 shadow menu bg-base-100 rounded-box' %>" style="min-width: 160px;">
                 <% if can_edit %>
                   <li>
                     <native-menu-action data-icon="pencil" data-label="<%= t('edit') %>" class="grid-cols-1 p-0">