From e004ac2d4068053db73c9a593ad28deb72c5a432 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Wed, 23 Sep 2026 19:57:08 +0300
Subject: [PATCH] fix ui

---
 app/javascript/elements/convert_upload.js    |  6 ++---
 app/javascript/elements/file_dropzone.js     |  9 ++++++++
 app/javascript/elements/toggle_classes.js    | 24 ++++++++++++--------
 app/views/templates/_submission.html.erb     |  6 ++---
 app/views/templates_folders/edit.html.erb    |  2 +-
 app/views/templates_share_link/show.html.erb |  2 +-
 6 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/app/javascript/elements/convert_upload.js b/app/javascript/elements/convert_upload.js
index a00cd6668..0cc8f4700 100644
--- a/app/javascript/elements/convert_upload.js
+++ b/app/javascript/elements/convert_upload.js
@@ -59,10 +59,10 @@ export async function convertImagesInInput (input) {
 
 export default class extends HTMLElement {
   connectedCallback () {
-    const input = this.querySelector('input[type="file"]')
-    const form = input.form
+    this.addEventListener('change', async (e) => {
+      const input = e.target
+      const form = input.form
 
-    input.addEventListener('change', async () => {
       await convertImagesInInput(input)
 
       form.querySelector('[type="submit"]')?.setAttribute('disabled', true)
diff --git a/app/javascript/elements/file_dropzone.js b/app/javascript/elements/file_dropzone.js
index fb8c1ae75..ad7843e6f 100644
--- a/app/javascript/elements/file_dropzone.js
+++ b/app/javascript/elements/file_dropzone.js
@@ -14,6 +14,15 @@ export default actionable(targetable(class extends HTMLElement {
     this.addEventListener('dragover', (e) => e.preventDefault())
     this.addEventListener('drop', this.onDrop)
     document.addEventListener('turbo:submit-end', this.toggleLoading)
+
+    if (this.area) {
+      this.initArea()
+    } else {
+      queueMicrotask(() => this.initArea())
+    }
+  }
+
+  initArea () {
     this.area?.addEventListener('dragover', this.onDragover)
     this.area?.addEventListener('dragleave', this.onDragleave)
   }
diff --git a/app/javascript/elements/toggle_classes.js b/app/javascript/elements/toggle_classes.js
index 332ac84ff..c9599dafb 100644
--- a/app/javascript/elements/toggle_classes.js
+++ b/app/javascript/elements/toggle_classes.js
@@ -1,19 +1,23 @@
 export default class extends HTMLElement {
   connectedCallback () {
+    this.addEventListener('click', this.onClick)
+  }
+
+  onClick = (event) => {
     const button = this.querySelector('a, button, label')
 
+    if (!button?.contains(event.target)) return
+
     const target = this.dataset.targetId ? document.getElementById(this.dataset.targetId) : button
 
-    button.addEventListener('click', () => {
-      this.dataset.classes.split(' ').forEach((cls) => {
-        if (this.dataset.action === 'remove') {
-          target.classList.remove(cls)
-        } else if (this.dataset.action === 'add') {
-          target.classList.add(cls)
-        } else {
-          target.classList.toggle(cls)
-        }
-      })
+    this.dataset.classes.split(' ').forEach((cls) => {
+      if (this.dataset.action === 'remove') {
+        target.classList.remove(cls)
+      } else if (this.dataset.action === 'add') {
+        target.classList.add(cls)
+      } else {
+        target.classList.toggle(cls)
+      }
     })
   }
 }
diff --git a/app/views/templates/_submission.html.erb b/app/views/templates/_submission.html.erb
index 095afd902..1bfd95f28 100644
--- a/app/views/templates/_submission.html.erb
+++ b/app/views/templates/_submission.html.erb
@@ -34,14 +34,14 @@
         <div class="flex items-center space-x-4">
           <span class="flex flex-col md:flex-row md:items-center gap-3 min-w-0">
             <% if submission.expired? && !submitter.completed_at? && !submitter.declined_at? %>
-              <div class="md:tooltip flex" data-tip="<%= l(submission.expire_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
+              <div class="tooltip tooltip-no-touch flex" data-tip="<%= l(submission.expire_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
                 <span class="badge badge-error md:w-32 bg-opacity-50 badge-lg uppercase text-sm max-sm:text-[13px] font-semibold">
                   <%= t('expired') %>
                 </span>
               </div>
             <% else %>
               <a href="<%= submission_path(submission) %>" class="flex z-[1]">
-                <span class="badge <%= SubmissionsController::STATUS_BADGES[submitter.status] %> md:w-32 badge-lg bg-opacity-50 uppercase text-sm max-sm:text-[13px] font-semibold md:tooltip" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
+                <span class="badge <%= SubmissionsController::STATUS_BADGES[submitter.status] %> md:w-32 badge-lg bg-opacity-50 uppercase text-sm max-sm:text-[13px] font-semibold tooltip tooltip-no-touch" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
                   <%= t(submitter.status) %>
                 </span>
               </a>
@@ -124,7 +124,7 @@
               </span>
             </a>
           <% elsif submission.expired? %>
-            <div class="md:tooltip flex" data-tip="<%= l(submission.expire_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
+            <div class="tooltip tooltip-no-touch flex" data-tip="<%= l(submission.expire_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
               <span class="badge badge-error md:w-32 bg-opacity-50 badge-lg uppercase text-sm max-sm:text-[13px] font-semibold">
                 <%= t('expired') %>
               </span>
diff --git a/app/views/templates_folders/edit.html.erb b/app/views/templates_folders/edit.html.erb
index 83a90ba20..c28da2ac4 100644
--- a/app/views/templates_folders/edit.html.erb
+++ b/app/views/templates_folders/edit.html.erb
@@ -5,7 +5,7 @@
       <%= f.hidden_field :parent_name, value: @template.folder.parent_folder&.name || @template.folder.name %>
       <toggle-visible data-element-ids="<%= %w[folder_form subfolder_form].to_json %>" class="block relative" data-focus-id="name">
         <div class="flex items-center justify-between mb-2.5">
-          <label for="is_root_folder" class="flex items-center md:tooltip tooltip-right pr-2 group" data-tip="<%= t('change_parent_folder') %>">
+          <label for="is_root_folder" class="flex items-center tooltip tooltip-right tooltip-no-touch pr-2 group" data-tip="<%= t('change_parent_folder') %>">
             <%= check_box_tag :is_root_folder, 'folder_form', data: { action: 'change:toggle-visible#trigger' }, class: 'hidden' %>
             <span class="flex items-center mt-1">
               <%= svg_icon('folder', class: 'w-5 h-5 flex-shrink-0 group-hover:hidden mr-1') %>
diff --git a/app/views/templates_share_link/show.html.erb b/app/views/templates_share_link/show.html.erb
index ea2c0f501..71cec53f5 100644
--- a/app/views/templates_share_link/show.html.erb
+++ b/app/views/templates_share_link/show.html.erb
@@ -10,7 +10,7 @@
     <% end %>
     <%= form_for @template, url: template_share_link_path(@template), method: :post, html: { id: 'shared_link_form', autocomplete: 'off', class: 'mt-3' }, data: { close_on_submit: false } do |f| %>
       <% if @template.preferences&.dig('require_email_2fa') || @template.preferences&.dig('require_phone_2fa') %>
-        <label for="template_shared_link" class="md:tooltip tooltip-bottom flex items-center my-4 justify-between gap-4 p-4 border border-base-300 rounded-2xl bg-base-100" data-tip="<%= t(:templates_that_require_email_or_phone_2fa_cannot_be_used_via_a_shared_link) %>">
+        <label for="template_shared_link" class="tooltip tooltip-bottom tooltip-no-touch flex items-center my-4 justify-between gap-4 p-4 border border-base-300 rounded-2xl bg-base-100" data-tip="<%= t(:templates_that_require_email_or_phone_2fa_cannot_be_used_via_a_shared_link) %>">
           <span><%= t('enable_shared_link') %></span>
           <%= check_box_tag 'shared_link', 'true', false, disabled: true, class: 'toggle' %>
         </label>